/* =============================================
   main.css
   サイバーレジデンシャル株式会社
   共通デザイン全般を管理するメインスタイルシート
   ============================================= */

/* =============================================
   1. CSS Custom Properties（デザイントークン）
   ============================================= */
:root {
  /* ── Brand Colors ── */
  --color-main: #E8879A;
  --color-sub-1: #5C3D2E;
  --color-sub-2: #F6F3EF;
  --color-accent-1: #E8879A;
  --color-accent-2: #5B162A;
  --color-bg: #ffffff;
  --color-bg-alt: #F6F3EF;
  --color-text: #333333;
  --color-text-muted: #888888;
  --color-border: #e8e8e8;

  /* ── Typography ── */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-base: 1rem;
  /* 16px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */
  --font-size-heading: 2.25rem;
  /* 36px / design-spec */
  --font-size-body: 1rem;
  /* 16px / design-spec */
  --font-size-note: 0.875rem;
  /* 14px / design-spec */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --line-height-base: 1.7;
  --line-height-tight: 1.25;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-section: 140px;
  /* design-spec */

  /* ── Layout ── */
  --content-max-width: 1216px;
  /* design-spec */
  --container-px-pc: 32px;
  --container-px-sp: 14px;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius: 0.5rem;
  --radius-lg: 1rem;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  /* ── Transition ── */
  --transition: 150ms ease;

  /* ── Hero ── */
  --hero-title-size-pc: 4rem;
  /* 64px */
  --hero-title-size-sp: 2rem;
  /* 32px */
  --hero-desc-size-pc: 1.125rem;
  /* 18px */
  --hero-desc-size-sp: 0.875rem;
  /* 14px */
  --hero-title-lh: 1.35;
  --hero-desc-lh: 1.9;
  --hero-col-content: 42%;
  --hero-col-media: 58%;
  --hero-frame-radius-pc: 200px 0 0 0;
  --hero-frame-radius-sp: 100px 0 0 0;
}

/* =============================================
     2. Reset & Base
     ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-main);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent-2);
}

p {
  font-weight: 500;
}

ul,
ol {
  padding-left: var(--space-6);
}

/* =============================================
     3. Layout
     ============================================= */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
  margin-bottom: 140px;
}

.section {
  padding-block: var(--space-section);
}

/* =============================================
     4. Typography
     ============================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--space-4);
  line-height: var(--line-height-base);
}

p:last-child {
  margin-bottom: 0;
}

/* =============================================
     5. Buttons
     ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition);
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background-color: var(--color-main);
  color: #fff;
  border-color: var(--color-main);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--color-main);
  text-decoration: none;
}

.btn-secondary {
  background-color: var(--color-sub-1);
  color: #fff;
  border-color: var(--color-sub-1);
}

.btn-secondary:hover {
  background-color: transparent;
  color: var(--color-sub-1);
  text-decoration: none;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-main);
  border-color: var(--color-main);
}

.btn-outline:hover {
  background-color: var(--color-main);
  color: #fff;
  text-decoration: none;
}

/* =============================================
     6. Posts & Pages
     ============================================= */
.entry {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-8);
}

.entry-header {
  margin-bottom: var(--space-6);
}

.entry-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.entry-title a {
  color: var(--color-text);
  text-decoration: none;
}

.entry-title a:hover {
  color: var(--color-main);
}

.entry-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.entry-content {
  margin-bottom: var(--space-6);
}

.entry-content>*+* {
  margin-top: var(--space-4);
}

/* =============================================
     7. Pagination
     ============================================= */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.pagination a:hover,
.pagination .current {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
  text-decoration: none;
}

/* =============================================
     8. Widgets
     ============================================= */
.widget {
  margin-bottom: var(--space-8);
}

.widget-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-main);
}

/* =============================================
     9. WordPress Core Classes
     ============================================= */
.alignleft {
  float: left;
  margin-right: var(--space-6);
  margin-bottom: var(--space-4);
}

.alignright {
  float: right;
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.aligncenter {
  display: block;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* =============================================
     10. Hero Section
     ============================================= */
.hero {
  min-height: calc(100vh - 135px);
  background-color: var(--color-bg);
  overflow: hidden;
  padding-top: 45px;
}

.hero-inner {
  display: flex;
  align-items: stretch;
  min-height: inherit;
}

/* ── テキストコンテンツ（左カラム） ── */
.hero-content {
  flex: 0 0 var(--hero-col-content);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 80px 80px 80px 80px;
}

.hero-title {
  font-size: var(--hero-title-size-pc);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
  line-height: var(--hero-title-lh);
  letter-spacing: -0.01em;
  margin: 0;
}

.hero-title__accent {
  color: var(--color-main);
}

.hero-desc {
  font-size: var(--hero-desc-size-pc);
  color: var(--color-sub-1);
  line-height: var(--hero-desc-lh);
  margin: 0;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 240px;
  padding: 20px 40px;
  background-color: var(--color-sub-1);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid var(--color-sub-1);
  border-radius: 4px;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition);
  line-height: 1;
}

.hero-btn:hover {
  background-color: transparent;
  color: var(--color-sub-1);
  text-decoration: none;
}

/* ── メディア（右カラム） ── */
.hero-media {
  flex: 0 0 var(--hero-col-media);
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 40px 0 40px 0;
}

.hero-media__frame {
  position: relative;
  z-index: 1;
  flex: 1;
  /* overflow:hidden は削除 — img に border-radius を直接適用するため */
}

/* 薄背景色を疑似要素で再現
     width / height を 100% で画像と同サイズに揃え、
     top / left のオフセットで左上にずらす */
.hero-media__frame::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background-color: var(--color-sub-2);
  border-radius: var(--hero-frame-radius-pc);
  z-index: -1;
}

.hero-media__frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--hero-frame-radius-pc);
  /* 画像自体をアーチ形状にクリップ */
}

.hero-media__placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-color: var(--color-sub-2);
}

/* =============================================
     11. Responsive
     ============================================= */

/* Tablet (600px〜1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
  :root {
    --hero-title-size-pc: 2.5rem;
    --hero-desc-size-pc: 1rem;
    --hero-col-content: 48%;
    --hero-col-media: 52%;
  }

  .hero-content {
    gap: 24px;
    padding: 60px 40px;
  }

  .hero-btn {
    min-width: 200px;
    padding: 16px 32px;
  }

  .hero-media {
    padding: 40px 24px 40px 14px;
  }
}

/* SP（〜599px） */
@media (max-width: 599px) {
  :root {
    --font-size-4xl: 1.875rem;
    --font-size-3xl: 1.5rem;
  }

  .container {
    padding-inline: var(--container-px-sp);
  }

  .site-content {
    margin-bottom: 60px;
  }

  /* Hero SP */
  .hero {
    min-height: calc(100vh - var(--header-height-sp, 60px));
  }

  .hero-inner {
    flex-direction: column;
  }

  .hero-media {
    order: -1;
    flex: 0 0 auto;
    height: 48vh;
    padding: 0 0 0 14px;
  }

  .hero-media__frame {
    width: 100%;
    display: flex;
    justify-content: right;
  }

  .hero-media__frame::before {
    top: -14px;
    left: 0;
    border-radius: var(--hero-frame-radius-sp);
    width: calc(100% + 14px);
    height: calc(100% + 14px);
  }

  .hero-media__frame img {
    border-radius: var(--hero-frame-radius-sp);
    width: 94%;
  }

  .hero-content {
    flex: 1;
    padding: 28px var(--container-px-sp) 0;
    gap: 20px;
  }

  .hero-title {
    font-size: var(--hero-title-size-sp);
  }

  .hero-desc {
    font-size: var(--hero-desc-size-sp);
  }

  /* PC専用改行をSPで非表示 → 「住まいに、もう一度」が1行になる */
  .br-pc {
    display: none;
  }

  .hero-desc br {
    display: none;
  }

  .hero-btn {
    width: 100%;
    min-width: unset;
    padding: 18px 24px;
    font-size: 0.9375rem;
  }
}

