@charset "UTF-8";

.font-zen {
  font-family: "Zen Old Mincho", serif !important;
  color: #1a2b4c;
}
.font-serif {
  font-family: "Noto Serif JP", serif !important;
}

.font-noto {
  font-family: "Noto Sans JP", sans-serif;
}

.sp {
  display: inline;
}

.pc {
  display: none;
}

@media (min-width: 1024px) {
  .sp {
    display: none;
  }

  .pc {
    display: inline;
  }
}

.ttl-leaf {
  width: clamp(4.063rem, 2.852rem + 5.16vw, 7.5rem);
}

/* ==========================================================================
   Base & locked state
   ========================================================================== */
body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   Header Hamburger
   ========================================================================== */
.hamburger-line {
  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  transform-origin: center;
}
.is-open .hamburger-line:nth-child(1) {
  transform: translateY(0.5rem) rotate(45deg);
}
.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/* ==========================================================================
   Animations (Intersection Observer)
   ========================================================================== */

/* ふわっとフェードイン（上方向に移動しながら） */
.fade-in-up {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card.fade-in-up {
  filter: blur(0.75rem);
  opacity: 0;
  transform: translate3d(0, 3.5rem, 0) scale(0.985);
  transition:
    opacity 1.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease;
  will-change: opacity, filter, transform;
}

.service-card.fade-in-up.is-visible {
  filter: blur(0);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* 単純なフェードイン（葉っぱ画像用） */
.fade-in {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.fade-in.is-visible {
  opacity: 1;
}

/* ==========================================================================
   Slider Custom Adjustments
   ========================================================================== */

/* テキスト選択を防ぎスライド操作を優先 */
#slider-viewport {
  user-select: none;
  -webkit-user-select: none;
}
#slider-container {
  will-change: transform;
}

/* 物件タイトルの行数制限（2行） */
.property-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}

/* Accessibilty: フォーカス時の視認性強化 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #2e602e;
  outline-offset: 4px;
}

/* ==========================================================================
   Wave Animation (左から右へ表示)
   ========================================================================== */
.wave-reveal {
  /* Safari対応を含む初期状態（完全に右側に隠す） */
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition:
    -webkit-clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:
    clip-path,
    -webkit-clip-path;
}