/* =============================================
     12. Features Section
     ============================================= */

/* ── Section ── */
.features {
  background-color: var(--color-bg);
  padding-block: 80px;
}

.features__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-pc, 32px);
}

/* ── Section Header ── */
.features__header {
  text-align: center;
}

.features__eyebrow {
  font-size: var(--font-size-sm);
  /* 14px */
  color: var(--color-accent-2);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.features__title {
  font-size: var(--font-size-heading);
  /* 36px */
  font-weight: 700;
  color: var(--color-main);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.features__sub-copy {
  margin-top: 24px;
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.8;
}

.features__sub-copy p {
  margin-bottom: 0;
}

/* ── Cards Grid ── */
.features__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

/* ── Card ── */
.features__card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  /* 8px */
  margin-bottom: 24px;
}

.features__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.features__card:hover .features__card-img img {
  transform: scale(1.03);
}

.features__card-title {
  font-size: var(--font-size-xl);
  /* 20px */
  font-weight: 700;
  color: var(--color-sub-1);
  line-height: 1.4;
  margin-bottom: 12px;
}

.features__card-text {
  font-size: var(--font-size-base);
  /* 16px */
  color: var(--color-text);
  line-height: 1.6;
  font-weight: 500;
}

.features__card-text p {
  margin-bottom: 0;
}

/* ── Button ── */
.features__btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.features__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 52px;
  background-color: var(--color-main);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  /* 4px */
  transition: background-color var(--transition);
  letter-spacing: 0.04em;
}

.features__btn:hover {
  background-color: var(--color-sub-1);
  color: #ffffff;
  text-decoration: none;
}

/* PC: SP用ラベルを非表示 */
.features__btn-label--sp {
  display: none;
}

/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {
  .features {
    padding-block: 60px;
  }

  .features__inner {
    padding-inline: var(--container-px-sp, 14px);
  }

  .features__eyebrow {
    font-size: 0.75rem;
    /* 12px */
  }

  .features__title {
    font-size: 1.4rem;
    /* 30px */
  }

  .features__sub-copy {
    font-size: var(--font-size-sm);
    text-align: left;
  }

  /* カード: 1列縦並び */
  .features__cards {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .features__card-title {
    font-size: var(--font-size-lg);
    /* 18px */
  }

  /* ボタン: 幅100% / SP用テキスト表示 */
  .features__btn {
    width: 100%;
  }

  .features__btn-label--pc {
    display: none;
  }

  .features__btn-label--sp {
    display: inline;
  }
}

/* ── Responsive: Tablet（600px〜1023px） ── */
@media (min-width: 600px) and (max-width: 1023px) {
  .features__cards {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .features__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 32px;
    align-items: start;
  }

  .features__card-img {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .features__card-title {
    align-self: end;
  }
}

/* =============================================
     13. Our Promise Section
     ============================================= */

/* ── Section ── */
.our-promise {
  background-color: var(--color-bg-alt);
  padding-block: 100px;
}

.our-promise__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

/* ── Section Header ── */
.our-promise__header {
  text-align: center;
  margin-bottom: 64px;
}

.our-promise__eyebrow {
  font-size: 0.8125rem;
  /* 13px */
  color: var(--color-accent-2);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.our-promise__title {
  font-size: var(--font-size-heading);
  /* 36px */
  font-weight: 700;
  color: var(--color-main);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.our-promise__sub-copy {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-base);
}

.our-promise__sub-copy p {
  margin-bottom: 0;
  font-weight: 500;
}

/* ── Cards List ── */
.our-promise__cards {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* ── Card 共通 ── */
.our-promise__card {
  position: relative;
}

/* 画像 */
.our-promise__card-img {
  width: 62%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.our-promise__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* テキストボックス（PC: 絶対配置でオーバーラップ） */
.our-promise__card-body {
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  position: absolute;
  width: 46%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* ── カード①③: テキスト左・画像右 ── */
.our-promise__card--text-left .our-promise__card-img {
  margin-left: auto;
  /* 画像を右へ寄せる */
}

.our-promise__card--text-left .our-promise__card-body {
  left: 0;
}

/* ── カード②: 画像左・テキスト右 ── */
.our-promise__card--img-left .our-promise__card-body {
  right: 0;
}

/* カードタイトル */
.our-promise__card-title {
  font-size: 1.375rem;
  /* 22px */
  font-weight: 700;
  color: var(--color-sub-1);
  line-height: 1.4;
  margin-bottom: 16px;
}

/* カード本文 */
.our-promise__card-text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.9;
}

.our-promise__card-text p {
  margin-bottom: 0;
  font-weight: 500;
}

/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {
  .our-promise {
    padding-block: 60px;
  }

  .our-promise__inner {
    padding-inline: var(--container-px-sp);
  }

  .our-promise__header {
    margin-bottom: 40px;
  }

  .our-promise__eyebrow {
    font-size: 0.75rem;
    /* 12px */
  }

  .our-promise__title {
    font-size: 1.5rem;
    /* 28px */
  }

  .our-promise__sub-copy {
    font-size: var(--font-size-sm);
    text-align: left;
  }

  .our-promise__cards {
    gap: 48px;
  }

  /* カード: 画像上・テキストボックス下オーバーラップ */
  .our-promise__card {
    display: flex;
    flex-direction: column;
  }

  .our-promise__card-img,
  .our-promise__card--text-left .our-promise__card-img,
  .our-promise__card--img-left .our-promise__card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    margin-left: 0;
    margin-right: 0;
  }

  .our-promise__card-body,
  .our-promise__card--text-left .our-promise__card-body,
  .our-promise__card--img-left .our-promise__card-body {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 90%;
    margin-inline: auto;
    margin-top: -30px;
    padding: 24px;
  }

  .our-promise__card-title {
    font-size: 1.1875rem;
    /* 19px */
  }

  .our-promise__card-text {
    font-size: var(--font-size-sm);
    /* 14px */
  }
}

/* ── Responsive: Tablet（600px〜1023px） ── */
@media (min-width: 600px) and (max-width: 1023px) {
  .our-promise {
    padding-block: 80px;
  }

  .our-promise__cards {
    gap: 60px;
  }

  .our-promise__card-img {
    width: 65%;
  }

  .our-promise__card-body {
    width: 50%;
    padding: 28px;
  }

  .our-promise__card-title {
    font-size: var(--font-size-lg);
    /* 18px */
  }
}


/* =============================================
     15. Page Visual（下層ページ共通ヘッダービジュアル）
     ============================================= */

/* ── セクション（基準レイヤー） ── */
.page-visual {
  position: relative;
  height: 630px;
  overflow: hidden;
  margin-bottom: 120px;
}

.page-id-10 .page-visual {
  margin-bottom: 0;
}

/* ── 背景画像: セクション全面 ── */
.page-visual__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  width: 70%;
  right: 0;
  left: auto;
  border-radius: 0 0 0 200px;
}

/* 白オーバーレイ 60% */
.page-visual__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6);
}

/* ── テキスト: 白エリア〜画像エリアに重なって配置（上下中央） ── */
.page-visual__text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 80px;
  z-index: 2;
}

/* 英語タイトル */
.page-visual__en {
  font-size: 8rem;
  /* 128px */
  font-weight: 500;
  color: var(--color-sub-1);
  line-height: 1.4;
  margin-bottom: 18px;
}

/* 日本語サブタイトル */
.page-visual__ja {
  font-size: var(--font-size-heading);
  /* 36px */
  font-weight: 500;
  color: var(--color-main);
  line-height: 1.4;
  margin-bottom: 0;
}

/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {
  .page-visual {
    height: 260px;
    margin-bottom: 52px;
  }

  .page-visual__image {
    border-radius: 0 0 0 60px;
    width: 86%;
  }

  /* テキスト: 左・上下中央 */
  .page-visual__text {
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
  }

  .page-visual__en {
    font-size: 3rem;
    /* 48px */
  }

  .page-visual__ja {
    font-size: var(--font-size-base);
    /* 16px */
  }
}

/* ── Responsive: Tablet（600px〜1023px） ── */
@media (min-width: 600px) and (max-width: 1023px) {
  .page-visual {
    height: 360px;
  }

  .page-visual::before {
    width: 42%;
  }

  .page-visual__text {
    top: 50%;
    transform: translateY(-50%);
    left: 48px;
  }

  .page-visual__en {
    font-size: 3.5rem;
    /* 56px */
  }

  .page-visual__ja {
    font-size: var(--font-size-base);
  }
}

/* =============================================
     16. Philosophy Section
     ============================================= */

.philosophy {
  padding-top: 120px;
}

/* ── 上段: 背景画像エリア ── */
.philosophy__visual {
  position: relative;
  background-image: url('/wp-content/uploads/2026/04/philosophy_visual.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 0;
}

/* 白グラデーションオーバーレイ（左100% → 中70% → 右0%） */
.philosophy__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 100%);
  z-index: 0;
}

/* テキストエリア */
.philosophy__text-area {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* 小見出し */
.philosophy__label {
  font-size: var(--font-size-sm);
  /* 14px */
  color: var(--color-accent-2);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* メイン見出し */
.philosophy__title {
  font-size: 2.5rem;
  /* 40px */
  font-weight: 700;
  color: var(--color-main);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* サブコピー */
.philosophy__sub-copy {
  font-size: 1.375rem;
  /* 22px */
  font-weight: 700;
  color: var(--color-sub-1);
  line-height: 1.7;
  margin-bottom: 24px;
}

.philosophy__sub-copy p {
  margin-bottom: 0;
}

/* 本文① */
.philosophy__text-1 {
  font-size: 0.9375rem;
  /* 15px */
  color: var(--color-sub-1);
  line-height: 1.9;
}

.philosophy__text-1 p {
  margin-bottom: 0;
  font-weight: 500;
}

/* ── 下段: テキストエリア ── */
.philosophy__bottom {
  padding-block: 60px;
  text-align: center;
}

/* 本文② */
.philosophy__text-2 {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
  font-size: 0.9375rem;
  /* 15px */
}

.philosophy__text-2 p {
  margin-bottom: 0;
  font-weight: 500;
}

/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {

  .philosophy {
    padding-top: 60px;
  }

  /* SP: 下から上に白が薄くなるグラデーション */
  .philosophy__visual::before {
    background: linear-gradient(to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 70%,
        rgba(255, 255, 255, 0) 100%);
  }

  /* 上段 */
  .philosophy__visual {
    padding-top: 168px;
    padding-bottom: 0;
  }

  .philosophy__text-area {
    padding: 0 14px;
    max-width: 100%;
  }

  .philosophy__label {
    font-size: 0.8125rem;
    /* 13px */
  }

  .philosophy__title {
    font-size: 1.75rem;
    /* 28px */
    margin-bottom: 20px;
  }

  .philosophy__sub-copy {
    font-size: var(--font-size-lg);
    /* 18px */
    margin-bottom: 16px;
  }

  .philosophy__text-1 {
    font-size: var(--font-size-sm);
    /* 14px */
  }

  /* 下段 */
  .philosophy__bottom {
    background-color: var(--color-bg);
    padding-block: 40px;
    text-align: left;
  }

  .philosophy__text-2 {
    padding-inline: 14px;
    font-size: var(--font-size-sm);
    /* 14px */
    color: var(--color-text);
  }
}

/* ── Responsive: Tablet（600px〜1023px） ── */
@media (min-width: 600px) and (max-width: 1023px) {
  .philosophy__visual {
    height: 400px;
  }

  .philosophy__text-area {
    padding: 0 14px;
    max-width: 520px;
  }

  .philosophy__title {
    font-size: 2rem;
  }

  .philosophy__sub-copy {
    font-size: var(--font-size-xl);
    /* 20px */
  }
}

/* =============================================
     17. Philosophy Comparison Table
     ============================================= */

/* ── グリッド（3列均等） ── */
.philosophy-comparison__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--content-max-width);
  margin-inline: auto;
}

/* ── 列背景色 ── */
.philosophy-comparison__col--new {
  background-color: #FAF7F4;
}

.philosophy-comparison__col--used {
  background-color: #F0EEEB;
}

.philosophy-comparison__col--reborn {
  background-color: #FFF0F3;
}

/* 再生住宅列: ピンク枠線 */
.philosophy-comparison__col--reborn {
  outline: 2px solid var(--color-main);
  outline-offset: -1px;
}

/* 列間の縦区切り線 */
.philosophy-comparison__col+.philosophy-comparison__col {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── 列ヘッダー ── */
.philosophy-comparison__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 32px;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.philosophy-comparison__header i {
  font-size: 2rem;
  /* 32px */
}

/* 新築・中古: ダークテキスト */
.philosophy-comparison__col--new .philosophy-comparison__header,
.philosophy-comparison__col--used .philosophy-comparison__header {
  color: var(--color-text);
}

/* 再生住宅: ピンクテキスト */
.philosophy-comparison__col--reborn .philosophy-comparison__header {
  color: var(--color-main);
}

/* ── リスト ── */
.philosophy-comparison__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── 各行 ── */
.philosophy-comparison__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── ラベル（アイコン + 項目名） ── */
.philosophy-comparison__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: nowrap;
}

.philosophy-comparison__label i {
  font-size: 1.125rem;
  /* 18px */
  flex-shrink: 0;
}

/* 新築・中古のアイコン色 */
.philosophy-comparison__col--new .philosophy-comparison__label i,
.philosophy-comparison__col--used .philosophy-comparison__label i {
  color: #555555;
}

/* 再生住宅のアイコン色 */
.philosophy-comparison__col--reborn .philosophy-comparison__label i {
  color: var(--color-main);
}

/* ── 評価値 ── */
.philosophy-comparison__value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: right;
  flex-shrink: 0;
}

.philosophy-comparison__value--bold {
  font-weight: 700;
}

/* 再生住宅の評価値: ピンク */
.philosophy-comparison__col--reborn .philosophy-comparison__value {
  color: var(--color-main);
}