/* 親要素(wave-trigger)が画面に入ったら、画像を全表示する */
.wave-trigger.is-visible .wave-reveal {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

.reasons-wave-reveal {
  position: relative;
  left: 50%;
  display: block;
  width: max(100vw, 90rem);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .wave-reveal {
    transition:
      -webkit-clip-path 4s cubic-bezier(0.22, 1, 0.36, 1),
      clip-path 4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reasons-wave-reveal {
    left: 0;
    transform: none;
  }
}

/* ==========================================================================
   Reasons Title Decoration
   ========================================================================== */
.reasons-title-decoration {
  display: flex;
  justify-content: center;
  text-align: center;
}

.reasons-title-decoration__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 3.5rem;
}

.reasons-title-decoration__leaf {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  height: auto;
  pointer-events: none;
  transform: translateX(-50%);
}

@media (min-width: 1024px) {
  .reasons-title-decoration__title {
    padding-top: 0;
  }

  .reasons-title-decoration__leaf {
    top: 50%;
    left: auto;
    right: calc(100% + 1rem);
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   Header Contact Button
   ========================================================================== */
.header-contact-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.5rem;
  padding: 0 2rem;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(90deg, #d4b055 0%, #c69b3a 48%, #a97821 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 0.1875rem;
  box-shadow:
    0 0.5rem 1.25rem rgba(128, 93, 25, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}
.mobile-menu .header-contact-button {
  width: 350px;
}

.header-contact-button::before {
  position: absolute;
  inset: -60% -35%;
  z-index: -1;
  content: "";
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.58),
      transparent 24%
    ),
    linear-gradient(
      115deg,
      transparent 34%,
      rgba(255, 255, 255, 0.52) 48%,
      transparent 62%
    );
  opacity: 0;
  transform: translateX(-45%) rotate(8deg);
  transition:
    opacity 0.35s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.header-contact-button::after {
  position: absolute;
  inset: 0.1875rem;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.125rem;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.header-contact-button__icon,
.header-contact-button__text {
  position: relative;
  z-index: 1;
}

.header-contact-button__icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.header-contact-button:hover,
.header-contact-button:focus-visible {
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 0.875rem 1.75rem rgba(128, 93, 25, 0.24),
    0 0 0 0.25rem rgba(212, 176, 85, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateY(-0.1875rem);
}

.header-contact-button:hover::before,
.header-contact-button:focus-visible::before {
  opacity: 1;
  transform: translateX(42%) rotate(8deg);
}

.header-contact-button:hover::after,
.header-contact-button:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.header-contact-button:hover .header-contact-button__icon,
.header-contact-button:focus-visible .header-contact-button__icon {
  transform: translateX(-0.125rem) rotate(-8deg);
}

@media (min-width: 1260px) {
  .header-contact-button {
    height: 4rem;
    padding: 0 2.5rem;
    font-size: 1rem;
  }
}

/* ==========================================================================
   More Button
   ========================================================================== */
.nfirst-more-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  min-height: 3.75rem;
  padding: 0.875rem 1.25rem;
  overflow: hidden;
  color: #397641;
  font-weight: 700;
  letter-spacing: 0.08em;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(248, 250, 246, 0.96)
    ),
    #ffffff;
  border: 1px solid #457a45;
  border-radius: 50vh;
  box-shadow:
    0 0.5rem 1.5rem rgba(57, 118, 65, 0.08),
    inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.75);
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.nfirst-more-button::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background: linear-gradient(135deg, #2f6d37 0%, #4f8f54 52%, #87b56f 100%);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.nfirst-more-button::after {
  position: absolute;
  top: -60%;
  left: -20%;
  z-index: -1;
  width: 35%;
  height: 220%;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: translateX(-180%) rotate(18deg);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.nfirst-more-button__text,
.nfirst-more-button__icon {
  position: relative;
  z-index: 1;
}

.nfirst-more-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: #ffffff;
  background: #397641;
  border-radius: 9999px;
  box-shadow: 0 0.375rem 1rem rgba(57, 118, 65, 0.18);
  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    transform 0.35s ease;
}

.nfirst-more-button:hover,
.nfirst-more-button:focus-visible {
  color: #ffffff;
  border-color: #397641;
  box-shadow:
    0 0.875rem 2rem rgba(57, 118, 65, 0.18),
    inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.22);
}

.nfirst-more-button:hover::before,
.nfirst-more-button:focus-visible::before {
  transform: translateX(0);
}

.nfirst-more-button:hover::after,
.nfirst-more-button:focus-visible::after {
  transform: translateX(360%) rotate(18deg);
}

.nfirst-more-button:hover .nfirst-more-button__icon,
.nfirst-more-button:focus-visible .nfirst-more-button__icon {
  color: #397641;
  background: #ffffff;
  transform: translateX(0.25rem);
}

/* ==========================================================================
   Animations (Intersection Observer) に追記
   ========================================================================== */

/* 左から右へスライドインしながらフェードイン */
.fade-in-left {
  opacity: 0;
  transform: translateX(-4rem); /* -64px相当 */
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 右から左へスライドインしながらフェードイン */
.fade-in-right {
  opacity: 0;
  transform: translateX(4rem); /* 64px相当 */
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}
/* ==========================================================================
   Infinite Loop Scroll (フッター上部のスライダー用)
   ========================================================================== */
@keyframes loop-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 【修正】-100% から -50% に変更 */
    /* コンテナの50%（＝画像1セット分の幅）移動した瞬間に0に戻すことでシームレスに繋ぐ */
    transform: translateX(-50%);
  }
}

.animate-loop-scroll {
  /* 速度を変えたい場合はここの 40s を調整してください */
  animation: loop-scroll 40s linear infinite;
  will-change: transform;
}

.animate-loop-scroll:hover {
  animation-play-state: paused;
}

/* ==========================================================================
   Hero Slider (ズーム＆クロスフェード)
   ========================================================================== */
.mv-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 1枚あたり8秒、合計16秒で1周するループ */
  animation: hero-zoom-fade 16s infinite;
  will-change: transform, opacity;
}