/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {
  .philosophy-comparison__inner {
    grid-template-columns: 1fr;
    padding: 0 14px;
  }

  /* SP: 列間に横区切り線 */
  .philosophy-comparison__col+.philosophy-comparison__col {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .philosophy-comparison__header {
    padding-block: 24px;
  }

  .philosophy-comparison__header i {
    font-size: 1.75rem;
    /* 28px */
  }

  .philosophy-comparison__item {
    padding: 14px 20px;
  }
}

/* ── Responsive: Tablet（600px〜1023px） ── */
@media (min-width: 600px) and (max-width: 1023px) {
  .philosophy-comparison__item {
    padding: 14px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .philosophy-comparison__value {
    padding-left: 26px;
    /* アイコン幅分インデント */
  }
}


/* ============================================================
     18. Reason Section
     ============================================================ */

/* ── セクション全体 ── */
.reason {
  background-color: #ffffff;
  padding-block: 80px;
}

/* ── インナー ── */
.reason__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

/* ── セクションヘッダー ── */
.reason__header {
  text-align: center;
  margin-bottom: 40px;
}

.reason__label {
  font-size: var(--font-size-sm);
  color: var(--color-accent-2);
  letter-spacing: 0.12em;
  margin: 0 0 8px;
}

.reason__title {
  font-size: var(--font-size-4xl);
  color: var(--color-accent-1);
  font-weight: 700;
  margin: 0;
}

/* ── カードグリッド ── */
.reason__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ── 各カード ── */
.reason__card {
  padding: 40px 36px;
  text-align: center;
}

/* カード間の縦区切り線（PC） */
.reason__card+.reason__card {
  border-left: 1px solid rgba(0, 0, 0, 0.10);
}

/* ── カードヘッダー（アイコン + 見出し） ── */
.reason__card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.reason__card-header i {
  font-size: 28px;
  color: var(--color-main);
}

.reason__card-title {
  font-size: 1.25rem;
  /* 20px */
  font-weight: 700;
  color: var(--color-sub-1);
  margin: 0;
}

/* ── 本文テキスト ── */
.reason__card-text {
  font-size: 0.9375rem;
  /* 15px */
  color: var(--color-text);
  line-height: 1.9;
  text-align: center;
}

.reason__card-text p {
  margin: 0 0 0.75em;
}

.reason__card-text p:last-child {
  margin-bottom: 0;
}

/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {
  .reason {
    padding-block: 60px;
  }

  .reason__inner {
    padding-inline: var(--container-px-sp);
  }

  .reason__header {
    margin-bottom: 32px;
  }

  .reason__title {
    font-size: 1.5em;
  }

  .reason__cards {
    grid-template-columns: 1fr;
  }

  /* SP: カード間に横区切り線 */
  .reason__card+.reason__card {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
  }

  .reason__card {
    padding: 32px 20px;
  }

  .reason__card-title {
    font-size: 1.125rem;
    /* 18px */
  }

  .reason__card-text {
    font-size: 0.875rem;
    /* 14px */
  }
}


/* ============================================================
     19. Reason Slider Section
     ============================================================ */

@keyframes infinite-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ── セクション全体 ── */
.reason-slider {
  overflow: hidden;
  width: 100%;
}

/* ── トラック（画像セット×2 を横並び） ── */
.reason-slider__track {
  display: flex;
  gap: 4px;
  width: 200%;
  animation: infinite-scroll 60s linear infinite;
}

.reason-slider__track:hover {
  animation-play-state: paused;
}

/* ── 各画像アイテム ── */
.reason-slider__item {
  flex-shrink: 0;
  width: calc(100% / 6);
  /* 200%幅の中の1/6 = 実質ビューポートの1/3 */
  height: 360px;
  overflow: hidden;
}

.reason-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {
  .reason-slider__item {
    width: 80vw;
    height: 220px;
  }
}


/* ============================================================
     20. mokunuku+ テキストセクション
     ============================================================ */

/* ── セクション全体: 背景画像 ── */
.mokunuku-text {
  position: relative;
  background-image: url('/wp-content/uploads/2026/04/mokunuku_back.jpg');
  background-size: cover;
  background-position: center right;
  padding: 80px 0;
  margin-top: 140px;
}

/* ── PC: 左側を白フェード（::before） ── */
.mokunuku-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ffffff 40%, transparent 75%);
  pointer-events: none;
}

/* ── テキストエリア（背景より前面） ── */
.mokunuku-text__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

/* ── 見出し ── */
.mokunuku-text__title {
  font-size: 2rem;
  /* 32px */
  font-weight: 700;
  color: var(--color-main);
  line-height: var(--line-height-tight);
  margin: 0 0 32px;
}

/* ── 本文 ── */
.mokunuku-text__body {
  font-size: 1rem;
  /* 16px */
  color: var(--color-text);
}

.mokunuku-text__body p {
  margin: 0 0 1em;
  line-height: 2;
}

.mokunuku-text__body p:last-child {
  margin-bottom: 0;
}


/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {

  .mokunuku-text {
    min-height: auto;
    padding: 40px 0;
    margin-top: 60px;
  }

  /* SP: 全体に薄い白オーバーレイ */
  .mokunuku-text::before {
    background: rgba(255, 255, 255, 0.75);
  }

  .mokunuku-text__inner {
    max-width: 100%;
    padding: 0 14px;
  }

  .mokunuku-text__title {
    font-size: 1.5rem;
    /* 24px */
    margin-bottom: 32px;
  }

  .mokunuku-text__body {
    font-size: 0.875rem;
    /* 14px */
  }
}


/* ============================================================
     21. Commitment Section
     ============================================================ */

/* ── セクション全体 ── */
.commitment {
  background-color: #ffffff;
  padding-top: 140px;
}

/* ── インナー ── */
.commitment__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

/* ── セクションヘッダー ── */
.commitment__header {
  text-align: center;
  margin-bottom: 68px;
}

.commitment__label {
  font-size: 0.8125rem;
  /* 13px */
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.commitment__title {
  font-size: 2.25rem;
  /* 36px */
  font-weight: 700;
  color: var(--color-main);
  line-height: var(--line-height-tight);
  margin: 0 0 24px;
}

/* PC では改行を非表示 */
.commitment__title-br {
  display: none;
}

.commitment__sub-copy {
  font-size: 1rem;
  /* 16px */
  color: var(--color-text);
  line-height: var(--line-height-base);
}

.commitment__sub-copy p {
  margin: 0 0 0.5em;
}

.commitment__sub-copy p:last-child {
  margin-bottom: 0;
}

/* ── カード共通 ── */
.commitment__card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 80px;
}

.commitment__card:last-child {
  margin-bottom: 0;
}

/* 偶数カード: テキスト左・画像右 */
.commitment__card--reverse {
  flex-direction: row-reverse;
}

/* ── 画像エリア ── */
.commitment__card-image {
  flex: 0 0 50%;
  overflow: hidden;
}

.commitment__card-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* ── テキストエリア ── */
.commitment__card-body {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding: 40px 60px; */
}

/* ── 英語ラベル ── */
.commitment__card-label {
  font-size: 0.75rem;
  /* 12px */
  color: var(--color-main);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* ── カードタイトル ── */
.commitment__card-title {
  font-size: 1.625rem;
  /* 26px */
  font-weight: 700;
  color: var(--color-sub-1);
  line-height: var(--line-height-tight);
  margin: 0 0 24px;
}

/* ── カード本文 ── */
.commitment__card-text {
  font-size: 0.9375rem;
  /* 15px */
  color: var(--color-text);
  line-height: 1.9;
  margin-bottom: 24px;
}

.commitment__card-text p {
  margin: 0 0 0.75em;
}

.commitment__card-text p:last-child {
  margin-bottom: 0;
}

/* ── リスト ── */
.commitment__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.commitment__list li {
  font-size: 0.875rem;
  /* 14px */
  color: var(--color-sub-1);
  padding-left: 1.25em;
  position: relative;
  margin-bottom: 4px;
  font-weight: 500;
}

.commitment__list li:last-child {
  margin-bottom: 0;
}

.commitment__list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--color-main);
}


/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {

  .commitment__title-br {
    display: inline;
  }

  .commitment {
    padding-top: 60px;
  }

  .commitment__inner {
    padding-inline: var(--container-px-sp);
  }

  .commitment__header {
    margin-bottom: 48px;
  }

  .commitment__label {
    font-size: 0.75rem;
    /* 12px */
  }

  .commitment__title {
    font-size: 1.625rem;
    /* 26px */
  }

  .commitment__sub-copy {
    font-size: 0.875rem;
    /* 14px */
  }

  /* SP: 縦並び（画像上・テキスト下） */
  .commitment__card,
  .commitment__card--reverse {
    flex-direction: column;
    margin-bottom: 0;
  }

  .commitment__card-image {
    flex: none;
    width: 100%;
  }

  .commitment__card-image img {
    height: 260px;
  }

  .commitment__card-body {
    flex: none;
    width: 100%;
    padding: 16px 0 32px;
  }

  .commitment__card-title {
    font-size: 1.25rem;
    /* 20px */
    margin: 0 0 12px;
  }

  .commitment__card-text {
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 18px;
  }

  .commitment__list li {
    font-size: 0.8125rem;
    /* 13px */
  }
}


/* ============================================================
     22. Company Info Section
     ============================================================ */

/* ── セクション全体 ── */
.company-info {
  background-color: #ffffff;
  padding-top: 140px;
}

/* ── インナー ── */
.company-info__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

/* ── セクションヘッダー ── */
.company-info__header {
  text-align: center;
  margin-bottom: 60px;
}

.company-info__label {
  font-size: 0.8125rem;
  /* 13px */
  color: var(--color-accent-2);
  letter-spacing: 0.1em;
  margin: 0 0 12px;
}

/* ── 見出し共通 ── */
.company-info__title {
  font-size: 2.25rem;
  /* 36px */
  font-weight: 700;
  color: var(--color-main);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* PC: pc用スパンを表示・sp用スパンを非表示 */
.company-info__title--pc {
  display: block;
}

.company-info__title--sp {
  display: none;
}

/* ── テーブル ── */
.company-info__table {
  width: 100%;
}

/* ── 各行 ── */
.company-info__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-block: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.company-info__row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* ── ラベル ── */
.company-info__term {
  flex: 0 0 20%;
  font-size: 0.9375rem;
  /* 15px */
  font-weight: 700;
  color: var(--color-sub-1);
  line-height: 1.8;
}

/* ── 内容 ── */
.company-info__desc {
  flex: 1;
  font-size: 0.9375rem;
  /* 15px */
  color: var(--color-text);
  margin: 0;
  font-weight: 500;
}

.company-info__desc a {
  color: var(--color-text);
  text-decoration: none;
}

.company-info__desc a:hover {
  color: var(--color-main);
  text-decoration: underline;
}


/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {

  .company-info {
    padding-top: 60px;
  }

  .company-info__inner {
    padding-inline: var(--container-px-sp);
  }

  .company-info__header {
    margin-bottom: 32px;
  }

  .company-info__label {
    font-size: 0.75rem;
    /* 12px */
  }

  /* SP: sp用スパンを表示・pc用スパンを非表示 */
  .company-info__title--pc {
    display: none;
  }

  .company-info__title--sp {
    display: block;
    font-size: 1.5rem;
    /* 26px */
  }

  .company-info__row {
    gap: 12px;
    padding-block: 20px;
  }

  .company-info__term {
    font-size: var(--font-size-sm);
  }

  .company-info__desc {
    font-size: var(--font-size-sm);
  }
}


/* ============================================================
     23. Contact Form Section
     ============================================================ */

/* ── セクション全体 ── */
.contact-form-section {
  background-color: #ffffff;
}

.contact-form-section__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

/* ── セクションヘッダー ── */
.contact-form-section__header {
  text-align: center;
  margin-bottom: 48px;
}

.contact-form-section__label {
  font-size: 0.8125rem;
  /* 13px */
  color: var(--color-accent-2);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}

.contact-form-section__title {
  font-size: 2.25rem;
  /* 36px */
  font-weight: 700;
  color: var(--color-main);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* ============================================================
     CF7 フォーム構造
     ============================================================ */

/* ── 各フォーム行 ── */
.cf7-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.cf7-row:last-of-type {
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

/* ── ラベルエリア ── */
.cf7-row__label {
  flex: 0 0 240px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cf7-row__label-text {
  font-size: 0.9375rem;
  /* 15px */
  color: var(--color-text);
  font-weight: 500;
}

/* ── 入力エリア ── */
.cf7-row__field {
  flex: 1;
}

/* ── 必須・任意バッジ ── */
.cf7-badge {
  display: inline-block;
  font-size: 0.6875rem;
  /* 11px */
  font-weight: 700;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.6;
}

.cf7-badge--required {
  background-color: #E8637A;
}

.cf7-badge--optional {
  background-color: #888888;
}

/* ── テキスト・tel・email 入力フィールド ── */
.wpcf7-form .cf7-row__field input[type="text"],
.wpcf7-form .cf7-row__field input[type="tel"],
.wpcf7-form .cf7-row__field input[type="email"] {
  width: 100%;
  height: 52px;
  background-color: #F7F7F7;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 1rem;
  color: var(--color-text);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--transition);
  box-sizing: border-box;
}

.wpcf7-form .cf7-row__field input[type="text"]:focus,
.wpcf7-form .cf7-row__field input[type="tel"]:focus,
.wpcf7-form .cf7-row__field input[type="email"]:focus {
  border-color: var(--color-main);
  background-color: #ffffff;
}

/* ── テキストエリア ── */
.wpcf7-form .cf7-row__field textarea {
  width: 100%;
  height: 200px;
  background-color: #F7F7F7;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--color-text);
  font-family: var(--font-sans);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition);
  box-sizing: border-box;
  line-height: var(--line-height-base);
}

.wpcf7-form .cf7-row__field textarea:focus {
  border-color: var(--color-main);
  background-color: #ffffff;
}

/* ── バリデーションエラー ── */
.wpcf7-not-valid-tip {
  display: block;
  font-size: 0.75rem;
  color: #E8637A;
  margin-top: 6px;
}

.wpcf7-form .cf7-row__field .wpcf7-not-valid {
  border-color: #E8637A !important;
}

/* ── プライバシーポリシーテキスト ── */
.cf7-privacy {
  padding-block: 40px;
  text-align: center;
}

.cf7-privacy p {
  font-size: 0.875rem;
  /* 14px */
  color: var(--color-text);
  line-height: 2.0;
  margin: 0;
}

.cf7-privacy a {
  color: var(--color-text);
  text-decoration: underline;
}

.cf7-privacy a:hover {
  color: var(--color-main);
}

/* ── 送信ボタンエリア ── */

.cf7-submit {
  width: 100%;
  text-align: center;
}

.cf7-btn {
  text-align: center;
}

.wpcf7-form .cf7-btn {
  width: 280px;
  height: 56px;
  background-color: var(--color-main);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-sans);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition:
    background-color var(--transition),
    box-shadow var(--transition);
}

.wpcf7-form .cf7-btn:hover {
  background-color: #d9708a;
  /* ピンクを約10%暗く */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.70);
}

.wpcf7-spinner {
  display: none;
}

/* ── CF7 送信完了・エラーメッセージ ── */
.wpcf7-response-output {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 4px;
  font-size: 0.875rem;
  text-align: center;
  border: none !important;
}

.wpcf7-mail-sent-ok {
  background-color: #f0faf0;
  color: #2e7d32;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background-color: #fff0f0;
  color: #c62828;
}


/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {

  .contact-form-section__inner {
    padding-inline: var(--container-px-sp);
  }

  .contact-form-section__title {
    font-size: 1.625rem;
    /* 26px */
  }

  /* SP: 縦並び（ラベル上・入力下） */
  .cf7-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-block: 20px;
  }

  .cf7-row__label {
    flex: none;
    width: 100%;
  }

  .cf7-row__field {
    width: 100%;
  }

  /* 送信ボタン SP: 全幅 */
  .wpcf7-form .cf7-btn input[type="submit"] {
    width: 100%;
  }

  .cf7-privacy {
    text-align: left;
    padding-block: 32px;
  }

  .cf7-privacy p {
    font-size: 0.8125rem;
    /* 13px */
  }
}


/* ============================================================
     24. Privacy Policy Section
     ============================================================ */

/* ── セクション全体 ── */
.policy {
  background-color: #ffffff;
}

/* ── インナー ── */
.policy__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

/* ── 大見出し ── */
.policy__heading {
  font-size: 1.25rem;
  /* 20px */
  font-weight: 700;
  color: var(--color-sub-1);
  line-height: var(--line-height-tight);
  margin: 30px 0 12px;
}

.policy__heading:first-child {
  margin-top: 0;
}

/* ── 本文テキスト ── */
.policy__text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0 0 16px;
}

.policy__text:last-of-type {
  margin-bottom: 0;
}

/* ── リスト ── */
.policy__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.policy__list li {
  font-size: var(--font-size-base);
  /* 15px */
  color: var(--color-text);
  padding-left: 1.25em;
  position: relative;
  margin-bottom: 4px;
  font-weight: 500;
}

.policy__list li:last-child {
  margin-bottom: 0;
}

.policy__list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--color-text);
}

/* ── リンク ── */
.policy__inner a {
  color: var(--color-main);
  text-decoration: underline;
}