.mv-slide-1 {
  animation-delay: 0s;
}

.mv-slide-2 {
  animation-delay: 8s; /* 2枚目は8秒遅れでスタート */
}

.mv-copy-panel {
  position: relative;
  isolation: isolate;
}

.mv-copy-panel::before {
  position: absolute;
  inset: -1.5rem -1rem -2rem -1rem;
  z-index: -1;
  content: "";
  background:
    radial-gradient(
      circle at 28% 18%,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.68) 42%,
      rgba(255, 255, 255, 0) 76%
    ),
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.52) 58%,
      rgba(255, 255, 255, 0)
    );
  filter: blur(1.75rem);
  border-radius: 2.5rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .mv-copy-panel::before {
    inset: -2.5rem -4rem -3rem -3rem;
    filter: blur(2.5rem);
  }
}

@keyframes hero-zoom-fade {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  5% {
    opacity: 1; /* 0.8秒でフェードイン */
  }
  45% {
    opacity: 1; /* 表示を維持しつつ拡大を続ける */
  }
  55% {
    opacity: 0; /* 次の画像へクロスフェードアウト */
  }
  100% {
    opacity: 0;
    transform: scale(1.15); /* 最終的に115%まで拡大 */
  }
}

/* ==========================================================================
   Service Title Decoration
   ========================================================================== */
.service-title-decoration {
  display: flex;
  justify-content: center;
  text-align: center;
}

.service-title-decoration__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.service-title-decoration__leaf,
.service-title-decoration__en {
  position: absolute;
  top: 50%;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  transform: translateY(-50%);
}

.service-title-decoration__leaf {
  right: calc(100% + 0.75rem);
}

.service-title-decoration__en {
  left: calc(100% + 0.75rem);
  width: 5rem;
}

/* ===================================================
   N-first カスタム見出しスタイル (ブロックスタイル)
   =================================================== */

/* 共通設定（明朝体・緑色にする） */
.editor-content h2.is-style-nfirst-standard,
.editor-content h2.is-style-nfirst-elegant,
.editor-content h2.is-style-nfirst-accent,
.editor-content h3.is-style-nfirst-standard,
.editor-content h3.is-style-nfirst-elegant,
.editor-content h3.is-style-nfirst-accent {
  font-family: "Zen Old Mincho", serif !important;
  color: #397641 !important;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  border: none; /* 一旦リセット */
  background: transparent;
}

/* 1. スタンダード（左線＋下線） */
.is-style-nfirst-standard {
  border-left: 4px solid #397641 !important;
  border-bottom: 1px solid #d1e0ca !important;
  padding-left: 0.75rem !important;
  padding-bottom: 0.5rem !important;
}

/* 2. エレガント（上下線・中央揃え） */
.is-style-nfirst-elegant {
  border-top: 1px solid #397641 !important;
  border-bottom: 1px solid #397641 !important;
  padding: 1rem 0 !important;
  text-align: center !important;
}

/* 3. アクセント（薄緑背景＋左線） */
.is-style-nfirst-accent {
  background-color: #f8faf6 !important;
  border-left: 4px solid #397641 !important;
  padding: 1rem 1.25rem !important;
}

@media (min-width: 1024px) {
  .service-title-decoration__leaf {
    right: calc(100% + 1.25rem);
  }

  .service-title-decoration__en {
    left: calc(100% + 1.25rem);
  }
}