.policy__inner a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ── お問い合わせ先エリア ── */
.policy__contact {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.policy__contact span {
  display: block;
  font-size: 0.9375rem;
  /* 15px */
  color: var(--color-text);
  font-weight: 500;
}

.policy__contact a {
  color: var(--color-text);
  text-decoration: none;
}

.policy__contact a:hover {
  color: var(--color-main);
  opacity: 1;
}


/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {

  .policy {
    padding-block: 60px;
  }

  .policy__inner {
    padding-inline: var(--container-px-sp);
  }

  .policy__heading {
    font-size: 1.0625rem;
    /* 17px */
    margin-top: 40px;
  }

  .policy__text {
    font-size: 0.875rem;
    /* 14px */
  }

  .policy__list li {
    font-size: 0.875rem;
    /* 14px */
  }

  .policy__contact span {
    font-size: 0.875rem;
    /* 14px */
  }
}


/* ============================================================
     25. Partner Page
     ============================================================ */

/* ── アンカーナビゲーション ── */
.partner-nav {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
}

.partner-nav__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 30px;
}

.partner-nav__item {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  background-color: #F4E4E4;
  border-radius: 4px;
}

.partner-nav__item:last-child {
  border-right: none;
}

.partner-nav__link {
  display: block;
  text-align: center;
  padding-block: 16px;
  font-size: var(--font-size-base);
  color: var(--color-sub-1);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition);
}

.partner-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.10);
  color: var(--color-accent-2);
  text-decoration: none;
}

/* ── パートナーセクション共通 ── */
.partner-section {
  padding-block: 70px;
  scroll-margin-top: 100px;
  /* ヘッダー+ナビ分のオフセット */
}

/* ── インナー ── */
.partner-section__inner {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--container-px-pc);
  background-color: #FFFBFB;
  border: 1px solid var(--color-accent-1);
  padding: 48px 60px;
}

/* ── セクションヘッダー ── */
.partner-section__header {
  text-align: center;
  margin-bottom: 40px;
}

.partner-section__label {
  font-size: 0.8125rem;
  /* 13px */
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.partner-section__title {
  font-size: 1.75rem;
  /* 28px */
  font-weight: 700;
  color: var(--color-main);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* ── チラシ画像エリア ── */
.partner-section__flyer {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.partner-flyer {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.partner-flyer:hover {
  opacity: 0.85;
}

/* ── お問い合わせボタン ── */
.partner-section__btn-wrap {
  text-align: center;
  margin-top: 40px;
}

.partner-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 52px;
  background-color: var(--color-main);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color var(--transition);
  letter-spacing: 0.05em;
}

.partner-section__btn:hover {
  background-color: #d9708a;
  color: #ffffff;
  text-decoration: none;
}

/* ── 画像拡大モーダル ── */
.partner-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.partner-modal.is-open {
  display: flex;
}

.partner-modal__content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
}

.partner-modal__image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.partner-modal__close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 2.25rem;
  /* 36px */
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: opacity var(--transition);
}

.partner-modal__close:hover {
  opacity: 0.7;
}


/* ── Responsive: SP（〜599px） ── */
@media (max-width: 599px) {

  /* ナビ: 2列 × 2行 */
  .partner-nav__list {
    flex-wrap: wrap;
    gap: 10px;
  }

  .partner-nav__item {
    flex: 0 0 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* 右下・左下の罫線調整 */
  .partner-nav__item:nth-child(2n) {
    border-right: none;
  }

  .partner-nav__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .partner-nav__link {
    font-size: 0.8125rem;
    /* 13px */
    padding-block: 14px;
  }

  .partner-section {
    padding-block: 30px;
    scroll-margin-top: 120px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .partner-section__inner {
    padding-inline: var(--container-px-sp);
  }

  .partner-section__title {
    font-size: 1.375rem;
    /* 22px */
  }

  .partner-section__btn {
    width: 100%;
  }
}

/* ================================
     News & Topics
  ================================ */
.news-topics {
  padding: 60px 20px 80px;
  background-color: var(--color-bg);
}

.news-topics__inner {
  max-width: 900px;
  margin: 0 auto;
}

.news-topics__heading {
  text-align: center;
  margin-bottom: 48px;
}

.news-topics__sub-copy {
  font-size: 13px;
  color: var(--color-accent-2);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.news-topics__title {
  font-size: 32px;
  color: var(--color-accent-1);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.news-topics__item {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  color: inherit;
}

.news-topics__item:first-of-type {
  border-top: 1px solid #ddd;
}

.news-topics__date {
  display: block;
  font-size: 13px;
  color: #666666;
  margin-bottom: 6px;
  font-weight: 500;
}

.news-topics__item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-sub-1);
  line-height: 1.6;
}

.news-topics__item {
  transition: opacity 0.4s ease;
}

.news-topics__item:hover {
  opacity: 0.6;
}

.news-topics__item:hover .news-topics__item-title {
  color: var(--color-accent);
}

.news-topics__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.news-topics__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid transparent;
}

.news-topics__pagination .page-numbers.current {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.news-topics__pagination .page-numbers:hover:not(.current) {
  border-color: #ddd;
}

@media (min-width: 768px) {
  .news-topics {
    padding: 80px 40px 100px;
  }

  .news-topics__title {
    font-size: 42px;
  }

  .news-topics__item {
    display: flex;
    align-items: baseline;
    gap: 32px;
    padding: 24px 0;
  }

  .news-topics__date {
    flex-shrink: 0;
    width: 160px;
    margin-bottom: 0;
    font-size: 14px;
  }
}


/* ============================================================
     Property Archive（再生住宅一覧）
     ============================================================ */

/* --- レイアウト --- */
.property-archive {
  background-color: var(--color-bg);
  padding: 60px 0 80px;
}

.property-archive__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 40px;
}

@media (min-width: 1024px) {
  .property-archive__inner {
    flex-direction: row;
    align-items: flex-start;
  }
}

.property-archive__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- 件数表示 --- */
.property-archive__count {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 8px;
}

.property-archive__count strong {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-dark);
}

/* --- ページネーション --- */
.property-archive__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.property-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.property-archive__pagination .page-numbers.current {
  background-color: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
}

.property-archive__pagination a.page-numbers:hover {
  background-color: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
}

.property-archive__pagination .page-numbers.dots {
  border-color: transparent;
  pointer-events: none;
  color: var(--color-text-muted);
}

.property-archive__pagination .prev.page-numbers,
.property-archive__pagination .next.page-numbers {
  background-color: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-sub-1);
  font-size: 0.75rem;
}

.property-archive__pagination .prev.page-numbers:hover,
.property-archive__pagination .next.page-numbers:hover {
  background-color: var(--color-sub-1);
  border-color: var(--color-sub-1);
  color: #fff;
}

@media (max-width: 768px) {
  .property-archive__pagination {
    gap: var(--space-1);
  }

  .property-archive__pagination .page-numbers {
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
  }
}

/* ============================================================
     Property Card（物件カード）
     ============================================================ */

.property-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  padding: 24px;
  margin-bottom: 32px;
}

/* --- カードヘッダー --- */
.property-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}

.property-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-1);
  margin: 0;
}

.property-card__price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.property-card__price-label {
  font-size: 0.875rem;
  color: #888;
  font-weight: 500;
}

.property-card__price {
  font-size: 1.75rem;
  font-weight: 700;
  color: #DA4949;
}

/* --- 画像＋SPブロック --- */
.property-card__media-block {
  display: block;
}

/* --- 画像グリッド（PC：2カラム） --- */
.property-card__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.property-card__image-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.property-card__image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 1rem;
}

/* --- SP専用テキスト情報（PCでは非表示） --- */
.property-card__sp-info {
  display: none;
}

/* --- PC専用：物件情報テーブル --- */
.property-card__info {
  margin-bottom: 20px;
  margin-top: 24px;
}

.property-card__info-grid {
  display: block;
  margin: 0;
  padding: 0;
}

.property-card__info-row {
  display: grid;
  grid-template-columns: 120px 1fr 120px 1fr;
  gap: 8px 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e8e8e8;
  align-items: baseline;
}

.property-card__info-row:first-child {
  border-top: 1px solid #e8e8e8;
}

.property-card__info-row dt {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-dark);
}

.property-card__info-row dd {
  font-size: 0.875rem;
  color: var(--color-text);
  margin: 0;
  font-weight: 500;
}

/* --- ボタンエリア --- */
.property-card__buttons {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.property-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 40px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
}

.property-card__btn--outline {
  border: 1px solid var(--color-accent-1);
  color: var(--color-accent-1);
  background: var(--color-bg);

}

.property-card__btn--fill {
  background: var(--color-accent-1);
  color: #fff;
  border: 1px solid var(--color-accent-1);
}

.property-card__btn--fill:hover {
  background-color: var(--color-bg);
  color: var(--color-accent-1);
}

.property-card__btn--outline:hover {
  background-color: var(--color-accent-1);
  color: var(--color-bg);
}

/* ============================================================
     Property Search（検索フォーム枠組み）
     ============================================================ */
.property-search {
  width: 100%;
  flex-shrink: 0;
  border: 4px solid #DADADA;
  padding: 24px;
}

@media (min-width: 1024px) {
  .property-search {
    width: 300px;
    position: sticky;
    top: 100px;
  }
}

.property-search__inner {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

.property-search__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 20px;
}

.property-search__form {
  min-height: 40px;
}

/* ============================================================
     Property Card - SP対応（〜768px）
     ============================================================ */
@media (max-width: 768px) {

  .property-archive__inner,
  .property-single {
    padding: 0 14px;
  }

  .property-archive {
    padding: 40px 0 60px;
  }

  .property-card {
    padding: 16px;
    margin-bottom: 20px;
  }

  /* ヘッダー：タイトルのみ1行（価格はSP情報エリアで表示） */
  .property-card__header {
    display: block;
    margin-bottom: 12px;
  }

  .property-card__price-wrap {
    display: none;
  }

  .property-card__title {
    font-size: 1.25rem;
  }

  /* 画像＋SP情報を横並びにする */
  .property-card__media-block {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  /* 画像：1カラム・外観のみ */
  .property-card__images {
    grid-template-columns: 1fr;
    width: 45%;
    flex-shrink: 0;
  }

  .property-card__image-item img {
    height: 160px;
  }

  .property-card__image-placeholder {
    height: 160px;
  }

  /* 間取り画像は非表示 */
  .property-card__image-item--floor {
    display: none;
  }

  /* SP専用テキスト情報を表示 */
  .property-card__sp-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }

  .property-card__sp-address {
    font-size: 0.8rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
  }

  .property-card__sp-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
  }

  .property-card__sp-price-label {
    font-size: 0.75rem;
    color: #888;
  }

  .property-card__sp-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent);
  }

  .property-card__sp-detail {
    display: block;
    margin: 4px 0 0;
    padding: 0;
  }

  .property-card__sp-detail-row {
    display: flex;
    gap: 8px;
    margin-bottom: 2px;
  }

  .property-card__sp-detail-row dt {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-dark);
    flex-shrink: 0;
    width: 52px;
  }

  .property-card__sp-detail-row dd {
    font-size: 0.75rem;
    color: var(--color-text);
    margin: 0;
  }

  /* PC用テーブルはSPで非表示 */
  .property-card__info {
    display: none;
  }

  /* ボタン縦積み */
  .property-card__buttons {
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
  }

  .property-card__btn {
    flex: none;
    width: 100%;
    padding: 12px;
    font-size: 0.9rem;
  }
}

/* ========================================
     property-single（物件詳細ページ）
  ======================================== */

/* ベースレイアウト */
.property-single {
  margin-top: 60px;
}

.property-single__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* 物件名 */
.property-single__title {
  font-size: 24px;
  color: var(--color-main);
  margin-bottom: 24px;
  font-weight: 700;
  border-bottom: 1px solid #dadada;
  padding-bottom: 18px;
}

/* 2カラムコンテンツ */
.property-single__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}

/* ========================================
     スライダー
  ======================================== */

.property-single__slider {
  width: 100%;
}

.property-slider__main {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
}

.property-slider__main-track {
  display: flex;
}

.property-slider__main-item {
  min-width: 100%;
  display: none;
}

.property-slider__main-item.is-active {
  display: block;
}

.property-slider__main-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.property-slider__prev,
.property-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-main);
  z-index: 2;
  line-height: 1;
}

.property-slider__prev {
  left: 10px;
}

.property-slider__next {
  right: 10px;
}

.property-slider__thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.property-slider__thumb {
  flex: 0 0 calc(25% - 6px);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.property-slider__thumb.is-active,
.property-slider__thumb:hover {
  opacity: 1;
  outline: 2px solid var(--color-main);
  outline-offset: -2px;
}

.property-slider__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ========================================
     物件詳細エリア
  ======================================== */

.property-single__detail {
  width: 100%;
}

.property-detail__price-box {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

.property-detail__price-label {
  background: #fff;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  border-right: 1px solid #ddd;
  white-space: nowrap;
}

.property-detail__price-value {
  padding: 14px 24px;
  font-size: 24px;
  font-weight: 700;
  color: #DA4949;
  background: #fff;
  flex: 1;
}

.property-detail__table {
  width: 100%;
}

.property-detail__row--full {
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 0;
}

.property-detail__row--full .property-detail__label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-main);
  display: inline-block;
}

.property-detail__row--full .property-detail__value {
  font-size: 14px;
  color: var(--color-text);
  margin: 0;
  padding-top: 8px;
  font-weight: 500;
}

.property-detail__row-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.property-detail__row-group .property-detail__row {
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 0;
}

.property-detail__row-group .property-detail__label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-main);
  display: inline-block;
}

.property-detail__row-group .property-detail__value {
  font-size: 14px;
  color: #555;
  margin: 0;
  padding-top: 8px;
  font-weight: 500;
}

/* ========================================
     CTAエリア
  ======================================== */

.property-single__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 40px;
}

.property-cta__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  padding: 18px 24px;
  border: 2px solid var(--color-main);
  border-radius: 4px;
  color: var(--color-main);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  letter-spacing: 0.05em;
  max-height: 60px;
}

.property-cta__form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  padding: 18px 24px;
  background: var(--color-main);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  max-height: 60px;
}

/* ========================================
     PC レイアウト（768px以上）
  ======================================== */

@media (min-width: 768px) {

  /* .property-single {
      padding: 60px 0 100px;
    } */

  .property-single__title {
    font-size: 32px;
    margin-bottom: 32px;
  }

  .property-single__content {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }

  .property-single__slider {
    width: 57%;
    flex-shrink: 0;
  }

  .property-single__detail {
    width: 40%;
    flex-shrink: 0;
  }

  .property-detail__row-group {
    flex-direction: row;
    gap: 0;
  }

  .property-detail__row-group .property-detail__row {
    flex: 1;
    padding-right: 16px;
  }

  .property-detail__row-group .property-detail__row:last-child {
    padding-right: 0;
    padding-left: 16px;
    border-left: 1px solid #e0e0e0;
  }

  .property-single__cta {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    margin-bottom: 78px;
  }

  .property-cta__tel,
  .property-cta__form {
    max-width: 420px;
  }
}

/* ========================================
     物件説明文
  ======================================== */

.property-single__description {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 40px;
}

.property-single__description p {
  margin-bottom: 1em;
}

/* ========================================
     物件概要セクション
  ======================================== */

.property-overview {
  margin-bottom: 48px;
}

.property-overview__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  padding-left: 14px;
  border-left: 4px solid var(--color-main);
  margin-bottom: 16px;
  line-height: 1.4;
}

.property-overview__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 13px;
}

.property-overview__th {
  background: #f9f9f9;
  font-weight: 700;
  color: #333;
  padding: 12px 16px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.property-overview__td {
  background: #fff;
  color: #555;
  padding: 12px 16px;
  border: 1px solid #ddd;
  vertical-align: middle;
  font-weight: 500;
}

/* SP用テーブル：デフォルト表示 */
.property-overview__table--sp {
  display: table;
}

.property-overview__table--sp .property-overview__th {
  width: 120px;
}

/* PC用テーブル：デフォルト非表示 */
.property-overview__table--pc {
  display: none;
}

@media (min-width: 768px) {

  .property-single__description {
    font-size: 15px;
    margin-bottom: 60px;
  }

  .property-overview__heading {
    font-size: 22px;
  }

  .property-overview__table--pc {
    display: table;
  }

  .property-overview__table--sp {
    display: none;
  }

  .property-overview__table--pc .property-overview__th {
    width: 150px;
  }
}

/* ========================================
     間取り＋地図 共通見出し
  ======================================== */

.property-section__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  padding-left: 14px;
  border-left: 4px solid var(--color-main);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ========================================
     間取り＋地図 外枠（2カラム）
  ======================================== */

.property-map-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ========================================
     間取りエリア
  ======================================== */

.property-floorplan {
  width: 100%;
}

.property-floorplan__image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #e0e0e0;
  overflow: hidden;
}

.property-floorplan__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.property-floorplan__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 15px;
  background: #e0e0e0;
}

/* ========================================
     地図エリア
  ======================================== */

.property-map {
  width: 100%;
}

.property-map__embed {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.property-map__embed iframe {
  width: 100% !important;
  height: 280px !important;
  border: none;
  display: block;
}

@media (min-width: 768px) {

  .property-section__heading {
    font-size: 22px;
  }

  .property-map-section {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .property-floorplan {
    flex: 1;
  }

  .property-map {
    flex: 1;
  }

  .property-map__embed iframe {
    height: 420px !important;
  }
}

/* ==============================================
     Single Post Page
     ============================================== */

/* ── single.php 専用: page-visual オーバーライド ── */
.single-page-visual {
  background: var(--color-bg-alt);
  height: auto;
  padding: var(--space-12) 0;
  margin-bottom: 0;
}

.single-page-visual .page-visual__inner {
  position: relative;
  z-index: 2;
  padding-left: 80px;
}

.single-page-visual .page-visual__en {
  font-size: 3.5rem;
  margin-bottom: var(--space-2);
}

.page-visual__title {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-medium);
  color: var(--color-main);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 599px) {
  .single-page-visual {
    padding: var(--space-8) 0;
  }

  .single-page-visual .page-visual__inner {
    padding-left: var(--container-px-sp);
  }

  .single-page-visual .page-visual__en {
    font-size: 2.5rem;
  }

  .page-visual__title {
    font-size: var(--font-size-2xl);
  }
}

/* ── single-main ── */
.single-main {
  background: var(--color-bg);
}

.single-main__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--container-px-sp);
}

@media (min-width: 768px) {
  .single-main__inner {
    padding: 0 var(--container-px-pc);
  }
}

/* ── breadcrumb ── */
.breadcrumb {
  margin-bottom: var(--space-8);
}

.breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb__item+.breadcrumb__item::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-border);
}

.breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumb__item a:hover {
  color: var(--color-main);
}

.breadcrumb__item--current {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* ── single-article header ── */
.single-article__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.single-article__category-badge {
  display: inline-block;
  padding: 2px var(--space-3);
  background: #FFF0F3;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.single-article__category-badge:hover {
  background: var(--color-main);
  color: #fff;
}

.single-article__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
}

@media (min-width: 768px) {
  .single-article__title {
    font-size: var(--font-size-3xl);
  }
}

.single-article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.single-article__date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.single-article__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ── single-content（ブロックエディタ本文） ── */
.single-content {
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.single-content h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
  border-left: 4px solid var(--color-main);
  padding-left: var(--space-4);
  margin: var(--space-12) 0 var(--space-6);
}

.single-content h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.single-content h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
  margin: var(--space-6) 0 var(--space-3);
}

.single-content p {
  margin: 0 0 var(--space-6);
}

.single-content ul,
.single-content ol {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-6);
}

.single-content li {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-base);
}

.single-content a {
  color: var(--color-main);
  text-decoration: underline;
  transition: opacity var(--transition);
}

.single-content a:hover {
  opacity: 0.75;
}

.single-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: var(--space-8) auto;
}

.single-content blockquote {
  border-left: 4px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

.single-content pre {
  background: var(--color-sub-1);
  color: #f8f8f2;
  padding: var(--space-6);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: var(--space-8) 0;
}

.single-content code {
  background: var(--color-bg-alt);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  color: var(--color-accent-2);
}

.single-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.single-content table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  margin: var(--space-8) 0;
  font-size: var(--font-size-sm);
}

.single-content th,
.single-content td {
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.single-content th {
  background: var(--color-bg-alt);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
}

/* ── 前後記事ナビゲーション ── */
.single-post-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin: var(--space-16) 0 var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.single-post-nav__prev,
.single-post-nav__next {
  flex: 1;
  font-size: var(--font-size-sm);
}

.single-post-nav__next {
  text-align: right;
}

.single-post-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-sub-1);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition);
  line-height: var(--line-height-base);
}

.single-post-nav a:hover {
  color: var(--color-main);
}

/* ── 一覧へ戻るボタン ── */
.single-article__back {
  text-align: center;
  margin-top: var(--space-12);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--color-sub-1);
  color: var(--color-sub-1);
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.btn-back:hover {
  background: var(--color-sub-1);
  color: #fff;
}

/* =============================================
     Property Search Filter
     ============================================= */

/* SP: アコーディオントグルボタン */
.property-search__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  background: var(--color-sub-2);
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
}

.property-search__toggle-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
}

.property-search__toggle-icon {
  color: var(--color-main);
  transition: transform var(--transition);
  font-size: var(--font-size-sm);
}

.property-search--open .property-search__toggle-icon {
  transform: rotate(180deg);
}

/* SP: ボディ部分（デフォルト非表示） */
.property-search__body {
  display: none;
  margin-top: var(--space-4);
}

/* SP: 開いた状態 */
.property-search--open .property-search__body {
  display: block;
}

/* PC: トグルボタン非表示・ボディ常時表示 */
@media (min-width: 768px) {
  .property-search__toggle {
    display: none;
  }

  .property-search__body {
    display: block !important;
    margin-top: 0;
  }
}

/* 検索条件タイトル（PC表示用） */
.property-search__title {
  display: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .property-search__title {
    display: block;
  }
}

/* フォーム全体 */
.search-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* 各フィールドグループ */
.search-filter__group {
  display: flex;
  flex-direction: column;
}

/* ラベルテキスト */
.search-filter__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-sub-1);
  margin-bottom: var(--space-2);
}

/* セレクトボックス ラッパー（矢印アイコン付与用） */
.search-filter__select-wrap {
  position: relative;
}

.search-filter__select-wrap::after {
  content: "\f078";
  /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-main);
  pointer-events: none;
  font-size: var(--font-size-sm);
}

/* セレクトボックス */
.search-filter__select {
  width: 100%;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.search-filter__select:focus {
  outline: none;
  border-color: var(--color-main);
}

/* チェックボックス グループ */
.search-filter__checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 築年: 2カラムグリッド */
.search-filter__checkboxes--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
}

/* チェックボックス ラベル */
.search-filter__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* チェックボックス 本体（カスタムスタイル） */
.search-filter__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg);
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}

.search-filter__checkbox:checked {
  background: var(--color-main);
  border-color: var(--color-main);
}

.search-filter__checkbox:checked::after {
  content: "\f00c";
  /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 10px;
}

/* チェックボックス テキスト */
.search-filter__checkbox-text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* 送信ボタン */
.search-filter__submit-wrap {
  margin-top: var(--space-2);
}

.search-filter__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  background: var(--color-main);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--transition);
}

.search-filter__submit:hover {
  opacity: 0.85;
}