/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Font Family - primitive */
  --font-family-base: 'Noto Sans', sans-serif;     /* 本文 */
  --font-family-heading: 'Zen Maru Gothic', sans-serif; /* 見出し */
  --font-family-en: 'Roboto', sans-serif;          /* 数字・英数字(価格・面積など) */
  --font-family-serif: 'Noto Serif JP', serif;     /* 代表者名など、明朝体で権威性を出したい箇所 */

  /* Color - primitive */
  --color-pink: #E63278;
  --color-pink-light: #FAC6DA;
  --color-blue: #254577;
  --color-blue-light: #D3DAE4;
  --color-text: #1F1F1F;
  --color-cream: #F3F1ED;
  --color-bg-cream: rgba(243, 241, 237, 0.5); /* #F3F1ED 50%透明 */
  --color-pink-05: rgba(230, 50, 120, 0.05); /* var(--color-pink) 5%。box-shadow等と同じ理由でrgba()直書き */

  /* Color - semantic(賃貸・売買・修繕事例ページのテーマカラー切り替え用。値の実体はprimitiveを参照する) */
  --theme-color: var(--color-pink);
  --theme-color-light: var(--color-pink-light);
  --theme-shadow-color: rgba(230, 50, 120, 0.2); /* var(--color-pink) 20%。box-shadowはrgba()にcustom propertyの色を直接渡せないため、c-btn--outline-pink等と同じ考え方で色ごとに用意する */

  /* Font Size - primitive (375px→1440px でclamp) */
  --font-size-1: 14px;
  --font-size-2: 16px;
  --font-size-3: 18px;
  --font-size-4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17px→20px */
  --font-size-5: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);   /* 20px→24px */
  --font-size-6: clamp(1.5rem, 1.3rem + 1vw, 2rem);         /* 24px→32px */
  --font-size-7: clamp(2rem, 1.6rem + 2vw, 3rem);           /* 32px→48px */

  /* Line Height - 単位なし */
  --leading-none: 1;       /* 見出し(h1〜h4) */
  --leading-normal: 1.5;   /* 本文・bodyの基準 */
  --leading-relaxed: 1.7;  /* 長文記事など */
  --leading-loose: 2;      /* 演出テキスト・導入文など */

  /* Spacing - primitive (375px→1440px でclamp) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);    /* 20px→24px */
  --space-4: clamp(1.5rem, 1.3rem + 1vw, 2rem);          /* 24px→32px */
  --space-5: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);    /* 28px→40px */
  --space-6: clamp(2.5rem, 1.9rem + 3vw, 3.75rem);       /* 40px→60px */
  --space-7: clamp(3rem, 2.1rem + 4.5vw, 5rem);          /* 48px→80px */
  --space-8: clamp(3.5rem, 2.4rem + 5.5vw, 6.25rem);     /* 56px→100px */

  /* Border Radius - 固定px */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Max Width */
  --content-max-width: 1100px;
  --content-padding: 20px;
  --text-max-width-750: 750px; /* 用途未定。design-data到着後に用途コメント・リネームを検討 */
  --text-max-width-800: 800px; /* 用途未定。design-data到着後に用途コメント・リネームを検討 */

  /* Header */
  --header-height: clamp(4.5rem, 3.55rem + 4.04vw, 7.1875rem); /* 72px→115px */

  /* Footer */
  --footer-wave-overlap: clamp(4.06rem, 2.26rem + 7.21vw, 8.75rem); /* 65px→140px。.l-footer__waveのtop(符号違いの同じ値)と対。各ページ最後のセクションのpadding-bottomに加算し、波のせり上がり分を吸収する */

  /* Z-index */
  --z-header: 20;
  --z-drawer: 25;
}

/* 賃貸=ピンク(:rootの初期値のまま) / 売買・修繕事例=青。bodyに付与し、下層ページの見出し背景・カテゴリーボタン等の色を切り替える */
.theme-sale,
.theme-repair {
  --theme-color: var(--color-blue);
  --theme-color-light: var(--color-blue-light);
  --theme-shadow-color: rgba(37, 69, 119, 0.2); /* var(--color-blue) 20% */
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

body {
  background-color: #fff;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-2);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  overflow-x: hidden; /* 全幅ビード要素による横スクロール発生を防止 */
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

dl, dd {
  margin: 0;
}

/* ==========================================================================
   Base Typography (semantic mapping)
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-family-heading);
}

h1 {
  font-size: var(--font-size-7);
  line-height: var(--leading-none);
}

h2 {
  font-size: var(--font-size-6);
  line-height: var(--leading-none);
}

h3 {
  font-size: var(--font-size-5);
  line-height: var(--leading-none);
}

h4 {
  font-size: var(--font-size-4);
  line-height: var(--leading-none);
}

/* ==========================================================================
   Layout: Container
   ========================================================================== */
.l-container {
  width: 100%; /* flexの親(例: .c-page-kv)内に置かれた際、auto marginでstretchが無効化されコンテンツ幅に縮むのを防ぐ */
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

/* ==========================================================================
   Layout: Header
   ========================================================================== */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: #fff;
  height: var(--header-height);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: clamp(1.25rem, 0.59rem + 2.82vw, 3.125rem); /* headerは1100px固定にせず、左右余白20px→50pxで全幅表示 */
}

.l-header__logo img {
  width: clamp(12.5rem, 10.74rem + 7.51vw, 17.5rem); /* 200px→280px */
  max-width: 100%;
  height: auto;
}

.l-header__utility-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-2);
  font-weight: bold;
}

.l-header__utility-list a {
  position: relative;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.l-header__utility-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: var(--color-pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.l-header__utility-list a:hover {
  color: var(--color-pink);
}

.l-header__utility-list a:hover::after {
  transform: scaleX(1);
}

.l-header__utility-list > li:hover > a,
.l-header__utility-list > li:focus-within > a {
  color: var(--color-pink); /* ドロップダウン表示中は親リンクの色・下線を維持する */
}

.l-header__utility-list > li:hover > a::after,
.l-header__utility-list > li:focus-within > a::after {
  transform: scaleX(1);
}

.l-header__utility-list > li {
  position: relative;
  padding-bottom: var(--space-1); /* ホバー時の下線が隠れないよう、liの当たり判定内に隙間を確保する */
}

.l-header__utility-submenu {
  position: absolute;
  top: 100%; /* liとの間に隙間を作らず、ホバー判定が途切れないようにする */
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: max-content;
  padding: var(--space-3) var(--space-4);
  background-color: #FDEEF3; /* .p-company__tag--infoと同じ薄いピンク */
  border-radius: 20px; /* 使用箇所が少ないため個別指定 */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px); /* タイトルの中央に合わせて表示 */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.l-header__utility-list > li:hover .l-header__utility-submenu,
.l-header__utility-list > li:focus-within .l-header__utility-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.l-header__utility-submenu a {
  display: inline-flex;
  align-items: center;
  gap: 11px; /* .l-header__menu-titleと同じ余白 */
  white-space: nowrap;
}

.l-header__utility-submenu a::after {
  content: none; /* ドロップダウン内は下線を出さず、文字色の変化のみにする */
}

.l-header__hamburger {
  --size: clamp(2.5rem, 2.16rem + 1.45vw, 3.25rem); /* 40px→52px。ハンバーガー表示範囲(375〜1200px)でヘッダー高さの縮小に比例するよう算出 */
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
  cursor: pointer;
  flex-shrink: 0;
}

.l-header__hamburger-icon {
  position: relative;
  width: calc(var(--size) * 0.5);
  height: calc(var(--size) * 0.05);
  background-color: #fff;
  border-radius: var(--radius-full);
  transition: opacity 0.3s ease;
}

.l-header__hamburger-icon::before,
.l-header__hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: var(--radius-full);
  transition: transform 0.3s ease;
}

.l-header__hamburger-icon::before {
  transform: translateY(calc(-50% - var(--size) * 0.19));
}

.l-header__hamburger-icon::after {
  transform: translateY(calc(-50% + var(--size) * 0.19));
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-icon {
  opacity: 0;
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-icon::before {
  transform: translateY(-50%) rotate(45deg);
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

.l-header__menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6); /* 60px。白カード内側の余白と揃える */
  background-color: var(--color-pink);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.l-header__menu.is-open {
  opacity: 1;
  visibility: visible;
}

.l-header__menu-card {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: auto;
  overflow: hidden;
  background-color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-6); /* 60px */
}

.l-header__menu-close {
  --size: clamp(2.5rem, 2.16rem + 1.45vw, 3.25rem); /* 40px→52px。ハンバーガーボタンと統一 */
  position: absolute;
  top: var(--space-2); /* カード内側の余白(--space-6)は無視し、モバイルでロゴと被らないよう角に寄せる */
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-pink-light);
  cursor: pointer;
  flex-shrink: 0;
}

.l-header__menu-close-icon {
  position: relative;
  width: calc(var(--size) * 0.5);
  height: calc(var(--size) * 0.24);
}

.l-header__menu-close-icon::before,
.l-header__menu-close-icon::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: calc(var(--size) * 0.05);
  background-color: var(--color-pink);
  border-radius: var(--radius-full);
}

.l-header__menu-close-icon::before {
  transform: translateY(-50%) rotate(45deg);
}

.l-header__menu-close-icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

.l-header__menu-logo img {
  width: clamp(12.5rem, 10.74rem + 7.51vw, 17.5rem); /* 200px→280px。ヘッダーロゴと同じ算出式 */
  max-width: 100%;
  height: auto;
}

.l-header__menu-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8); /* 56px→100px */
}

.l-header__menu-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.l-header__menu-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: var(--font-size-3);
  font-weight: bold;
  color: var(--color-text);
  text-decoration: none;
}

.l-header__menu-bullet {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
}

.l-header__menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-left: 42px;
}

.l-header__menu-list a {
  font-size: var(--font-size-2);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

a.l-header__menu-title:hover,
.l-header__menu-list a:hover {
  color: var(--color-pink);
}

.l-header__menu-banner {
  position: relative;
  z-index: 1; /* 絶対配置のイラストより手前に表示する */
  max-width: min(380px, 50%); /* 右下のイラストと重ならないよう幅を抑える */
  margin-top: var(--space-5); /* 28px→40px */
}

.l-header__menu-banner img {
  width: 100%;
  height: auto;
}

.l-header__menu-illust {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(350px, 40%);
  aspect-ratio: 603 / 394;
  background-image: url('../images/header_illust.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  pointer-events: none;
}

@media (max-width: 576px) {
  .l-header__menu {
    padding: 40px; /* スマホではピンク⇔白の間隔を狭く。白背景内側の余白と揃える */
  }

  .l-header__menu-card {
    padding: 40px; /* 白背景内側の余白を狭く */
  }

  .l-header__menu-nav {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .l-header__menu-close {
    top: 8px;
    right: 8px;
  }

  .l-header__menu-banner {
    max-width: 100%; /* イラストと被ってもよいのでカード幅いっぱいに広げる */
  }

  .l-header__menu-illust {
    width: min(350px, 46%);
    transform: translateY(-90%); /* バナーの上あたりに乗り上げる位置まで引き上げる */
  }
}

@media (max-width: 480px) {
  .l-header__menu-list {
    padding-left: 28px;
  }

  .l-header__menu {
    padding: 40px 32px;
  }

  .l-header__menu-card {
    padding: 40px 32px;
  }
}

@media (max-width: 1200px) {
  .l-header__utility-list {
    display: none;
  }

  .l-header__hamburger {
    display: inline-flex;
  }
}

body.is-nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Layout: Footer
   ========================================================================== */
.l-footer {
  position: relative;
  background-color: var(--color-blue);
  color: #fff;
}

.l-footer__wave {
  position: absolute;
  top: clamp(-8.75rem, -2.26rem - 7.21vw, -4.06rem); /* 400px:-65px 1440px:-140px */
  left: 0;
  display: block;
  width: 100%;
  height: clamp(4.375rem, 2.45rem + 7.69vw, 9.375rem); /* 400px:70px 1440px:150px */
}

.l-footer__wave path {
  fill: var(--color-blue);
}

.l-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 40px;
}

.l-footer__logo img {
  width: 100%;
  max-width: 240px;
  height: auto;
}

.l-footer__nav {
  display: flex;
  gap: 40px;
}

.l-footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.l-footer__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-footer__title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: bold;
  font-size: var(--font-size-2);
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
}

a.l-footer__title {
  transition: opacity 0.2s ease;
}

a.l-footer__title:hover {
  opacity: 0.7;
}

.l-footer__bullet {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
}

.l-footer__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 37px;
}

.l-footer__list a {
  font-weight: 500;
  font-size: var(--font-size-1);
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.l-footer__list a:hover {
  opacity: 0.7;
}

.l-footer__bottom {
  padding-bottom: 24px;
  text-align: center;
}

.l-footer__homemate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: #fff;
  font-weight: normal;
  font-size: var(--font-size-1);
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  text-decoration: none;
}

.l-footer__homemate:hover .l-footer__homemate-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.l-footer__external-icon {
  width: 16px;
  height: 16px;
}

.l-footer__copyright {
  margin-top: 40px;
  font-weight: normal;
  font-size: 12px;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

@media (max-width: 1200px) {
  .l-footer__top {
    justify-content: space-around;
  }
}

@media (max-width: 480px) {
  .l-footer__nav {
    gap: 16px;
  }

  .l-footer__list {
    padding-left: 24px;
  }
}
/* ==========================================================================
   Component: Heading
   ========================================================================== */
.c-heading-md {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-6);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: var(--leading-normal);
  color: var(--color-pink);
}

/* ==========================================================================
   Component: Numbered Heading(番号+サブタイトルの組み合わせ)
   ========================================================================== */
.c-numbered-heading__number {
  font-family: var(--font-family-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-pink);
}

.c-numbered-heading__subtitle {
  margin-top: var(--space-1); /* 8px */
  font-family: var(--font-family-heading);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-pink);
}

/* ==========================================================================
   Component: Heading Dots(見出し下のドット装飾)
   ========================================================================== */
.c-heading-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.c-heading-dots__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
}

@media (max-width: 576px) {
  .c-heading-dots {
    margin-top: 10px;
  }

  .c-heading-dots__dot {
    width: 8px;
    height: 8px;
  }
}

/* ==========================================================================
   Component: Button
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-2);
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.c-btn:hover {
  opacity: 0.8;
}

.c-btn--primary {
  background-color: var(--color-pink);
  color: #fff;
}

.c-btn--outline {
  background-color: #fff;
  color: var(--color-pink);
  border: 1px solid var(--color-pink);
}

.c-btn--outline-blue,
.c-btn--outline-pink,
.c-btn--filled-blue {
  width: 280px;
  justify-content: space-between;
  padding-inline: var(--space-4);
  padding-block: 23px;
  border-width: 2px;
  border-style: solid;
  border-radius: 12px;
  font-size: var(--font-size-3);
  line-height: 1;
  letter-spacing: 0.02em;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* シャドウ分動くホバー */
}

.c-btn--outline-blue,
.c-btn--outline-pink {
  background-color: #fff;
}

.c-btn--outline-blue:hover,
.c-btn--outline-pink:hover,
.c-btn--filled-blue:hover {
  opacity: 1; /* .c-btn:hoverのopacity:0.8を打ち消す(シャドウ移動のみにするため) */
  box-shadow: none;
  transform: translate(6px, 6px);
}

.c-btn--outline-blue {
  color: var(--color-blue);
  border-color: var(--color-blue);
  box-shadow: 6px 6px 0 rgba(37, 69, 119, 0.2); /* var(--color-blue) 20% */
}

@media (max-width: 768px) {
  .c-btn--outline-blue,
  .c-btn--outline-pink,
  .c-btn--filled-blue {
    width: 240px; /* 修正前のclamp最小値 */
    font-size: var(--font-size-2);
  }
}

.c-btn--outline-pink {
  color: var(--color-pink);
  border-color: var(--color-pink);
  box-shadow: 6px 6px 0 rgba(230, 50, 120, 0.2); /* var(--color-pink) 20% */
}

/* 確認画面の「送信する」ボタン用。.c-btn--outline-blueの塗り反転版(紺背景・白文字) */
.c-btn--filled-blue {
  background-color: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
  box-shadow: 6px 6px 0 rgba(37, 69, 119, 0.2); /* var(--color-blue) 20% */
}

/* .c-btn__iconは背景にcurrentColorを使うため、地色が紺のこのボタンでは白丸+紺矢印に反転させる
   (.c-property-detail__cta-btnの紺背景ボタンと同じ考え方) */
.c-btn--filled-blue .c-btn__icon {
  background-color: #fff;
}

.c-btn--filled-blue .c-btn__icon::after {
  border-top-color: var(--color-blue);
  border-right-color: var(--color-blue);
}

.c-btn__icon {
  --icon-size: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem); /* 20px→24px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: currentColor;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.c-btn__icon::after {
  content: '';
  width: calc(var(--icon-size) * 0.32);
  height: calc(var(--icon-size) * 0.32);
  border-top: calc(var(--icon-size) * 0.065) solid #fff;
  border-right: calc(var(--icon-size) * 0.065) solid #fff;
  transform: rotate(45deg) translate(calc(var(--icon-size) * -0.054), calc(var(--icon-size) * 0.054));
}

.c-btn--line {
  background-color: #06C755; /* LINE公式ブランドカラー */
  color: #fff;
}

.c-btn__icon--white {
  background-color: #fff;
}

.c-btn__icon--white::after {
  border-top-color: var(--color-blue);
  border-right-color: var(--color-blue);
}

/* ==========================================================================
   Component: Tel Button(電話番号+営業時間を表示するボタン。
   色違いで他ページでも使う想定のため、c-btn--outline-blue/pinkと同じくmodifierで色分けする)
   ========================================================================== */
.c-tel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: clamp(23rem, 20.1rem + 12.39vw, 31.25rem); /* 368px→500px。暫定値。デザインデータで正確な値が分かり次第調整 */
  margin-inline: auto;
  padding: clamp(1.125rem, 0.99rem + 0.56vw, 1.5rem) clamp(1.8125rem, 1.57rem + 1.03vw, 2.5rem); /* 18px→24px / 29px→40px */
  border-width: 2px;
  border-style: solid;
  border-radius: 12px; /* c-btn--outline-blue/pinkと同じ角丸 */
  background-color: #fff;
  text-decoration: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* シャドウ分動くホバー */
}

.c-tel-btn--pink {
  border-color: var(--color-pink);
  box-shadow: 6px 6px 0 rgba(230, 50, 120, 0.2); /* var(--color-pink) 20% */
}

.c-tel-btn--pink:hover {
  box-shadow: none;
  transform: translate(6px, 6px);
}

.c-tel-btn--blue {
  border-color: var(--color-blue);
  box-shadow: 6px 6px 0 rgba(37, 69, 119, 0.2); /* var(--color-blue) 20% */
}

.c-tel-btn--blue:hover {
  box-shadow: none;
  transform: translate(6px, 6px);
}

.c-tel-btn__number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-base);
  font-size: clamp(1.75rem, 1.53rem + 0.94vw, 2.375rem); /* 28px→38px */
  font-weight: bold;
  line-height: 0;
  letter-spacing: 0.03em;
}

.c-tel-btn--pink .c-tel-btn__number {
  color: var(--color-pink);
}

.c-tel-btn--blue .c-tel-btn__number {
  color: var(--color-blue);
}

.c-tel-btn__icon {
  width: clamp(1.4375rem, 1.26rem + 0.75vw, 1.9375rem); /* 23px→31px */
  height: clamp(1.4375rem, 1.26rem + 0.75vw, 1.9375rem);
  flex-shrink: 0;
}

.c-tel-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.c-tel-btn__hours {
  font-size: var(--font-size-1); /* 14px */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-text);
}

/* ==========================================================================
   Component: Tag(カテゴリーラベル等の丸角タグ)
   ========================================================================== */
.c-tag {
  display: inline-flex;
  padding: clamp(0.375rem, 0.318rem + 0.242vw, 0.5rem) clamp(1rem, 0.773rem + 0.97vw, 1.5rem); /* 6px→8px / 16px→24px */
  border-radius: 4px;
  background-color: var(--color-pink); /* 賃貸・売買共通でテーマカラーに関わらず常にピンク(design-data準拠) */
  color: #fff;
  font-size: clamp(0.75rem, 0.693rem + 0.242vw, 0.875rem); /* 12px→14px */
  font-weight: 700;
  line-height: var(--leading-none);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
}

/* ==========================================================================
   Component: Property Card
   ========================================================================== */
.c-property-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.c-property-card__photo {
  position: relative;
}

.c-property-card__photo-inner {
  position: relative;
  overflow: hidden; /* パディング20pxの内側(元画像と同じ幅)でクリップし、ホバー拡大がパディング領域に侵食しないようにする */
  border-radius: 12px;
  aspect-ratio: 3 / 2; /* 比率はこのラッパー側で確定させる。imgに直接指定すると画像自体の実寸(内在サイズ)が優先され、比率が効かないことがあるため */
}

.c-property-card__photo-inner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  will-change: transform; /* 角丸クリップ内でのscale時のガタつき対策 */
  backface-visibility: hidden;
}

.c-property-card:hover .c-property-card__photo-inner img {
  transform: scale(1.08);
}

.c-property-card__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 12px 24px;
  border-radius: 12px 0 12px 0;
  background-color: var(--color-pink);
  color: #fff;
  font-size: var(--font-size-1);
  font-weight: bold;
  line-height: var(--leading-none);
  letter-spacing: 0.02em;
}

.p-services__recommend--repair .c-property-card__photo-inner {
  border-radius: 32px;
}

.p-services__recommend--repair .c-property-card__badge {
  border-radius: 12px 0 16px 0;
}

.p-services__recommend--repair .c-property-card__title {
  margin-bottom: 0;
}

.c-property-card__title {
  display: -webkit-box;
  margin: 0 0 20px;
  min-height: calc(var(--font-size-3) * var(--leading-relaxed) * 2); /* タイトル1〜2行どちらでもspecsの開始位置を揃える */
  font-size: var(--font-size-3);
  font-weight: bold;
  line-height: var(--leading-relaxed);
  letter-spacing: 0.05em;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-property-card__specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.c-property-card__spec {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.c-property-card__spec-label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 100px;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: var(--color-blue-light);
  color: var(--color-blue);
  font-size: 12px;
  font-weight: bold;
  line-height: var(--leading-none);
  white-space: nowrap;
  margin: 0;
}

.c-property-card__spec-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.c-property-card__spec-value {
  margin: 0;
  font-size: var(--font-size-1);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 賃貸・売買・修繕事例の一覧ページ用バリエーション(価格等のspecsを持たず、「詳細を見る」ボタンのみ) */
.c-property-card--list {
  border: 1px solid #DDDDDD;
  background-color: #F9F8F6; /* トップページの推奨物件カード(白)とは異なる一覧ページ専用の背景色 */
}

.c-property-card--list .c-property-card__body {
  display: flex;
  flex-direction: column;
  flex: 1; /* タイトルの行数がカードごとに違っても、下のボタンの位置を行内で揃える */
}

.c-property-card__more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 12px;
  border-radius: 6px; /* c-property-card__spec-labelと同じ「タグ」スタイルを流用 */
  background-color: var(--color-blue-light);
  color: var(--color-blue);
  font-size: var(--font-size-1);
  font-weight: bold;
  line-height: var(--leading-none);
  letter-spacing: 0.02em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-property-card:hover .c-property-card__more {
  background-color: var(--color-blue);
  color: #fff;
}

/* ==========================================================================
   Component: Page KV(下層ページ共通の見出しエリア)
   ========================================================================== */
.c-page-kv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(10rem, 7.58rem + 10.33vw, 16.875rem); /* 160px→270px */
  background-color: var(--theme-color-light);
}

.c-page-kv__heading {
  font-size: clamp(1.75rem, 1.31rem + 1.88vw, 3rem); /* 28px→48px。h1共通の--font-size-7(32px→48px)から最小値のみ変更してコンポーネント専用clamp化 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--theme-color);
}

.c-page-kv__label {
  width: 2.417em; /* 原寸116×44pxを基準に、h1(--font-size-7 32px→48px)と同じ比率で追従させる */
  height: auto;
  margin-top: clamp(0.125rem, -0.102rem + 0.97vw, 0.625rem); /* 2px→10px */
  font-size: var(--font-size-7);
}

.c-page-kv__label.c-page-kv__label--parking {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 7.042em; /* 原寸338×44pxを基準に、news版と同じ考え方で算出 */
}

/* ==========================================================================
   Component: Breadcrumb(下層ページ共通のパンくずリスト)
   ========================================================================== */
.c-breadcrumb {
  padding-top: var(--space-2);
}

.c-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0; /* 現在地(最後の項目)が長くても、それ以外の項目・矢印は縮めない */
  gap: 8px; /* 矢印(::after)は視覚的な重心が右寄りのため、テキスト側の間隔(list gap 12px)と揃って見えるよう詰めている */
  font-size: var(--font-size-1);
  color: var(--color-text);
}

.c-breadcrumb__item a {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

.c-breadcrumb__item:not(:last-child)::after {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-top: 1px solid #555;
  border-right: 1px solid #555;
  transform: rotate(45deg);
}

.c-breadcrumb__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.c-breadcrumb__item--current {
  display: block;
  flex-shrink: 1; /* 現在地だけは縮めて省略表示にする */
  min-width: 0; /* flexアイテムのデフォルトmin-width:autoのままだと省略が効かないため */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-size-1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-pink); /* 賃貸・売買・修繕事例ページ共通でテーマカラーに関わらず常にピンク */
}

/* ==========================================================================
   Component: Badge(必須/任意バッジ。物件お問い合わせフォームの項目ラベル横に付与)
   ========================================================================== */
.c-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-1); /* 14px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200%。バッジの上下余白はpaddingではなくこの行送りで確保している */
  letter-spacing: 0;
  white-space: nowrap;
}

.c-badge--required {
  background-color: var(--color-pink);
  color: #fff;
}

.c-badge--optional {
  background-color: #fff;
  border: 1px solid var(--color-pink);
  color: var(--color-pink);
}

/* ==========================================================================
   Component: Form Control(input/textarea共通スタイル。
   CF7設置後は.wpcf7-form-control等のCF7側クラスと併記して当てる想定)
   ========================================================================== */
.c-form-control {
  display: block;
  width: 100%;
  padding: 0.875em 1em;
  border: 1px solid #CCC;
  border-radius: var(--radius-md);
  background-color: #fff;
  font-size: var(--font-size-2); /* 16px */
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.c-form-control:focus {
  border-color: #999;
  outline: none;
}

.c-form-control::placeholder {
  color: #999;
}

textarea.c-form-control {
  min-height: 10em;
  resize: vertical;
}

.c-form-control[readonly] {
  background-color: #F5F5F5; /* 物件名など自動入力される項目の読み取り専用表示 */
  color: #767676;
}

/* ==========================================================================
   Component: Category Nav(賃貸・売買・修繕事例 一覧ページ共通のカテゴリー絞り込みボタン)
   ========================================================================== */
.c-category-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.c-category-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 0.417rem + 0.231vw, 0.625rem) clamp(0.875rem, 0.458rem + 1.157vw, 1.5rem); /* 8px→10px / 14px→24px。576px→1440px基準 */
  border: 2px solid var(--theme-color);
  border-radius: var(--radius-md); /* 8px */
  background-color: #fff;
  box-shadow: 0 4px 0 var(--theme-shadow-color);
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-category-nav__item:hover {
  box-shadow: none;
  transform: translateY(4px); /* シャドウ分動くホバー */
}

.c-category-nav__item.is-current {
  background-color: var(--theme-color);
  color: #fff;
}

@media (max-width: 980px) {
  .c-category-nav__list {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {
  .c-category-nav__list {
    gap: 16px;
  }

  .c-category-nav__item {
    font-size: var(--font-size-2); /* 16px */
  }
}

/* ==========================================================================
   Component: Property Archive(賃貸・売買・修繕事例 一覧ページ共通のカード一覧+ページネーション)
   ========================================================================== */
.c-property-archive {
  padding-top: var(--space-7);
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保。mainの最後のセクションのため */
}

.c-property-archive__banner {
  margin-top: var(--space-7); /* 48px→80px。category-navとの間隔はgridと同じ */
  text-align: center;
}

.c-property-archive__banner a {
  display: inline-block;
  transition: opacity 0.2s ease;
}

.c-property-archive__banner a:hover {
  opacity: 0.8;
}

.c-property-archive__banner img {
  width: 100%;
  max-width: 280px; /* トップページ(.p-services__banner)と同じサイズ */
  height: auto;
  margin-inline: auto;
}

.c-property-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-7); /* 48px→80px */
}

@media (max-width: 900px) {
  .c-property-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .c-property-archive__grid {
    grid-template-columns: 1fr;
  }
}

.c-property-archive__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: var(--space-8); /* 56px→100px */
}

.c-property-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  line-height: 1;
  font-family: var(--font-family-en);
  font-size: var(--font-size-2);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.c-property-archive__pagination .page-numbers.current {
  color: var(--color-pink); /* お知らせ一覧のページネーションと同じく、テーマカラーに関わらず常にピンク */
}

.c-property-archive__pagination .page-numbers.prev,
.c-property-archive__pagination .page-numbers.next {
  --icon-size: 32px;
  font-size: 0; /* 文字(‹ ›)はフォントの縦位置メトリクスが数字と揃わないため非表示にし、矢印は::afterで描画する */
}

.c-property-archive__pagination .page-numbers.prev::after,
.c-property-archive__pagination .page-numbers.next::after {
  content: '';
  width: calc(var(--icon-size) * 0.28);
  height: calc(var(--icon-size) * 0.28);
  border-top: calc(var(--icon-size) * 0.09) solid var(--color-text); /* 斜め回転で線が細く見えるため、通常より太めの比率にする */
  border-right: calc(var(--icon-size) * 0.09) solid var(--color-text);
  /* border-top/rightで作った矢印は視覚的な重心が箱の中心からずれるため、回転前に補正する */
  transform: translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.c-property-archive__pagination .page-numbers.prev::after {
  transform: rotate(-135deg) translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.c-property-archive__pagination .page-numbers.next::after {
  transform: rotate(45deg) translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.c-property-archive__pagination .page-numbers.dots {
  width: auto;
}

.c-property-archive__pagination .page-numbers.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.c-property-archive__empty {
  margin-top: var(--space-6);
  font-size: var(--font-size-2);
  color: var(--color-text);
}

/* ==========================================================================
   Component: Property Detail(賃貸・売買・修繕事例 共通の物件詳細ページ)
   ========================================================================== */
.c-property-detail {
  padding-top: var(--space-7);
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* mainの最後のセクションのため波のオーバーラップ分を吸収 */
}

.c-property-detail__title {
  margin: 12px 0 0;
  font-size: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem); /* 20px→40px。375px→1440pxでclamp */
  font-weight: bold;
  line-height: var(--leading-normal);
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.c-property-detail__layout {
  display: flex;
  gap: var(--space-5); /* 28px→40px */
  margin-top: var(--space-6); /* 40px→60px */
}

/* Gallery */
.c-property-detail__gallery {
  /* width:45%だとgap分の余白を吸収するflex-shrinkの自動縮小に依存してしまい、
     内側の要素(サムネイル行など)の有無でページごとに縮み方が変わって幅がずれるため、
     gap分を先に差し引いたflex-basisを直接指定して比率を固定する */
  flex: 0 0 calc(45% - (var(--space-5) * 0.45)); /* PC実測480px/(480+590)とほぼ一致する比率 */
  min-width: 0; /* サムネイル行(overflow:hidden)の中身がflex-itemの自動最小幅計算に影響し、賃貸(6枚)だけコンテナ幅を超えてしまうため無効化 */
}

.c-property-detail__gallery-main {
  position: relative; /* overflow:hiddenはここに置かず、矢印ボタンが画像端からはみ出せるようにする */
}

.c-property-detail__gallery-main-inner {
  position: relative; /* imgのcontaining blockをこの要素にし、overflow:hiddenで角丸クロップが確実に効くようにする */
  overflow: hidden;
  aspect-ratio: 3 / 2; /* 画像サイズが違っても必ず3:2でクロップ表示するため、比率はこのラッパー側で確定させる */
  border-radius: 12px;
}

.c-property-detail__gallery-main-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-property-detail__gallery-arrow {
  --icon-size: 32px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 0;
  color: var(--color-blue);
  cursor: pointer;
}

.c-btn__icon.c-property-detail__gallery-arrow::after {
  /* .c-btn__icon::afterと同じ詳細度のため確実に上書きされるよう複合セレクタにしている。
     線を細くした分、視覚的重心を合わせるtranslate補正値(既定は太さ0.065用)も太さの比率に合わせて縮小する */
  border-top-width: calc(var(--icon-size) * 0.05);
  border-right-width: calc(var(--icon-size) * 0.05);
  transform: rotate(45deg) translate(calc(var(--icon-size) * -0.042), calc(var(--icon-size) * 0.042));
}

.c-btn__icon.c-btn__icon--prev.c-property-detail__gallery-arrow::after {
  /* .c-btn__icon.c-btn__icon--prev::afterと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  transform: rotate(-135deg) translate(calc(var(--icon-size) * -0.042), calc(var(--icon-size) * 0.042));
}

.c-property-detail__gallery-arrow--prev {
  left: -16px; /* 丸(32px)の半分が画像からはみ出し、丸の中央が画像端にくる位置 */
}

.c-property-detail__gallery-arrow--next {
  right: -16px;
}

.c-property-detail__gallery-thumbs {
  margin-top: 20px;
  overflow: hidden; /* 中央のサムネ以外は左右の端で切れて見せる */
}

.c-property-detail__gallery-thumb {
  width: 100px; /* 5枚目が半分くらい見えるサイズ。Swiperのslidesレイアウト計算用。gap相当はJS側のspaceBetweenで管理 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.c-property-detail__gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-property-detail__gallery-thumb:not(.is-current) {
  opacity: 0.6;
}

/* Info column(価格/物件概要+問い合わせボタン) */
.c-property-detail__info {
  flex: 0 0 calc(55% - (var(--space-5) * 0.55)); /* PC実測590px/(480+590)とほぼ一致する比率。ギャラリー側と同じ理由でflex-basisを直接指定 */
  min-width: 0; /* ギャラリー側と同じ理由(自動最小幅の無効化) */
}

.c-property-detail__info-block + .c-property-detail__info-block {
  margin-top: var(--space-5); /* 28px→40px */
}

.c-property-detail__info-title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5); /* 20px→24px */
  font-weight: bold;
  line-height: var(--leading-normal);
  letter-spacing: 0.1em;
  color: var(--color-pink); /* 賃貸・売買共通でテーマカラーに関わらず常にピンク(design-data準拠) */
}

.c-property-detail__info-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.c-property-detail__info-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 修繕事例詳細の「修繕内容」アイコンのみ24px(他ページのicon_memo/価格アイコンは30pxのまま) */
.c-property-detail__info-icon--sm {
  width: 24px;
  height: 24px;
}

.c-property-detail__info-divider {
  margin: 12px 0 0;
  height: 3px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-pink); /* 賃貸・売買共通でテーマカラーに関わらず常にピンク(design-data準拠) */
}

.c-property-detail__row {
  display: flex;
  align-items: baseline; /* 賃料行は金額のみ24pxで文字サイズが違うため、ベースライン基準で揃える */
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(37, 69, 119, 0.2); /* var(--color-blue) 20% */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.c-property-detail__row-label {
  flex-shrink: 0;
  width: clamp(8.25rem, 32%, 18.75rem); /* 132px→300px。info列(590px前後)に対する比率で管理 */
  padding-right: 16px;
}

/* 修繕事例詳細はラベルの文字数が少なく(内容/期間/その他)、賃貸・売買と同じ132px下限だと
   スマホでvalue列が狭く見えるため、このページのみ100pxまで縮める */
@media (max-width: 576px) {
  .theme-repair .c-property-detail__row-label {
    width: 100px;
  }
}

.c-property-detail__row-value--price {
  font-size: clamp(1.0625rem, 0.908rem + 0.657vw, 1.5rem); /* 17px→24px(375px→1440px) */
  font-weight: bold;
}

.c-property-detail__cta-btn {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: var(--space-5); /* 28px→40px */
  padding: 20px 30px;
  border: 2px solid var(--color-blue);
  border-radius: 12px; /* c-btn--outline-blueと同じ角丸 */
  background-color: var(--color-blue);
  box-shadow: 6px 6px 0 rgba(37, 69, 119, 0.2); /* c-btn--outline-blueと同じドロップシャドウ(var(--color-blue) 20%) */
  font-size: var(--font-size-3); /* 18px */
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* シャドウ分動くホバー */
}

/* テキストを完全中央に保つため、アイコン(右)と同じ幅のダミー要素(左)を並べる(p-news-detail__backと同じ手法) */
.c-property-detail__cta-btn-text {
  flex: 1;
  text-align: center;
}

.c-property-detail__cta-btn-spacer {
  width: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem); /* .c-btn__iconの--icon-sizeと同じ幅 */
  flex-shrink: 0;
}

.c-property-detail__cta-btn:hover {
  box-shadow: none;
  transform: translate(6px, 6px);
}

.c-property-detail__cta-btn .c-btn__icon {
  background-color: #fff; /* 紺ボタンの上に白丸+紺矢印 */
}

.c-property-detail__cta-btn .c-btn__icon::after {
  border-top-color: var(--color-blue);
  border-right-color: var(--color-blue);
}

.c-property-detail__cta-btn--bottom {
  max-width: 590px;
  margin-top: var(--space-6); /* 40px→60px */
  margin-inline: auto;
}

@media (max-width: 576px) {
  .c-property-detail__cta-btn-spacer {
    width: 0;
  }
}

@media (max-width: 480px) {
  .c-property-detail__cta-btn-text {
    font-size: var(--font-size-2); /* 16px */
    text-align: left;
  }
}

/* ギャラリー下のセクション(物件特徴/物件詳細/周辺地図) */
.c-property-detail__section {
  margin-top: var(--space-6); /* 40px→60px */
}

.c-property-detail__section-title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4); /* 17px→20px */
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0.1em;
  color: var(--color-pink); /* 賃貸・売買共通でテーマカラーに関わらず常にピンク(design-data準拠) */
}

/* 修繕事例詳細のみ太字(賃貸・売買の物件特徴/物件詳細/周辺地図見出しは500のまま) */
.theme-repair .c-property-detail__section-title {
  font-weight: bold;
}

/* 修繕事例詳細: 「ビフォーアフター」「施工詳細」の見出し前のicon_memo(このページのみ使用) */
.c-property-detail__section-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.c-property-detail__features-text {
  margin: 16px 0 0;
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text); /* 賃貸は売買と異なり行頭の色分け処理をしないプレーンテキスト表示 */
}

/* 物件特徴(売買用): フィールドはテキストエリアで、管理画面側で行頭に「・」を手入力する運用。
   その「・」の文字だけをこのspanで囲んでピンク色にする(賃貸のfeatures-textはプレーンテキストのまま) */
.c-property-detail__features-bullet {
  color: var(--color-pink);
  font-weight: bold;
}

.c-property-detail__table {
  margin-top: 4px; /* c-property-detail__rowの下線と同仕様のためth/td相当のスタイルはc-property-detail__row側を再利用 */
}

.c-property-detail__map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(400px, 20rem + 13.89vw, 520px); /* .p-access__mapと同じ高さ */
  margin-top: 24px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-light);
  font-size: var(--font-size-3);
  font-weight: 500;
  color: var(--color-text);
}

.c-property-detail__map-placeholder iframe {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  .c-property-detail__layout {
    flex-direction: column;
    margin-top: clamp(0.75rem, -0.335rem + 4.628vw, 2.5rem); /* 12px→40px(375px→980px)。980px以上はvar(--space-6)の40pxに接続 */
  }

  .c-property-detail__gallery,
  .c-property-detail__info {
    flex-basis: auto; /* 縦積み時はmain-axisが縦になり45%/55%のflex-basisが高さに解釈されてしまうため無効化し、widthに任せる */
    width: 100%;
  }

  .c-property-detail__cta-btn--bottom {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .c-property-detail__info-icon {
    width: 24px;
    height: 24px;
  }
}

/* 修繕事例詳細: 「一覧に戻る」ボタン。c-property-detail__cta-btn--bottomより後ろに置き、
   980px以下のmax-width:100%上書きより優先させて常に幅を狭くする(c-btn--outline-blueと同じ280px→240px) */
.c-property-detail__cta-btn--back {
  max-width: 280px;
}

@media (max-width: 768px) {
  .c-property-detail__cta-btn--back {
    max-width: 240px;
  }
}

@media (max-width: 480px) {
  /* アイコンが左側にあるため、共通ルールのtext-align:leftのままだとテキストがアイコンと重なる。中央寄せに上書き */
  .c-property-detail__cta-btn--back .c-property-detail__cta-btn-text {
    text-align: center;
  }
}

/* 修繕事例詳細: Before/After比較(行数可変のリピーター。1件分=c-property-detail__before-after-setとして
   ループ前提の構造にし、セット間の余白(縦積み時60px)とセット内の余白(矢印両隣、縦積み時0)を別々に制御する) */
.c-property-detail__before-after {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}

.c-property-detail__before-after-set {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: clamp(0.5rem, -0.599rem + 3.053vw, 1.5rem); /* 8px→24px(576px→1100px)。1100px以上は24px固定 */
}

.c-property-detail__before-after-photo {
  position: relative;
  max-width: 500px;
  margin-inline: auto;
}

.c-property-detail__before-after-photo-inner {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 2;
}

.c-property-detail__before-after-photo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-property-detail__before-after-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 5.5em; /* Before/Afterで文字数が違っても同じ幅で揃える */
  padding: 0.5em 1em; /* 12px/24px(フォントサイズ24px基準)をemに変換。font-sizeの可変に合わせて余白も追従させる */
  border-radius: 12px 0 12px 0; /* c-property-card__badgeと同じ値。外側の角(photo自体の角丸12pxと接する角)も丸めないと隙間ができるため上下反転しない */
  font-size: clamp(1.125rem, 0.993rem + 0.563vw, 1.5rem); /* 18px→24px(375px→1440px)。design-data指定の24pxはclamp最大値と一致 */
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}

.c-property-detail__before-after-badge--before {
  background-color: #B4C1D4;
  color: var(--color-blue);
}

.c-property-detail__before-after-badge--after {
  background-color: var(--color-blue);
  color: #fff;
}

.c-property-detail__before-after-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-property-detail__before-after-arrow img {
  width: clamp(3rem, 1.601rem + 5.97vw, 3.75rem); /* 48px→60px(375px→576px)。576px以上は60px固定 */
  height: clamp(3rem, 1.601rem + 5.97vw, 3.75rem);
}

@media (max-width: 768px) {
  /* 768px以下はセット内の余白をなくし、矢印も50px固定にする(以降ずっと50px) */
  .c-property-detail__before-after-set {
    gap: 0;
  }

  .c-property-detail__before-after-arrow img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 576px) {
  /* 1カラム化。セット間は60px、セット内(矢印両隣)は0にして矢印を写真に密着させる */
  .c-property-detail__before-after {
    gap: 60px;
  }

  .c-property-detail__before-after-set {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }

  /* 1カラムになったら列の余りがなくなるため、500px上限を外して幅いっぱいに表示する。
     justify-items:centerの列は子要素にwidthがないと画像の実サイズに縮んでしまうため、widthも明示する */
  .c-property-detail__before-after-photo {
    width: 100%;
    max-width: 100%;
  }

  .c-property-detail__before-after-arrow img {
    transform: rotate(90deg);
  }
}

/* 修繕事例詳細: 施工詳細ギャラリー(行数可変のリピーター。3列グリッドで折り返す) */
.c-property-detail__construction-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 40px;
  margin-top: 16px;
}

.c-property-detail__construction-gallery-photo {
  max-width: 350px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 2; /* 上のBefore/Afterギャラリーと比率を統一 */
}

.c-property-detail__construction-gallery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-property-detail__construction-gallery-caption {
  max-width: 350px;
  margin: 16px auto 0;
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .c-property-detail__construction-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2列・1列になったら列の余りがなくなるため、350px上限を外して幅いっぱいに表示する */
  .c-property-detail__construction-gallery-photo,
  .c-property-detail__construction-gallery-caption {
    max-width: none;
  }
}

@media (max-width: 576px) {
  .c-property-detail__construction-gallery {
    grid-template-columns: 1fr;
  }
}

/* 修繕事例詳細: ポイント説明文(フリーテキストエリア) */
.c-property-detail__freetext {
  margin-top: 40px; /* 施工詳細ギャラリーからの余白 */
  padding: clamp(1.25rem, -0.124rem + 3.817vw, 2.5rem); /* 20px→40px(576px→1100px) */
  border: 2px solid #D3DAE4;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Project: KV
   ========================================================================== */
.p-kv {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.p-kv__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-kv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15); /* ズームアウト演出の開始位置 */
}

.p-kv__photo img.is-zooming {
  transition: transform 24s ease-out; /* スライド表示中にゆっくりズームアウトする演出。JS側で完全に見えなくなってから次のズームに備えてリセットしている */
  transform: scale(1);
}

.p-kv__slide > .l-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

.p-kv__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.47rem + 2.25vw, 2.5rem); /* 16px→40px。space-5(28px→40px)の最大値はそのままに、スマホの絶対値16pxを最小値にして単体でclamp化 */
  padding-block: var(--space-5);
  color: #fff;
}

.p-kv__heading {
  font-family: var(--font-family-heading);
  font-size: clamp(1.875rem, 1.48rem + 1.69vw, 3rem); /* 30px→48px */
  font-weight: bold;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.05em;
}

.p-kv__lead {
  font-size: clamp(1rem, 0.82rem + 0.75vw, 1.5rem); /* 16px→24px。font-size-3(18px固定)を使わずこのコンポーネント専用に可変させている */
  font-weight: bold;
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
}

@media (max-width: 576px) {
  .p-kv {
    aspect-ratio: 4 / 5; /* SP用画像(800×1000 = 4:5)の比率に合わせ、cover時のクロップをなくして全体を表示 */
  }

  .p-kv__slide > .l-container {
    align-items: flex-start; /* 中央寄せ+マイナスmarginだとスライドごとの文字量差で見出しの開始位置がズレるため、上からの固定位置に変更 */
    padding-top: 16vw; /* 見出しの開始位置。.p-kvの高さが幅基準のため、paddingもvw指定で画面幅が変わっても同じ位置を保つ */
  }
}

@media (min-width: 1200px) {
  .p-kv__body {
    transform: translateX(-48px); /* 大画面では1100px幅の外に少し出す */
  }
}

/* ==========================================================================
   Project: Quicklinks
   ========================================================================== */
.p-quicklinks__wrap {
  padding-top: var(--space-5);
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-quicklinks__row {
  --nav-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
  --nav-gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem); /* ブラウザ端⇔矢印、矢印⇔画像を同じ余白にする */
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding-inline: var(--nav-gap);
}

.p-quicklinks__slider {
  flex: 1;
  min-width: 0;
}

.p-quicklinks__item a {
  display: block;
  transition: opacity 0.2s ease;
}

.p-quicklinks__item a:hover {
  opacity: 0.7;
}

.p-quicklinks__item img {
  display: block;
  width: 100%;
  height: auto;
}

.p-quicklinks__nav {
  --icon-size: var(--nav-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-full);
  background-color: #fff;
  box-shadow: 0 2px 0 rgba(37, 69, 119, 0.2); /* var(--color-blue) 20% */
  cursor: pointer;
}

.p-quicklinks__nav::after {
  content: '';
  width: calc(var(--icon-size) * 0.28);
  height: calc(var(--icon-size) * 0.28);
  border-top: calc(var(--icon-size) * 0.07) solid var(--color-blue);
  border-right: calc(var(--icon-size) * 0.07) solid var(--color-blue);
  /* border-top/rightで作った矢印は視覚的な重心が箱の中心からずれるため、回転前に補正する */
  transform: translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.p-quicklinks__nav--prev::after {
  transform: rotate(-135deg) translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.p-quicklinks__nav--next::after {
  transform: rotate(45deg) translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.p-quicklinks__pagination {
  position: relative; /* Swiperデフォルトのabsolute配置を解除し通常フローに乗せる */
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.p-quicklinks .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  background-color: var(--color-blue-light);
  opacity: 1;
  transition: transform 0.3s ease;
}

.p-quicklinks .swiper-pagination-bullet-active {
  transform: scale(1.4);
}

/* 1200px以上はPCの表示幅に余裕があるため、カルーセルではなく4枚並びの静止レイアウトにする(JS側でSwiperをdestroyする) */
@media (min-width: 1200px) {
  .p-quicklinks__row {
    padding-inline: 40px;
    gap: 0;
  }

  .p-quicklinks__slider .swiper-wrapper {
    gap: var(--space-2);
  }

  .p-quicklinks__item {
    width: auto;
    flex: 1;
  }

  .p-quicklinks__nav,
  .p-quicklinks__pagination {
    display: none;
  }
}

/* ==========================================================================
   Project: Services
   ========================================================================== */
.p-services__heading {
  text-align: center;
}

.p-services__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-7);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-blue);
}

.p-services__label {
  margin-top: var(--space-2);
  font-family: var(--font-family-en);
  font-size: var(--font-size-3);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-pink);
}

@media (max-width: 576px) {
  .p-services__title {
    font-size: var(--font-size-6); /* p-about__heading のスマホ時サイズと揃える */
  }
}

.p-services__item {
  margin-top: var(--space-8); /* 56px→100px */
}

.p-services__block {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-6); /* 暫定値。要調整 */
}

.p-services__content {
  flex: 0 1 auto; /* 自身の中身の幅を基準にし、余った幅は写真側に渡す */
}

.p-services__photo {
  flex: 1;
  height: 390px;
  margin-right: calc(-1 * (max(0px, (100vw - var(--content-max-width)) / 2) + var(--content-padding))); /* 右端は1100px幅に収めずビューポート端まで表示 */
}

.p-services__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px 0 0 24px;
}

@media (max-width: 1200px) {
  .p-services__block {
    flex-direction: column-reverse; /* DOM順はcontent→photoのため、column-reverseで写真を先に表示 */
    align-items: center;
  }

  .p-services__content,
  .p-services__photo {
    flex: none;
  }

  .p-services__content {
    width: 100%;
    text-align: center;
  }

  .p-services__heading-row,
  .p-services__buttons {
    justify-content: center;
  }

  .p-services__photo {
    align-self: stretch; /* 親のalign-items:centerの影響を受けず全幅ブリードを維持する */
    height: clamp(170px, 33vw, 400px); /* PCの390px固定から、スマホに向けてなめらかに縮小 */
    width: calc(100vw - var(--content-padding));
    margin-left: calc(50% - 50vw + var(--content-padding)); /* 左に少し余白を残し、右はビューポート端までブリード */
    margin-right: 0;
  }
}

.p-services__heading-row {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.045rem + 1.939vw, 1.5rem); /* 8px→24px */
}

.p-services__illust {
  width: auto;
  height: clamp(3.5rem, 2.108rem + 5.939vw, 6.5625rem); /* 56px→105px。block-titleと同じ比率(105/68)で追従 */
}

.p-services__block-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2.25rem, 1.341rem + 3.879vw, 4.25rem); /* 36px→68px */
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.p-services__font {
  width: auto;
  height: clamp(1.5625rem, 0.9375rem + 2.667vw, 2.9375rem); /* 25px→47px。block-titleと同じ比率(47/68)で追従 */
  margin-top: -16px;
  margin-left: calc(var(--content-padding) * -1); /* l-containerのpadding分だけ左にはみ出させ、コンテナ1100px自体の端に揃える */
}

@media (max-width: 1200px) {
  .p-services__font {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  .p-services__buttons {
    margin-top: 37px;
  }
}

@media (max-width: 768px) {
  .p-services__buttons {
    margin-top: 35px;
  }
}

@media (max-width: 576px) {
  .p-services__buttons {
    margin-top: 32px;
  }
}

.p-services__text {
  margin-top: var(--space-1);
  font-size: var(--font-size-2);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: var(--leading-loose);
  color: var(--color-text);
}

.p-services__buttons {
  display: flex;
  gap: var(--space-3);
  margin-top: 40px;
}

@media (max-width: 576px) {
  .p-services__buttons {
    flex-direction: column; /* スマホ幅ではボタン2つを縦並びに */
    align-items: center;
  }
}

.p-services__recommend {
  position: relative;
  z-index: 0;
  width: 100vw;
  margin-top: -76px;
  margin-left: calc(50% - 50vw);
  padding-top: 137px;
  padding-bottom: var(--space-8); /* 56px→100px */
  background-color: var(--color-pink-light);
}

.p-services__recommend-title {
  text-align: center;
}

.p-services__recommend--blue .p-services__recommend-title {
  color: var(--color-blue);
}

.p-services__recommend--blue .c-heading-dots__dot {
  background-color: var(--color-blue);
}

.p-services__recommend--repair {
  margin-top: -108px;
  padding-top: 168px;
}

@media (max-width: 1200px) {
  .p-services__recommend {
    margin-top: -20px;
    padding-top: 81px;
  }

  .p-services__recommend--repair {
    margin-top: -20px;
    padding-top: 80px;
  }
}

@media (max-width: 900px) {
  .p-services__recommend {
    margin-top: -16px;
    padding-top: 77px;
  }

  .p-services__recommend--repair {
    margin-top: -16px;
    padding-top: 76px;
  }
}

@media (max-width: 768px) {
  .p-services__recommend {
    margin-top: -16px;
    padding-top: 77px;
  }

  .p-services__recommend--repair {
    margin-top: -16px;
    padding-top: 76px;
  }
}

@media (max-width: 576px) {
  .p-services__recommend {
    margin-top: -16px;
    padding-top: 77px;
  }

  .p-services__recommend--repair {
    margin-top: -16px;
    padding-top: 76px;
  }
}

.p-services__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: 60px;
}

.p-services__banner {
  margin-top: 60px;
  text-align: center;
}

.p-services__banner a {
  display: inline-block;
  transition: opacity 0.2s ease;
}

.p-services__banner a:hover {
  opacity: 0.8;
}

.p-services__banner img {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .p-services__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .p-services__cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Project: About
   ========================================================================== */
.p-about {
  padding-top: 0;
  padding-bottom: var(--space-8);
}

.p-about__photo {
  position: relative;
  height: clamp(200px, 34vw, 400px); /* PCは400px固定。幅が狭まるにつれて滑らかに縮み、200pxを下限にする */
}

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

.p-about__photo::after {
  content: '';
  position: absolute;
  top: 100%;
  right: max(0px, calc(50% - 650px)); /* 1100pxのコンテナ幅よりもう少し右寄りに調整。テキストと被ってもよい */
  width: 52vw;
  min-width: 380px;
  max-width: 550px; /* 大きくなりすぎないよう上限を調整 */
  aspect-ratio: 1232 / 1076;
  background-image: url('../images/about_top-illust01.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  pointer-events: none;
}

.p-about__content {
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
}

.p-about__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-6); /* 24px→32px */
  font-weight: 500;
  line-height: var(--leading-loose);
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.p-about__marker {
  background: linear-gradient(transparent 60%, #F6FF78 60%);
  color: inherit;
}

.p-about__text {
  margin-top: var(--space-4);
}

.p-about__text p {
  font-size: var(--font-size-3);
  font-weight: 500;
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
}

.p-about__text p + p {
  margin-top: var(--space-3);
}

.p-about__buttons {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 576px) {
  .p-about__photo::after {
    top: calc(100% + 50px); /* p-about__textに被る位置まで下げる */
  }

  .p-about__text p {
    font-size: var(--font-size-2);
  }

  .p-about__buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   Project: Recruit
   ========================================================================== */
.p-recruit {
  padding-block: var(--space-8);
}

.p-recruit__wrap {
  position: relative;
  display: block;
  text-decoration: none;
}

.p-recruit__wrap::before {
  content: '';
  position: absolute;
  z-index: 0; /* 写真(z-index:1)より下に敷く */
  top: 0;
  left: 0;
  transform: translate(-61.5%, -34.4%); /* 1200px〜。イラスト自身のサイズ基準の相対値(top:-90px/left:-246px相当) */
  width: clamp(230px, 150px + 21vw, 400px);
  aspect-ratio: 603 / 394;
  background-image: url('../images/header_illust.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .p-recruit__wrap::before {
    transform: translate(-25%, -45.9%); /* 〜1200px。top:-120px/left:-100px相当 */
  }
}

@media (max-width: 576px) {
  .p-recruit__wrap::before {
    top: -32px; /* もう少し上に上げる */
  }
}

.p-recruit__photo {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1800 / 592;
  background-image: url('../images/recruit_top-img.jpg');
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
}

.p-recruit__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-blue);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.p-recruit__wrap:hover .p-recruit__photo::after {
  opacity: 0.3;
}

.p-recruit__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.p-recruit__heading {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 1.69rem + 1.31vw, 2.875rem); /* 32px→46px */
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0.1em;
  color: #fff;
}

.p-recruit__label {
  margin-top: var(--space-1);
  font-family: var(--font-family-en);
  font-size: clamp(0.875rem, 0.83rem + 0.19vw, 1rem); /* 14px→16px */
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0.2em;
  color: #fff;
}

.c-btn__icon.p-recruit__icon {
  --icon-size: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem); /* 24px→40px。.c-btn__iconと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  margin-top: clamp(1rem, 0.66rem + 1.45vw, 1.75rem); /* 16px→28px */
  transition: scale 0.6s ease; /* ホバー開始・解除時に滑らかにする */
  will-change: scale; /* 常に合成レイヤーに乗せ、scale:1に戻る瞬間に矢印(::after)のボーダーが再ラスタライズされてガタつくのを防ぐ */
}

.p-recruit__wrap:hover .p-recruit__icon {
  scale: 1.25;
}

@media (max-width: 576px) {
  .p-recruit__photo {
    aspect-ratio: 580 / 272; /* recruit_top-img_sp.jpgの元画像比率 */
    background-image: url('../images/recruit_top-img_sp.jpg');
  }

  .p-recruit__heading {
    font-size: 22px;
  }

  .p-recruit__label {
    margin-top: 4px;
  }
}

/* ==========================================================================
   Project: News
   ========================================================================== */
.p-news {
  background-color: var(--color-pink-light);
  padding-block: var(--space-8);
}

.p-news__card {
  display: flex;
  background-color: #fff;
  border-radius: 20px;
  padding-block: var(--space-7); /* 48px→80px */
  padding-inline: clamp(1.5rem, 0.71rem + 3.38vw, 3.75rem); /* 24px→60px */
}

.p-news__heading-area {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 240px;
  flex-shrink: 0;
}

.p-news__label {
  writing-mode: vertical-rl;
  margin-top: 8px;
  font-family: var(--font-family-en);
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-normal); /* 150% */
  letter-spacing: 0.2em;
  color: var(--color-pink);
}

.p-news__heading {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: row; /* vertical-rlではinline軸(縦方向)がrowになるため */
  justify-content: space-between; /* 文字間をカードの高さいっぱいに均等分配(レスポンシブ対応) */
  align-self: stretch;
  font-size: var(--font-size-7); /* 32px→48px */
  font-weight: 500;
  line-height: 1.3; /* 130% */
  color: var(--color-blue);
}

.p-news__list {
  flex: 1;
  min-width: 0;
}

.p-news__item {
  position: relative;
}

.p-news__item:not(:last-child) {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.p-news__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-image: radial-gradient(circle at 3px 3px, var(--color-blue-light) 3px, transparent 3px); /* タイル内でドット中心を左端寄りにし、1つ目がテキスト左端から始まるようにする */
  background-size: 19px 6px;
  background-repeat: repeat-x;
}

.p-news__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.p-news__date {
  flex-shrink: 0;
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-pink);
}

.p-news__title {
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.p-news__link:hover .p-news__title {
  color: var(--color-pink);
}

@media (max-width: 1200px) {
  .p-news__card {
    flex-direction: column;
    gap: 60px;
  }

  .p-news__heading-area {
    flex-direction: column;
    width: auto;
  }

  .p-news__heading {
    order: 1;
    display: block;
    align-self: auto; /* PC版のalign-self: stretch(高さいっぱいに文字間を分配)を解除 */
    writing-mode: horizontal-tb;
    margin-left: -6px;
  }

  .p-news__label {
    order: 2;
    margin-top: 0;
    writing-mode: horizontal-tb;
  }
}

@media (max-width: 768px) {
  .p-news__card {
    gap: 32px; /* 見出しエリアとリストの間隔を狭める */
  }

  .p-news__heading-area {
    gap: 8px; /* 見出しとラベルの間隔を狭める */
  }

  .p-news__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 576px) {
  .p-news__heading {
    margin-left: -4px;
  }
}

/* ==========================================================================
   Project: News Archive(お知らせ一覧ページ)
   ========================================================================== */
.p-news-archive {
  padding-top: var(--space-7);
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保 */
}

.p-news-archive__layout {
  display: grid;
  grid-template-columns: minmax(0, 780px) max-content; /* listはmax780pxまで可変、asideはテキスト幅に合わせる */
  gap: var(--space-8); /* 56px→100px */
  align-items: start;
}

.p-news-archive__list {
  display: flex;
  flex-direction: column;
}

.p-news-archive__item {
  position: relative;
  padding-bottom: 20px;
}

.p-news-archive__item:not(:last-child) {
  margin-bottom: var(--space-3);
}

.p-news-archive__item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-image: radial-gradient(circle at 9.5px 3px, var(--color-blue-light) 3px, transparent 3px); /* タイル内でドットを中央に置き、左右の余白を均等にする */
  background-size: 19px 6px;
  background-repeat: round;
}

.p-news-archive__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.p-news-archive__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.p-news-archive__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-news-archive__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-en);
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
  color: var(--color-pink);
}

.p-news-archive__date-icon {
  width: 100%;
  max-width: 22px;
  height: auto;
}

.p-news-archive__title {
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.p-news-archive__link:hover .p-news-archive__title {
  color: var(--color-pink);
}

.p-news-archive__arrow {
  flex-shrink: 0;
  color: var(--color-pink);
  transition: scale 0.6s ease; /* ホバー開始・解除時に滑らかにする */
}

.p-news-archive__link:hover .p-news-archive__arrow {
  scale: 1.25;
}

.p-news-archive__empty {
  font-size: var(--font-size-2);
  color: var(--color-text);
}

.p-news-archive__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: var(--space-6);
}

.p-news-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  line-height: 1;
  font-family: var(--font-family-en);
  font-size: var(--font-size-2);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.p-news-archive__pagination .page-numbers.current {
  color: var(--color-pink);
}

.p-news-archive__pagination .page-numbers.prev,
.p-news-archive__pagination .page-numbers.next {
  --icon-size: 32px;
  font-size: 0; /* 文字(‹ ›)はフォントの縦位置メトリクスが数字と揃わないため非表示にし、矢印は::afterで描画する */
}

.p-news-archive__pagination .page-numbers.prev::after,
.p-news-archive__pagination .page-numbers.next::after {
  content: '';
  width: calc(var(--icon-size) * 0.28);
  height: calc(var(--icon-size) * 0.28);
  border-top: calc(var(--icon-size) * 0.09) solid var(--color-text); /* 斜め回転で線が細く見えるため、通常より太めの比率にする */
  border-right: calc(var(--icon-size) * 0.09) solid var(--color-text);
  /* border-top/rightで作った矢印は視覚的な重心が箱の中心からずれるため、回転前に補正する */
  transform: translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.p-news-archive__pagination .page-numbers.prev::after {
  transform: rotate(-135deg) translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.p-news-archive__pagination .page-numbers.next::after {
  transform: rotate(45deg) translate(calc(var(--icon-size) * -0.045), calc(var(--icon-size) * 0.045));
}

.p-news-archive__sidebar-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5); /* 20px→24px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--color-blue);
}

.p-news-archive__sidebar-label {
  margin-top: var(--space-1);
  font-family: var(--font-family-en);
  font-size: var(--font-size-1);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: var(--color-pink);
}

.p-news-archive__archive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.p-news-archive__archive-item {
  position: relative;
  padding-left: 14px;
}

.p-news-archive__archive-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
}

.p-news-archive__archive-item a {
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.p-news-archive__archive-item a:hover {
  color: var(--color-pink);
}

.p-news-archive__archive-item a.is-active {
  color: var(--color-pink);
  font-weight: 700;
}

@media (max-width: 900px) {
  .p-news-archive__layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Project: News Detail(お知らせ詳細ページ)
   ========================================================================== */
.p-news-detail__title {
  margin-top: clamp(1rem, 0.773rem + 0.97vw, 1.5rem); /* 16px→24px */
  font-family: var(--font-family-base); /* h2タグだが一覧の.p-news-archive__titleと同じ本文フォントに揃える */
  font-size: clamp(1.125rem, 0.955rem + 0.727vw, 1.5rem); /* 18px→24px(SPは一旦18px) */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-news-detail__divider {
  margin: clamp(0rem, -0.227rem + 0.97vw, 0.5rem) 0 0; /* 0px→8px。hrのUAデフォルト margin-inline:auto / margin-bottom を明示的にリセット */
  height: 3px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
}

.p-news-detail__body {
  margin-top: clamp(1rem, 0.773rem + 0.97vw, 1.5rem); /* 16px→24px */
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0;
  color: var(--color-text);
}

.c-btn__icon.c-btn__icon--prev::after {
  /* .c-btn__icon::afterと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  transform: rotate(-135deg) translate(calc(var(--icon-size) * -0.054), calc(var(--icon-size) * 0.054));
}

.c-post-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, -2.5rem + 10.417vw, 2.5rem); /* 20px→40px(576px→768px) */
  margin-top: 100px; /* 一旦の仮値 */
}

.c-post-nav__arrow {
  /* 「一覧に戻る」ボタン(.c-btn--outline-blue.p-news-detail__back)のheightと同じclamp式にして高さを常に揃える(48px→68px、576px→768px) */
  --icon-size: clamp(3rem, -0.75rem + 10.417vw, 4.25rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border: 2px solid var(--color-blue);
  border-radius: 12px;
  background-color: #fff;
  flex-shrink: 0;
}

.c-post-nav__arrow::after {
  content: '';
  width: calc(var(--icon-size) * 0.184);
  height: calc(var(--icon-size) * 0.184);
  border-top: calc(var(--icon-size) * 0.026) solid var(--color-blue);
  border-right: calc(var(--icon-size) * 0.026) solid var(--color-blue);
  /* border-top/rightで作った矢印は視覚的な重心が箱の中心からずれるため、回転前に補正する */
  transform: translate(calc(var(--icon-size) * -0.03), calc(var(--icon-size) * 0.03));
}

.c-post-nav__arrow--prev::after {
  transform: rotate(-135deg) translate(calc(var(--icon-size) * -0.03), calc(var(--icon-size) * 0.03));
}

.c-post-nav__arrow--next::after {
  transform: rotate(45deg) translate(calc(var(--icon-size) * -0.03), calc(var(--icon-size) * 0.03));
}

@media (max-width: 576px) {
  /* スマホで矢印2つ+「一覧に戻る」ボタンが1行に収まるよう、gap・矢印サイズ・ボタン幅を詰める */
  .c-post-nav {
    gap: 12px;
  }

  .c-post-nav__arrow {
    --icon-size: 48px;
    width: 48px;
    height: 48px;
  }
}

/* 塊影(Y4px/透過20%)。他ページのボタンでも使う汎用スタイルのため、対応する色ごとに用意している */
.c-btn--shadow-soft-blue {
  box-shadow: 0 4px 0 rgba(37, 69, 119, 0.2); /* var(--color-blue) 20% */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-btn--shadow-soft-blue:hover {
  box-shadow: none;
  transform: translateY(4px);
}

.c-btn--shadow-soft-pink {
  box-shadow: 0 4px 0 rgba(230, 50, 120, 0.2); /* var(--color-pink) 20% */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-btn--shadow-soft-pink:hover {
  box-shadow: none;
  transform: translateY(4px);
}

/* c-btn--outline-blue/pinkの既定box-shadowと詳細度が同じため、確実に上書きされるよう複合セレクタでも定義 */
.c-btn--outline-blue.c-btn--shadow-soft-blue {
  box-shadow: 0 4px 0 rgba(37, 69, 119, 0.2);
}

.c-btn--outline-blue.c-btn--shadow-soft-blue:hover {
  box-shadow: none;
  transform: translateY(4px);
}

.c-btn--outline-pink.c-btn--shadow-soft-pink {
  box-shadow: 0 4px 0 rgba(230, 50, 120, 0.2);
}

.c-btn--outline-pink.c-btn--shadow-soft-pink:hover {
  box-shadow: none;
  transform: translateY(4px);
}

/* お知らせ詳細ページの「一覧に戻る」ボタン専用。
   アイコン(左)・テキスト(中央)・アイコンと同じ幅のダミー要素(右)を並べ、
   position:absoluteを使わずflexだけでテキストを完全中央に保つ */
.c-btn--outline-blue.p-news-detail__back {
  /* 矢印ボタン(.c-post-nav__arrow)と同じclamp式で高さを揃える(48px→68px、576px→768px) */
  height: clamp(3rem, -0.75rem + 10.417vw, 4.25rem);
  padding-block: 0; /* heightで高さを直接指定するため、共通クラス(.c-btn--outline-blue/pink)のpadding-block(23px)を無効化 */
  padding-inline: 30px; /* 通常のvar(--space-4)ではなく固定値にする */
}

.p-news-detail__back-text {
  flex: 1;
  text-align: center;
}

.p-news-detail__back-spacer {
  width: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem); /* .c-btn__iconの--icon-sizeと同じ幅にして中央のバランスを取る */
  flex-shrink: 0;
}

@media (max-width: 576px) {
  /* ベースルール(padding-inline:30px)と詳細度が同じため、確実に上書きされるようベースの直後に置いている */
  .c-btn--outline-blue.p-news-detail__back {
    width: 180px; /* 通常のc-btn--outline-blue(240px)より狭くする。このページ専用のため他ページには影響しない */
    padding-block: 14px; /* line-height1×16px+border2px×2=20pxと合わせて高さ48px、矢印ボタンと揃える */
    padding-inline: 14px; /* 一旦の仮値。幅180pxでテキストが折り返さないよう詰める */
  }
}

/* ==========================================================================
   Project: Company
   ========================================================================== */
.p-company {
  padding-top: var(--space-8);
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保 */
}

.p-company__inner {
  display: flex;
  align-items: stretch; /* 写真の高さをテキスト側に自動で揃える */
  gap: clamp(1.5rem, -4.33rem + 10.37vw, 5rem); /* 900px:24px→1440px:80px */
  /* 画像はbody左端まで全幅ブリード。右側だけl-containerと同じ余白計算式で幅を揃える */
  padding-right: calc(max(0px, (100vw - var(--content-max-width)) / 2) + var(--content-padding));
}

@media (max-width: 768px) {
  .p-company__inner {
    flex-direction: column; /* DOM順(写真→body)のまま、写真を先に表示 */
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
  }
}

.p-company__photo {
  flex: 1; /* bodyは中身の幅のまま、余った幅は写真側で吸収して右端の余白を防ぐ */
  min-width: 0;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
}

.p-company__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* 右端の社名が切れないように右基準でクロップ */
}

@media (max-width: 768px) {
  .p-company__photo {
    aspect-ratio: 16 / 9; /* 縦積み時は少し低めにクロップ */
    border-radius: 20px;
  }

  .p-company__body > .c-btn {
    align-self: center; /* bodyはflex-direction:columnでstretchが効くため、ボタンだけ中央寄せにする */
  }
}

.p-company__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 40px */
  flex: 0 1 auto; /* 広幅ビューポートで間延びしないよう中身の幅を維持する */
  min-width: 0;
}

@media (min-width: 769px) and (max-width: 1100px) {
  /* 1100px未満は flex:1(余り分を写真に回す方式)だと写真がどんどん縮んで消えるため、写真5:テキスト5の比率で固定する */
  .p-company__photo {
    flex: 0 1 50%;
  }

  .p-company__body {
    flex: 0 1 50%;
  }
}

.p-company__name {
  font-size: clamp(1.5rem, 1.41rem + 0.38vw, 1.75rem); /* 24px→28px */
  font-weight: 500;
  line-height: var(--leading-normal); /* 150% */
  letter-spacing: 0.02em;
}

.p-company__address {
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

.p-company__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding-block: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: bold;
  line-height: var(--leading-none); /* 100% */
  letter-spacing: 0.02em;
  text-decoration: none;
}

.p-company__tag--map {
  margin-left: 4px;
  background-color: var(--color-pink);
  color: #fff;
  transition: opacity 0.2s ease;
}

.p-company__tag--map:hover {
  opacity: 0.7;
}

.p-company__tag--info {
  background-color: #FDEEF3; /* 目測での推定値。デザインデータで正確な値が分かり次第調整 */
  color: var(--color-pink);
  font-size: var(--font-size-1); /* 14px */
}

.p-company__hours-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-company__hours-row:not(:last-child) {
  margin-bottom: var(--space-2);
}

.p-company__hours-row dd {
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Project: Parking(駐車場検索ページ)
   ========================================================================== */
.p-parking-map {
  padding-top: var(--space-7); /* 48px→80px。他セクションの慣例に合わせた暫定値 */
  padding-bottom: var(--space-8); /* 56px→100px。次セクション(背景色付き)との間隔 */
}

.p-parking-map__heading,
.p-parking-guide__heading {
  text-align: center;
}

.p-parking-map__lead {
  margin-top: var(--space-6); /* 40px→60px */
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text);
}

.p-parking-map__image {
  position: relative;
  margin-top: var(--space-6); /* 40px→60px */
  aspect-ratio: 16 / 9; /* PCでは横長に、高さを抑える */
  overflow: hidden;
  border-radius: 12px;
}

.p-parking-map__image iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 576px) {
  .p-parking-map__image {
    aspect-ratio: 15 / 16; /* スマホでは高さを抑える */
  }
}

.p-parking-guide {
  padding-top: var(--space-8); /* 56px→100px。背景色の始まりからタイトルまで */
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保 */
  background-color: var(--color-bg-cream);
}

.p-parking-guide__card {
  display: flex;
  align-items: center;
  gap: var(--space-6); /* 40px→60px。暫定値 */
  max-width: var(--content-max-width);
  margin-top: var(--space-6); /* 40px→60px */
  margin-inline: auto;
  padding-block: 24px;
  padding-inline: clamp(1.25rem, 0.46rem + 3.38vw, 3.5rem); /* 20px→56px */
  background-color: #fff;
  border-radius: var(--radius-xl); /* 24px */
}

.p-parking-guide__illust {
  width: 100%;
  max-width: clamp(13.75rem, 12.21rem + 6.57vw, 18.125rem); /* 220px→290px */
  height: auto;
  flex-shrink: 0;
}

.p-parking-guide__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 20px→24px */
}

.p-parking-guide__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.p-parking-guide__check {
  width: 100%;
  max-width: 24px;
  height: auto;
  margin-top: 5px; /* 折り返し時も1行目のテキストと視覚的に中央が揃うよう微調整(line-height:1.8のため) */
  flex-shrink: 0;
}

.p-parking-guide__text {
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0;
  color: var(--color-text);
}

.p-parking-guide__highlight {
  font-size: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18px→20px */
  font-weight: bold;
  color: var(--color-pink);
}

.p-parking-guide__note {
  margin-top: var(--space-6); /* 40px→60px */
  font-size: clamp(1.125rem, 0.99rem + 0.56vw, 1.5rem); /* 18px→24px */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text);
}

.p-parking-guide .c-tel-btn {
  margin-top: var(--space-2); /* 16px */
}

@media (max-width: 768px) {
  .p-parking-guide__card {
    flex-direction: column;
    gap: 16px;
  }

  .p-parking-guide__illust {
    order: 2; /* 1カラム時はイラストを下に表示 */
  }

  .p-parking-guide__list {
    order: 1;
  }
}

/* ==========================================================================
   Component: Page KV Label(会社/店舗紹介ページ)
   ========================================================================== */
.c-page-kv__label.c-page-kv__label--company {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 4.083em; /* 原寸196×45pxを基準に、parking版と同じ考え方で算出 */
}

.c-page-kv__label.c-page-kv__label--about {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 4.083em; /* 原寸196×45px(company版と同サイズ) */
}

.c-page-kv__label.c-page-kv__label--rent {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 8.646em; /* 原寸415×44px */
}

.c-page-kv__label.c-page-kv__label--sale {
  width: 8.542em; /* 原寸410×44px */
}

.c-page-kv__heading.c-page-kv__heading--sale,
.c-page-kv__heading.c-page-kv__heading--contact,
.c-page-kv__heading.c-page-kv__heading--repair-request {
  /* .c-page-kv__headingと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  letter-spacing: 0.02em; /* 狭い画面でも1行に収まるよう詰めて調整 */
}

@media (max-width: 480px) {
  .c-page-kv__heading.c-page-kv__heading--sale,
  .c-page-kv__heading.c-page-kv__heading--contact,
  .c-page-kv__heading.c-page-kv__heading--repair-request {
    font-size: 26px; /* 380px幅でも改行しないよう固定値で縮小 */
  }
}

.c-page-kv__br--repair-request {
  display: none;
}

@media (max-width: 480px) {
  .c-page-kv__br--repair-request {
    display: inline;
  }
}

.c-page-kv__br--contact-confirm {
  display: none;
}

@media (max-width: 576px) {
  .c-page-kv__br--contact-confirm {
    display: inline;
  }
}

.c-page-kv__label.c-page-kv__label--repair {
  width: 5.375em; /* 原寸258×44px */
}

.c-page-kv__label.c-page-kv__label--contact {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 3.708em; /* 原寸178×45px */
}

.c-page-kv__label.c-page-kv__label--recruit {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 3.229em; /* 原寸155×44px */
}

.c-page-kv__label.c-page-kv__label--repair-request {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 10.438em; /* 原寸501×45px */
}

.c-page-kv__label.c-page-kv__label--404 {
  /* .c-page-kv__labelと同じ詳細度のため確実に上書きされるよう複合セレクタにしている */
  width: 7.146em; /* 原寸343×45px */
}

/* ==========================================================================
   Project: Store Vision(店舗紹介: 信頼・誠実の住まいアドバイザー)
   ========================================================================== */
.p-store-vision {
  position: relative;
  z-index: 0; /* イラスト(z-index:-1)を確実にこのセクション内だけで背面に沈めるため、スタッキングコンテキストを明示的に作る */
  padding-top: var(--space-7); /* 48px→80px。パンくず(padding-top 16px+アイコン24px)と合わせてピンク背景から120px相当になる */
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-store-vision::after {
  content: '';
  position: absolute;
  z-index: -1; /* 見出し・本文・写真より背面に表示する */
  top: calc((var(--space-2) + 24px) * -1); /* パンくず(padding-top 16px+アイコン24px)の分だけ引き上げ、イラスト上端をピンク背景のすぐ下に揃える */
  right: max(40px, calc((100% - var(--content-max-width)) / 2 + 40px)); /* l-container(最大1100px)の右外側から常に40pxの位置を維持する計算式。1100px以下はコンテナ=画面幅なのでrightは40px固定、1100px超はコンテナが中央寄せで外側へ離れていく分だけ増加させ、見出しとの位置関係が変わらないようにする */
  width: 52vw;
  min-width: 240px; /* 幅370px程度の小型デバイスを想定した下限 */
  max-width: 380px;
  aspect-ratio: 1232 / 1076;
  background-image: url('../images/about_top-illust01.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  pointer-events: none;
}

.p-store-vision > .l-container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.p-store-vision__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-6); /* 24px→32px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.p-store-vision__text {
  margin-top: var(--space-6); /* 40px→60px */
  margin-bottom: var(--space-6); /* 40px→60px */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 2.3; /* 230%。既存トークンに無い特殊値のためベタ書き */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-store-vision__photos {
  --photo-gap: clamp(0.75rem, 0.47rem + 1.4vw, 1.25rem); /* 12px→20px */
  display: flex;
  align-items: flex-start; /* 指定なし(stretch)だと2・4枚目のmargin-topでコンテナが縦に伸び、1・3枚目が引き伸ばされてしまうため */
  justify-content: center;
  gap: var(--photo-gap);
  padding-inline: var(--photo-gap); /* 画像が縮んで端に来た時も、画像間の間隔と同じ余白を画面端との間に保つ */
}

.p-store-vision__photo {
  width: 100%;
  min-width: 0; /* flexアイテムのmin-widthデフォルト(auto)は画像の元サイズが下限になり、max-widthで縮みきれず横にはみ出すため */
  max-width: 335px;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md); /* 8px */
}

.p-store-vision__photo:nth-child(2),
.p-store-vision__photo:nth-child(4) {
  margin-top: 53px;
}

@media (max-width: 768px) {
  .p-store-vision__photo:nth-child(2),
  .p-store-vision__photo:nth-child(4) {
    margin-top: 32px;
  }
}

@media (max-width: 576px) {
  .p-store-vision__photos {
    flex-wrap: wrap;
    row-gap: 0; /* 行間はmargin-topの調整だけで作るため0にする */
  }

  .p-store-vision__photo {
    width: calc(50% - clamp(0.375rem, 0.235rem + 0.7vw, 0.625rem)); /* gapの半分を差し引いた2カラム分の幅 */
  }

  .p-store-vision__photo:nth-child(2) {
    margin-top: 24px; /* ズレ演出(1枚目との段差) */
  }

  .p-store-vision__photo:nth-child(3) {
    margin-top: calc(var(--photo-gap) - 24px); /* マイナス値。1・3枚目の間の余白を1・2枚目の間(--photo-gap)と揃えるため引き上げる */
  }

  .p-store-vision__photo:nth-child(4) {
    margin-top: var(--photo-gap); /* 3枚目との段差(24px)を保ちつつ、2・4枚目の間の余白も--photo-gapに揃う */
  }

  .p-store-vision::after {
    /* スマホ(370px程度)では、上端をピンク背景に揃える計算式・コンテナ基準の右寄せ式ではなく固定値で位置決めする */
    top: 60px;
    right: 10px;
    width: 240px;
  }

  .p-store-vision__heading {
    line-height: 1.7;
  }
}

/* ==========================================================================
   Project: Store Greeting(店舗紹介: 代表挨拶)
   ========================================================================== */
.p-store-greeting {
  padding-top: calc(var(--space-8) * 2); /* 112px→200px */
  padding-bottom: var(--space-8); /* 56px→100px */
  margin-top: calc(var(--space-8) * -2); /* 112px→200px。背景(cream)だけを上のセクションの下までせり上げ、コンテンツの見た目の位置はpadding-topで元に戻す */
  background-color: var(--color-bg-cream);
}

.p-store-greeting__heading {
  text-align: center;
}

.p-store-greeting__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, -1.62rem + 5.96vw, 60px); /* 1カラムになる769pxで20px、1100px(l-containerの上限)以上で現行の60pxになるよう線形補間 */
  margin-top: var(--space-6); /* 40px→60px。タイトル下の余白は共通で60px */
}

.p-store-greeting__photo {
  width: clamp(354.5px, 11.19rem + 22.81vw, 430px); /* 769pxでcontent(flex:1)側と1:1(354.5px)になり、1100px(l-containerの上限)以上で現行の430pxになるよう線形補間 */
  flex-shrink: 0;
}

.p-store-greeting__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md); /* 8px */
}

.p-store-greeting__content {
  flex: 1;
}

.p-store-greeting__subtitle {
  margin-bottom: 24px;
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20px→24px。font-size-5と同じ値 */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-pink);
}

.p-store-greeting__subtitle-br {
  display: none; /* 980px以上・768px〜577pxでは改行なし */
}

@media (max-width: 980px) {
  .p-store-greeting__subtitle-br {
    display: inline;
  }
}

@media (max-width: 768px) {
  .p-store-greeting__subtitle-br {
    display: none;
  }
}

@media (max-width: 576px) {
  .p-store-greeting__subtitle-br {
    display: inline;
  }
}

.p-store-greeting__text {
  margin-bottom: 14px;
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 2.15; /* 215%。既存トークンに無い特殊値のためベタ書き */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-store-greeting__name {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: var(--space-6); /* 40px→60px */
}

.p-store-greeting__name-role,
.p-store-greeting__name-text {
  font-family: var(--font-family-serif);
  font-weight: bold;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-store-greeting__name-role {
  font-size: 14px;
}

.p-store-greeting__name-text {
  font-size: 18px;
}

.p-store-greeting__qualification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4); /* 24px→32px */
  padding: var(--space-4); /* 24px→32px。使用箇所が1箇所のため専用値 */
  background-color: #fff;
  border-radius: var(--radius-md); /* 8px */
}

.p-store-greeting__qualification-title {
  width: calc(clamp(200px, 5.36rem + 14.88vw, 300px) - var(--space-4) * 2); /* カード左端からテキスト開始位置までの合計を、768pxで200px→1440pxで300pxへ線形補間。そこからpadding-left・gap(共にvar(--space-4))を差し引いてtitleの実幅にする */
  flex-shrink: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 2; /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-blue);
}

.p-store-greeting__qualification-text {
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 2; /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .p-store-greeting__body {
    flex-direction: column;
    gap: 24px;
  }

  .p-store-greeting__photo {
    max-width: 100%;
    margin-inline: auto;
  }

  .p-store-greeting__qualification {
    flex-direction: column;
    gap: 8px;
  }

  .p-store-greeting__qualification-title {
    width: 100%;
  }

  .p-store-greeting__qualification-text {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .p-store-greeting {
    padding-top: calc(var(--space-8) * 4.5);
    margin-top: calc(var(--space-8) * -4.5);
  }

  .p-store-greeting__qualification {
    padding: 20px;
  }
}

/* ==========================================================================
   Project: Company Overview(店舗紹介: 会社概要)
   ========================================================================== */
.p-company-overview {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: var(--space-8); /* 56px→100px。沿革・アクセスセクションが後ろに続くため、波のオーバーラップ対応は最後のセクション(.p-access)側で行う */
}

.p-company-overview__heading {
  text-align: center;
  margin-bottom: var(--space-6); /* 40px→60px */
}

.p-company-overview__table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2.5px solid var(--color-cream);
  border-right: 2.5px solid var(--color-cream);
  border-bottom: 2.5px solid var(--color-cream);
}

.p-company-overview__table th,
.p-company-overview__table td {
  padding: 20px 40px;
  font-size: var(--font-size-2); /* 16px */
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  text-align: left;
  vertical-align: top;
}

.p-company-overview__table th {
  width: clamp(200px, -1.96rem + 30.12vw, 300px); /* 1カラムになる768pxで200px、1100px(l-containerの上限)以上で300pxになるよう線形補間 */
  font-weight: bold;
  color: var(--color-text);
  background-color: var(--color-cream);
  border-bottom: 1.5px solid #fff;
}

.p-company-overview__table td {
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1.5px solid var(--color-cream);
}

.p-company-overview__tel-link {
  color: inherit;
  text-decoration: none;
  pointer-events: none; /* PCでは発信できないためリンク化しない(768px以下でのみ有効化) */
}

.p-company-overview__table tr:last-child th {
  border-bottom: none;
}

.p-company-overview__table tr:last-child td {
  border-bottom: none;
}

.p-company-overview__address {
  display: flex;
  align-items: center;
  gap: 32px;
}

.p-company-overview__map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1); /* 8px */
  flex-shrink: 0;
  max-width: 240px;
  padding: 6px 26px;
  border-radius: var(--radius-full);
  background-color: var(--color-pink);
  box-shadow: 0 4px 0 rgba(230, 50, 120, 0.2); /* ピンク20%透明 */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.p-company-overview__map-link:hover {
  opacity: 0.7;
}

.p-company-overview__map-icon {
  width: 22px;
  height: 22px;
}

@media (max-width: 1200px) {
  .p-company-overview__address {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .p-company-overview__table,
  .p-company-overview__table tbody,
  .p-company-overview__table tr,
  .p-company-overview__table th,
  .p-company-overview__table td {
    display: block;
    width: 100%;
  }

  .p-company-overview__table {
    border-left: 2.5px solid var(--color-cream);
  }

  .p-company-overview__table th {
    padding: 8px 20px;
  }

  .p-company-overview__table td {
    padding: 10px 20px;
  }

  .p-company-overview__table td.p-company-overview__td--address {
    padding-bottom: 14px;
  }

  .p-company-overview__tel-link {
    pointer-events: auto;
    text-decoration: underline;
  }
}

/* ==========================================================================
   Project: Company History(店舗紹介: 沿革)
   ========================================================================== */
.p-history {
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-history__heading {
  text-align: center;
  margin-bottom: var(--space-6); /* 40px→60px */
}

.p-history__box {
  padding: 56px 32px 56px 80px;
  background-color: rgba(230, 50, 120, 0.05); /* ピンク5%透明 */
  border-radius: var(--radius-xl); /* 24px */
}

/* 沿革はACFリピーター(company_history)で件数可変のため、grid-auto-flow:columnで
   固定行数を指定する方式(行数が変わるたびに要調整だった)ではなく、PHP側で$half = ceil($total/2)により
   左右2つの.p-history__col(ul)に分割し、このgridには2カラム分だけ並べる構造にする */
.p-history__list {
  display: grid;
  grid-template-columns: 53fr 47fr; /* 左カラムの長いテキスト(社名変更)が折り返さないよう、デザイン実測比率(497:449)からさらに左を広げて調整 */
  align-items: start; /* 区切り線を実際の項目数分だけ伸ばすため、カラムの高さを揃えず中身の高さのままにする */
  column-gap: 40px;
  row-gap: 40px; /* 900px以下で1カラム化した時、2つの.p-history__col間の余白として使う */
}

/* 区切り線(::before)は.p-history__list全体ではなくカラム自身に付ける。
   これにより左右の項目数が違っても(奇数件時、右が1件少ない等)、各カラムの線が実際の項目数分だけの高さになる */
.p-history__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px; /* カラム内の項目間の余白(旧row-gapと同じ値) */
}

.p-history__col::before {
  content: '';
  position: absolute;
  top: 0;
  left: -32px; /* テキスト開始位置から32px左。左右カラムとも同じオフセットで揃う */
  width: 3.5px;
  height: 100%; /* align-items:startによりカラム自身の実高さ(=項目数分)と一致する */
  background-color: rgba(230, 50, 120, 0.9); /* ピンク90%透明 */
}

.p-history__item {
  display: grid;
  grid-template-columns: auto auto auto 1fr; /* 西暦・和暦(固定幅)・丸・テキストの順。テキストが折り返してもこの列の中で改行され、年の下に回り込まない */
  align-items: baseline;
}

.p-history__year {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-history__era {
  width: 96px; /* 文字数が変わっても丸(.p-history__dot)の位置が揃うよう固定幅にする(最長の「（昭和49年）」相当が収まる幅+実機フォントでの誤差分の余白) */
  flex-shrink: 0;
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
  white-space: nowrap; /* 幅に収まらなくても改行させない(丸の位置がずれるため) */
}

.p-history__dot {
  width: 10px;
  height: 10px;
  margin: 0 clamp(12px, -0.5rem + 2.22vw, 24px) 0 clamp(8px, -0.75rem + 2.22vw, 20px); /* 900px:0 12px 0 8px → 1440px:0 24px 0 20px */
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: rgba(37, 69, 119, 0.5); /* 青50%不透明 */
}

.p-history__text {
  min-width: 0; /* grid itemのデフォルト(auto)だと折り返さずはみ出すため */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-history__break {
  display: none; /* デスクトップ(grid)では不要。576px以下のflexでのみ改行スペーサーとして使う */
}

@media (max-width: 900px) {
  .p-history__list {
    grid-template-columns: 1fr;
    position: relative; /* 1カラム化したら2つの.p-history__colをまたぐ1本の線に切り替えるため、基準をリスト全体に戻す */
  }

  /* 1カラムでは左右2本ではなく、スタックした全体を通しで1本の線にする */
  .p-history__col::before {
    display: none;
  }

  .p-history__list::before {
    content: '';
    position: absolute;
    top: 0;
    left: -32px;
    width: 3.5px;
    height: 100%;
    background-color: rgba(230, 50, 120, 0.9); /* ピンク90%透明 */
  }

  .p-history__box {
    /* 1カラムになる900pxを起点に、576pxで指定値(40px 16px 40px 56px)になるようclampで補間 */
    padding: clamp(2.5rem, 0.72rem + 4.94vw, 3.5rem) clamp(1rem, -0.78rem + 4.94vw, 2rem) clamp(2.5rem, 0.72rem + 4.94vw, 3.5rem) clamp(3.5rem, 0.83rem + 7.41vw, 5rem);
  }
}

@media (max-width: 576px) {
  .p-history__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .p-history__year {
    font-size: 18px;
  }

  .p-history__era {
    width: 108px; /* year+eraで改行し丸(.p-history__dot)+textが2行目になるレイアウトでは96pxだと丸の位置が揺れるため108pxに広げる */
  }

  .p-history__break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }

  .p-history__list::before {
    left: -26px;
  }
}

/* ==========================================================================
   Project: Access(店舗紹介: アクセス)
   ========================================================================== */
.p-access {
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保。mainの最後のセクションのため */
}

.p-access__heading {
  text-align: center;
  margin-bottom: var(--space-6); /* 40px→60px */
}

.p-access__map {
  max-width: var(--content-max-width); /* 1100px。l-container内なので実質常に一致 */
  height: clamp(400px, 20rem + 13.89vw, 520px); /* 576px:400px → 1440px:520px */
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.p-access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Project: Sale FAQ(不動産売却をお考えの方へ: こんなお悩みありませんか？)
   ========================================================================== */
.p-sale-faq {
  padding-top: var(--space-7); /* 48px→80px。パンくずから続く1つ目のセクションのため他ページと同様の間隔 */
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-sale-faq__heading {
  text-align: center;
}

.p-sale-faq__title {
  letter-spacing: 0.02em; /* 370px幅でも改行しないよう、c-heading-mdの0.1emから調整 */
}

.p-sale-faq__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.472rem + 2.25vw, 2.5rem); /* 16px→40px */
  margin-top: var(--space-5); /* 40px。タイトル直下に付けず、コンテンツ側にマージントップとして付与 */
}

.p-sale-faq__balloon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* grid側で吹き出しの高さが揃うため、テキスト量が少ない吹き出しでも上揃えにする */
  padding-block: 20px;
  padding-inline: 30px;
  background-color: #F8F8F8;
  border-radius: 20px;
}

.p-sale-faq__balloon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 32px solid #F8F8F8;
  transform: translateX(-50%);
}

.p-sale-faq__balloon:nth-child(1)::after {
  left: auto;
  right: 20%;
  top: calc(100% - 6px); /* 吹き出し側に少し重ねて、傾けた時に隙間ができないように */
  border-top-width: 38px; /* 重ねた6px分を足して、突出の長さを中央と揃える */
  transform-origin: top; /* 吹き出しと接する上端を軸に回転させる */
  transform: rotate(-30deg);
}

.p-sale-faq__balloon:nth-child(3)::after {
  left: 20%;
  top: calc(100% - 6px); /* 吹き出し側に少し重ねて、傾けた時に隙間ができないように */
  border-top-width: 38px; /* 重ねた6px分を足して、突出の長さを中央と揃える */
  transform-origin: top; /* 吹き出しと接する上端を軸に回転させる */
  transform: rotate(30deg);
}

.p-sale-faq__group {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 吹き出し内の2項目の間隔 */
}

.p-sale-faq__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 0.412rem + 0.376vw, 0.75rem); /* 8px→12px */
}

.p-sale-faq__check {
  width: 100%;
  max-width: 20px;
  height: auto;
  flex-shrink: 0;
  margin-top: 2px; /* テキスト1行目と視覚的な中央を揃える */
}

.p-sale-faq__text {
  font-size: clamp(0.9375rem, 0.85rem + 0.375vw, 1.125rem); /* 15px→18px */
  font-weight: bold;
  line-height: 1.333; /* 24px/18px */
  letter-spacing: 0;
  color: var(--color-text);
}

.p-sale-faq__highlight {
  color: var(--color-pink);
}

.p-sale-faq__illust {
  width: 100%;
  max-width: 545px;
  height: auto;
  margin-top: var(--space-6); /* 40px→60px。暫定値 */
  margin-inline: auto;
}

@media (max-width: 768px) {
  .p-sale-faq__list {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .p-sale-faq__balloon {
    width: 74%;
    max-width: 340px; /* PC表示時の1列あたりの幅目安に合わせる */
    align-items: center; /* group を吹き出しの中央に */
  }

  .p-sale-faq__balloon:nth-child(1) {
    justify-self: start;
    margin-left: 8%; /* 端に張り付かないよう中央側に寄せる */
  }

  .p-sale-faq__balloon:nth-child(2) {
    justify-self: end;
    width: 64%;
    margin-right: 8%; /* 端に張り付かないよう中央側に寄せる */
  }

  .p-sale-faq__balloon:nth-child(3) {
    justify-self: start;
    margin-left: 8%; /* 端に張り付かないよう中央側に寄せる */
  }

  .p-sale-faq__illust {
    width: clamp(17.5rem, 1.7rem + 67.43vw, 34.0625rem); /* 280px→545px。375px〜768px基準 */
  }

  .p-sale-faq__balloon:nth-child(1)::after {
    left: 16%;
    right: auto;
  }

  .p-sale-faq__balloon:nth-child(2)::after {
    left: auto;
    right: 16%;
    top: calc(100% - 6px);
    border-top-width: 38px;
    transform-origin: top;
    transform: rotate(30deg);
  }

  .p-sale-faq__balloon:nth-child(3)::after {
    left: 16%;
    transform-origin: top;
    transform: rotate(-30deg);
  }
}

@media (max-width: 576px) {
  .p-sale-faq__check {
    max-width: 17px;
  }

  .p-sale-faq__balloon {
    padding: 20px;
  }

  .p-sale-faq__balloon:nth-child(1),
  .p-sale-faq__balloon:nth-child(2),
  .p-sale-faq__balloon:nth-child(3) {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ==========================================================================
   Project: Sale Point(不動産売却をお考えの方へ: 物件売却のポイント)
   ========================================================================== */
.p-sale-point {
  padding-block: var(--space-8); /* 56px→100px */
  background-color: var(--color-bg-cream);
}

.p-sale-point__heading {
  text-align: center;
}

.p-sale-point__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 40px→60px。01〜03の間隔 */
  margin-top: var(--space-6); /* 40px→60px。タイトル→コンテンツ */
}

.p-sale-point__item {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.357rem + 2.38vw, 2.5rem); /* 20px→40px。600px基準で最小値20pxに */
}

.p-sale-point__item:nth-child(even) {
  flex-direction: row-reverse;
}

.p-sale-point__photo {
  flex: 0 0 43%; /* 画像最大幅480px:テキスト幅の比率目安をそのまま%で管理 */
  min-width: 0;
}

.p-sale-point__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl); /* 24px */
}

.p-sale-point__body {
  flex: 1;
  min-width: 0;
}

.p-sale-point__subtitle {
  font-size: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem); /* 20px→28px */
}

.p-sale-point__text {
  margin-top: 12px; /* テキストとサブタイトル間の余白 */
  font-size: clamp(1rem, 0.93rem + 0.31vw, 1.125rem); /* 16px→18px */
  font-weight: 500;
  line-height: 2; /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .p-sale-point__photo {
    flex: 0 0 48%;
  }
}

@media (max-width: 576px) {
  .p-sale-point__item,
  .p-sale-point__item:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .p-sale-point__photo {
    flex-basis: auto;
    width: 100%;
    order: 1; /* 1カラム時は画像→テキストの順 */
  }

  .p-sale-point__body {
    order: 2;
  }

  .p-sale-point__body .c-numbered-heading__number,
  .p-sale-point__body .c-numbered-heading__subtitle {
    text-align: center;
  }

  .p-sale-point__body .c-numbered-heading__subtitle {
    margin-top: 0;
  }
}

/* ==========================================================================
   Project: Sale Flow(不動産売却をお考えの方へ: 不動産売却の流れ)
   ========================================================================== */
.p-sale-flow {
  padding-block: var(--space-8); /* 56px→100px */
}

.p-sale-flow__heading {
  text-align: center;
}

.p-sale-flow__list {
  margin-top: var(--space-6); /* 40px→60px。タイトル→コンテンツ */
}

.p-sale-flow__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px; /* ナンバー・サブタイトル部分とイラスト+テキスト部分の間隔 */
  padding: clamp(1.125rem, 1.03rem + 0.375vw, 1.5rem); /* 18px→24px */
  background-color: var(--color-pink-05);
  border-radius: var(--radius-xl); /* 24px */
}

.p-sale-flow__item-heading {
  text-align: center;
}

.p-sale-flow__row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.p-sale-flow__item:not(:last-child) {
  margin-bottom: var(--space-5); /* 28px→40px。矢印を挟むための間隔 */
}

.p-sale-flow__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: calc((var(--space-5) - 15px) / 2 - 5.3px); /* 矢印は箱の下半分にしか描かれない形のため、見た目の中心が間隔の中央に来るよう上に補正 */
  width: 15px;
  height: 15px;
  border-right: 2px solid #494949;
  border-bottom: 2px solid #494949;
  transform: translateX(-50%) rotate(45deg);
}

.p-sale-flow__illust {
  flex: 0 0 28%; /* テキスト側と同じ比率で縮むように、%指定+280pxで上限管理 */
  min-width: 0;
  max-width: 280px;
}

.p-sale-flow__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px; /* テキストと諸経費ボックスの間隔 */
}

.p-sale-flow__subtitle {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.5rem); /* 18px→24px */
}

.p-sale-flow__text {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 160% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .p-sale-flow__row {
    flex-direction: column;
    align-items: stretch;
  }

  .p-sale-flow__illust {
    flex-basis: auto; /* column方向ではflex-basisが高さに作用してしまうため解除 */
    width: clamp(12.5rem, 7.73rem + 20.36vw, 17.5rem); /* 200px→280px。375px〜768px基準 */
    align-self: center; /* テキストは全幅のまま、イラストだけ中央寄せ */
  }
}

/* Sale Flow内: 売却の際の諸経費(お引渡し(04)の枠内に入る補足ボックスのため矢印なし) */
.p-sale-expense {
  padding: 12px;
  background-color: #fff;
  border: 1px solid var(--color-pink);
}

.p-sale-expense__title {
  font-size: var(--font-size-1); /* 14px */
  font-weight: bold;
  color: var(--color-text);
}

.p-sale-expense__list {
  margin-top: 0.71em; /* 10px/14px。emで管理 */
  display: flex;
  flex-direction: column;
  gap: 0.71em; /* 10px/14px。emで管理 */
}

.p-sale-expense__label {
  font-size: var(--font-size-1); /* 14px */
  font-weight: bold;
  color: var(--color-text);
}

.p-sale-expense__dot {
  display: inline-block;
  width: 20px; /* descのpadding-leftと揃えて、下のテキストの開始位置を合わせる */
  color: var(--color-pink);
}

.p-sale-expense__desc {
  margin-top: 0.35em;
  padding-left: 20px; /* labelのテキスト開始位置と揃える */
  font-size: var(--font-size-1); /* 14px */
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}

/* ==========================================================================
   Project: Sale CTA(不動産売却をお考えの方へ: 牧昇土地なら)
   ========================================================================== */
.p-sale-cta {
  padding-top: 40px; /* このセクションのみ例外的に固定40px(他ページの最終セクションはvar(--space-8)) */
  padding-bottom: calc(8px + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらに8px分の余白を確保。mainの最後のセクションのため */
  background-color: #FAC6DA;
  text-align: center;
}

.p-sale-cta__heading {
  font-family: var(--font-family-heading);
  font-weight: bold;
  font-size: clamp(23px, 4.6875vw - 4px, 32px); /* 768px以上は32px固定→576pxで23pxへなめらかに縮小 */
  line-height: 1.53; /* 49px/32px */
  letter-spacing: 0;
  color: var(--color-text);
}

.p-sale-cta__heading-sm {
  font-size: 24px;
}

.p-sale-cta__highlight {
  color: var(--color-pink);
}

.p-sale-cta__note {
  margin-top: var(--space-4); /* 24px→32px */
  font-family: var(--font-family-base);
  font-weight: bold;
  font-size: 24px;
  line-height: 49px;
  letter-spacing: 0;
  color: var(--color-text);
}

.p-sale-cta__lead {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 24px;
  line-height: 49px;
  letter-spacing: 0;
  color: var(--color-text);
}

.p-sale-cta .c-tel-btn {
  margin-top: var(--space-4); /* 24px→32px */
}

@media (max-width: 576px) {
  .p-sale-cta__heading-sm {
    font-size: 18px;
  }

  .p-sale-cta__note,
  .p-sale-cta__lead {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   Project: Contact(物件お問い合わせフォーム)
   ========================================================================== */
.p-contact-lead {
  padding-top: var(--space-7); /* 48px→80px。パンくずから続く1つ目のセクションのため他ページと同様の間隔 */
  text-align: center;
}

.p-contact-lead__text {
  font-size: var(--font-size-5); /* 20px→24px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0;
  color: var(--color-text);
}

.p-contact-lead__br {
  display: none; /* フォームが1カラムに切り替わる900px以下でのみ改行(576px用は既存のu-br-spを使用) */
}

@media (max-width: 900px) {
  .p-contact-lead__br {
    display: inline;
  }
}

.p-contact-lead__notice {
  display: inline-block;
  margin-top: 12px; /* 使用箇所がここのみのため個別値 */
  padding: 0.5em 2em; /* 左右40px相当をemで管理(文字サイズ変化に追従) */
  border-radius: var(--radius-md);
  background-color: var(--color-pink-05);
  font-size: clamp(1rem, 0.913rem + 0.38vw, 1.25rem); /* 16px→20px。使用箇所がここのみのため個別clamp */
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-pink);
}

.p-contact-form {
  margin-top: var(--space-7); /* 48px→80px。背景色が始まる前の余白(セクション間の間隔) */
  padding-top: var(--space-7); /* 48px→80px。背景色が始まってからカードまでの余白 */
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保。mainの最後のセクションのため */
  background-color: var(--color-bg-cream);
}

.p-contact-form__card {
  padding: 2.5rem; /* 40px。root基準のrem指定 */
  border-radius: var(--radius-xl); /* 24px */
  background-color: #fff;
}

.p-contact-form__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

/* 確認画面ではCF7の[hidden ...]タグが各行の直後に隠しinputとして挟まり、隣接セレクタ(+)が
   効かなくなるため、間に何か挟まっても対象になる一般兄弟セレクタ(~)にしている */
.p-contact-form__row ~ .p-contact-form__row {
  margin-top: 2.5rem; /* 40px。root基準のrem指定 */
}

.p-contact-form__row--textarea {
  align-items: flex-start;
}

/* CF7設置後、入力欄はwpcf7-form-control-wrap(span)がここに入る想定。同じくflex:1指定が必要。
   basisを0%で固定するのは、.c-form-controlのwidth:100%や.p-contact-form__address-groupの
   content依存サイズなど、行によって基準がバラつくのを防ぎ、どの行も残り幅を均等に埋めるため */
.p-contact-form__row > input,
.p-contact-form__row > textarea,
.p-contact-form__row > .wpcf7-form-control-wrap,
.p-contact-form__row > .p-contact-form__address-group,
.p-contact-form__row > .p-contact-form__value {
  flex: 1 1 0%;
  min-width: 0;
}

/* CF7は各フィールドを<span class="wpcf7-form-control-wrap">で包んで出力するため、
   直下のinput/textareaにwidth:100%を指定しても親のwrap側の幅が定まらず縮んでしまう。
   wrap自体をブロック化して初めてwidth:100%が効くようにする */
.p-contact-form__row > .wpcf7-form-control-wrap {
  display: block;
}

.p-contact-form__label {
  display: flex;
  align-items: center;
  flex: 0 1 27%; /* 入力欄側と同じ比率で縮むよう%指定。262pxはmax-widthで頭打ちにする */
  max-width: 262px;
  min-width: 0; /* デフォルトのmin-width:autoだと項目テキストの長さ次第で縮み方が行ごとに変わってしまうため */
  gap: 10px;
}

.p-contact-form__row--textarea .p-contact-form__label {
  padding-top: 0.875em; /* .c-form-controlの縦paddingに合わせ、テキスト開始位置を揃える */
}

.p-contact-form__label-text {
  min-width: 0; /* 縮んだ際に折り返せるように(labelのbadge分を確実に確保するため) */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0;
  color: var(--color-text);
}

.p-contact-form__address-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-contact-form__postal {
  max-width: 200px; /* 郵便番号は他項目より短い入力欄 */
}

/* 確認画面用: .c-form-controlと同じpadding/font/line-heightで行の高さを揃えつつ、
   枠線・背景は持たせず入力内容をテキストとして表示するだけにする */
.p-contact-form__value {
  padding: 0.875em 1em;
  font-size: var(--font-size-2); /* 16px */
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.p-contact-form__submit {
  position: relative; /* wpcf7-spinnerをabsolute化する際の基準位置にする */
  margin-top: 5rem; /* 80px。root基準のrem指定 */
  text-align: center;
}

/* CF7は送信ボタンの直後に<span class="wpcf7-spinner">を自動追加する。これがtext-align:centerの
   行内ボックスとして幅計算に加わり、ボタン自体の中心がずれて見えるため、フローから外して
   送信ボタンの右外側に固定表示する(.p-contact-form__actions .wpcf7-spinnerと同じ考え方)。
   ボタン幅(.c-btn--outline-blueの280px/768px以下240px)の半分+gap8pxを基準に位置を計算している */
.p-contact-form__submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 148px; /* 280px(ボタン幅)の半分140px+gap8px */
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .p-contact-form__submit .wpcf7-spinner {
    margin-left: 128px; /* 768px以下のボタン幅240pxの半分120px+gap8px */
  }
}

/* 確認画面: 「前に戻る」「送信する」の横並びボタン。ボタン自体は他ページと同じ
   .c-btn--outline-blue / .c-btn--filled-blue(新規追加)を使い、配置だけをここで担当する */
.p-contact-form__actions {
  position: relative; /* wpcf7-spinnerをabsolute化する際の基準位置にする */
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 5rem; /* 80px。.p-contact-form__submitと同じ値 */
}

/* c-btn--outline-blue/filled-blueはjustify-content:space-betweenのため、アイコン+テキストの
   2要素だとテキストが片側に寄って見える。アイコンと同じ幅のダミー要素を反対側に置き、
   テキスト(flex:1+text-align:center)を挟むことで中央に保つ(p-news-detail__back-text/-spacerと同じ手法) */
.p-contact-form__actions-text {
  flex: 1;
  text-align: center;
}

.p-contact-form__actions-spacer {
  width: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem); /* .c-btn__iconの--icon-sizeと同じ幅 */
  flex-shrink: 0;
}

/* CF7は送信ボタンの直後に<span class="wpcf7-spinner">(送信中スピナー)を自動追加する。
   これがflexの3番目のアイテムとしてjustify-content:centerの計算に加わり、
   ボタン2つの中心がずれて見えるため、フローから外して送信ボタンの右外側に固定表示する */
.p-contact-form__actions .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 8px;
  transform: translateY(-50%);
}

@media (max-width: 576px) {
  .p-contact-form__actions {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 900px) {
  .p-contact-form__card {
    padding: var(--space-4); /* 24px→32px */
  }

  .p-contact-form__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1); /* 8px */
  }

  .p-contact-form__row--textarea .p-contact-form__label {
    padding-top: 0;
  }

  .p-contact-form__label {
    flex-basis: auto;
  }

  .p-contact-form__row > input,
  .p-contact-form__row > textarea,
  .p-contact-form__row > .wpcf7-form-control-wrap,
  .p-contact-form__row > .p-contact-form__address-group,
  .p-contact-form__row > .p-contact-form__value {
    width: 100%;
  }
}

/* CF7の必須項目エラー文言(「入力してください。」等)。デフォルトの赤(#dc3232)から
   デザインのピンクに変更。.p-contact-form配下に絞ることでCF7側のCSSより確実に優先させる */
.p-contact-form .wpcf7-not-valid-tip {
  font-weight: bold;
  color: var(--color-pink);
}

/* CF7の送信結果メッセージ(上部の「入力内容に問題があります。」等)。
   デフォルトは状態(invalid/sent/failed等)ごとに枠線の色が変わる作りなので、
   !importantで確実に枠を消し、文字色だけピンクにする */
.p-contact-form .wpcf7-response-output {
  border: none !important;
  text-align: center;
  font-weight: bold;
  color: var(--color-pink);
}

#autozip {
  display: none !important;
}

/* ==========================================================================
   Component: Icon Card(アイコン+タイトル+テキストの白/ピンクカード。about.htmlの強み・お客様への約束で使用)
   ========================================================================== */
.c-icon-card {
  flex: 1;
  background-color: #fff;
  border-radius: var(--radius-xl); /* 24px */
  padding: var(--space-3); /* 20px→24px。一旦rootで対応 */
}

.c-icon-card--pink {
  background-color: var(--color-pink-05);
}

.c-icon-card__icon {
  display: flex;
  justify-content: center;
}

.c-icon-card__icon img {
  max-width: 60px;
}

.c-icon-card__title {
  margin-top: var(--space-1); /* 8px */
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem); /* 20px→24px */
  font-weight: 500;
  line-height: var(--leading-normal); /* 150% */
  letter-spacing: 0.02em;
  color: var(--color-pink);
}

.c-icon-card__text {
  margin-top: clamp(0.75rem, 0.574rem + 0.751vw, 1.25rem); /* 12px→20px */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 160%。既存トークンに無い特殊値のためベタ書き */
  letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  .c-icon-card {
    width: 100%;
    max-width: 425px; /* 1カラム時に全幅まで広がらないよう上限を設定。l-containerの余白がなくなるまでは425pxを維持し、それ以下はwidth:100%で追従する */
  }
}

/* ==========================================================================
   Project: About(牧昇土地について)
   ========================================================================== */
.p-about-intro {
  padding-top: var(--space-7); /* 48px→80px。パンくずと合わせてピンク背景から120px相当に(他ページのファーストセクションと同じ考え方) */
  padding-bottom: var(--space-8); /* 56px→100px。下のセクションとの間隔 */
}

.p-about-intro__heading {
  text-align: center;
}

.p-about-intro__text {
  margin-top: var(--space-6); /* 40px→60px */
  text-align: center;
  font-size: clamp(1.125rem, 1.025rem + 0.5vw, 1.375rem); /* 18px→22px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-about-intro__highlight {
  font-weight: bold;
  color: var(--color-pink);
  background: linear-gradient(transparent 60%, rgba(230, 50, 120, 0.1) 60%); /* var(--color-pink) 10% */
}

.p-about-intro__br {
  display: none;
}

@media (min-width: 481px) and (max-width: 765px) {
  .p-about-intro__br {
    display: inline;
  }
}

@media (max-width: 480px) {
  .p-about-intro__br--480 {
    display: none;
  }
}

.p-about-history {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: var(--space-8); /* 56px→100px */
  background-color: var(--color-bg-cream);
}

.p-about-history__heading {
  text-align: center;
  margin-bottom: var(--space-6); /* 40px→60px */
}

.p-about-history__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5); /* 28px→40px。gap40px指定を一旦既存トークン(最大値40px)で管理 */
}

.p-about-history__photo,
.p-about-history__content {
  flex: 1; /* 写真とテキストエリアの比率1:1 */
}

.p-about-history__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl); /* 24px */
}

.p-about-history__text {
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-about-history__text + .p-about-history__text {
  margin-top: var(--space-3); /* 20px→24px。一旦rootで対応 */
}

@media (max-width: 980px) {
  .p-about-history__body {
    flex-direction: column;
  }
}

.p-about-mission {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-about-mission__heading {
  text-align: center;
  margin-bottom: var(--space-6); /* 40px→60px */
}

.p-about-mission__text {
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem); /* 20px→24px */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.p-about-strengths {
  padding-top: var(--space-8); /* 56px→100px。歴史セクションと共通 */
  padding-bottom: var(--space-8); /* 56px→100px */
  background-color: var(--color-bg-cream);
}

.p-about-strengths__heading {
  text-align: center;
}

.p-about-strengths__list {
  display: flex;
  gap: var(--space-5); /* 28px→40px。一旦rootで対応 */
  margin-top: var(--space-6); /* 40px→60px */
}

@media (max-width: 980px) {
  .p-about-strengths__list {
    flex-direction: column;
    align-items: center;
  }
}

.p-about-services {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-about-services__heading {
  text-align: center;
}

.p-about-services__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 40px→60px */
  margin-top: var(--space-6); /* 40px→60px */
}

.p-about-services__item {
  display: flex;
  align-items: center;
  gap: var(--space-5); /* 28px→40px。一旦rootで対応 */
  padding: var(--space-5); /* 28px→40px。一旦rootで対応 */
  background-color: var(--color-pink-05);
  border-radius: var(--radius-xl); /* 24px */
}

.p-about-services__item--reverse {
  flex-direction: row-reverse;
}

.p-about-services__photo {
  flex: 1;
  max-width: 480px;
}

.p-about-services__photo img {
  width: 100%;
  border-radius: var(--radius-xl); /* 24px */
}

.p-about-services__content {
  flex: 1;
}

.p-about-services__title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem); /* 22px→28px */
  font-weight: 500;
  line-height: var(--leading-normal); /* 150% */
  letter-spacing: 0.02em;
  color: var(--color-pink);
}

.p-about-services__text {
  margin-top: 12px; /* 使用箇所1箇所のためベタ書き */
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

.p-about-services__button {
  margin-top: var(--space-4); /* 24px→32px */
}

@media (max-width: 768px) {
  .p-about-services__item,
  .p-about-services__item--reverse {
    flex-direction: column;
    align-items: stretch; /* 1カラム時、contentが中身の幅で中央寄りに縮まないよう全幅にして左揃えにする */
    padding: var(--space-4);
  }

  .p-about-services__photo {
    max-width: 100%;
  }
}

.p-about-area {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: var(--space-8); /* 56px→100px */
  background-color: var(--color-bg-cream);
}

.p-about-area__heading {
  text-align: center;
}

.p-about-area__map {
  margin-top: var(--space-6); /* 40px→60px */
}

.p-about-area__map img {
  width: 100%;
}

.p-about-area__text {
  margin-top: var(--space-4); /* 24px→32px */
  text-align: center;
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

@media (max-width: 576px) {
  .p-about-area__text {
    line-height: var(--leading-relaxed); /* 170% */
  }
}

.p-about-promise {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-about-promise__heading {
  text-align: center;
}

.p-about-promise__list {
  display: flex;
  gap: var(--space-5); /* 28px→40px。一旦rootで対応 */
  margin-top: var(--space-6); /* 40px→60px */
}

@media (max-width: 980px) {
  .p-about-promise__list {
    flex-direction: column;
    align-items: center;
  }
}

.p-about-promise__lead {
  margin-top: var(--space-6); /* 40px→60px */
  text-align: center;
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

.p-about-promise__photo {
  margin-top: var(--space-5); /* 28px→40px */
}

.p-about-promise__photo img {
  width: 100%;
  aspect-ratio: 1100 / 400; /* 幅が狭くなっても比率を保つ(max-heightだと狭い画面で自然な縦横比に戻り縦長に見えるため) */
  object-fit: cover;
  border-radius: var(--radius-xl); /* 24px */
}

@media (max-width: 576px) {
  .p-about-promise__photo img {
    aspect-ratio: 2 / 1; /* スマホはPC比率(2.75:1)だと窮屈なため、暫定値として少し縦長に */
  }
}

.p-about-shop {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 56px→100px+波のオーバーラップ分。mainの最後のセクションのため付与 */
  background-color: var(--color-bg-cream);
}

.p-about-shop__inner {
  display: flex;
  align-items: stretch; /* 写真の高さをテキスト側に自動で揃える。トップページの.p-company__innerと同じ構造 */
  gap: clamp(1.5rem, -4.33rem + 10.37vw, 5rem); /* 900px:24px→1440px:80px */
  /* 画像はbody左端まで全幅ブリード。右側だけl-containerと同じ余白計算式で幅を揃える(1100px幅は無視する) */
  padding-right: calc(max(0px, (100vw - var(--content-max-width)) / 2) + var(--content-padding));
}

@media (max-width: 768px) {
  .p-about-shop__inner {
    flex-direction: column; /* DOM順(写真→body)のまま、写真を先に表示 */
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
  }
}

.p-about-shop__photo {
  flex: 1; /* contentは中身の幅のまま、余った幅は写真側で吸収して右端の余白を防ぐ */
  min-width: 0;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
}

.p-about-shop__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* 右端が切れないように右基準でクロップ */
}

@media (max-width: 768px) {
  .p-about-shop__photo {
    aspect-ratio: 16 / 9; /* 縦積み時は少し低めにクロップ */
    border-radius: 20px;
  }
}

.p-about-shop__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 40px。トップページの.p-company__bodyと同じ値 */
  flex: 0 1 auto; /* 広幅ビューポートで間延びしないよう中身の幅を維持する */
  min-width: 0;
}

@media (min-width: 769px) and (max-width: 1100px) {
  /* 1100px未満は写真5:テキスト5の比率で固定する。トップページの.p-company同様の対応 */
  .p-about-shop__photo {
    flex: 0 1 50%;
  }

  .p-about-shop__content {
    flex: 0 1 50%;
  }
}

.p-about-shop__name {
  font-size: clamp(1.5rem, 1.41rem + 0.38vw, 1.75rem); /* 24px→28px。トップページの.p-company__nameと共通 */
  font-weight: 500;
  line-height: var(--leading-normal); /* 150% */
  letter-spacing: 0.02em;
}

.p-about-shop__address {
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

.p-about-shop__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  margin-left: 4px;
  padding-block: var(--space-1);
  border-radius: var(--radius-sm);
  background-color: var(--color-pink);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: var(--leading-none); /* 100% */
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.p-about-shop__tag:hover {
  opacity: 0.7;
}

.p-about-shop__access-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.p-about-shop__access-row:not(:last-child) {
  margin-bottom: var(--space-2);
}

.p-about-shop__access-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  padding-block: var(--space-1);
  border-radius: var(--radius-sm);
  background-color: #FDEEF3; /* .p-company__tag--infoと同じ薄いピンク */
  color: var(--color-pink);
  font-size: var(--font-size-1); /* 14px */
  font-weight: bold;
  line-height: var(--leading-none); /* 100% */
  letter-spacing: 0.02em;
}

.p-about-shop__access-text {
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Project: Recruit Intro(採用情報: はじめのセクション)
   ========================================================================== */
.p-recruit-intro {
  padding-top: var(--space-7); /* 48px→80px。パンくずから続く1つ目のセクションのため他ページと同様の間隔 */
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-recruit-intro__photo {
  display: block;
  width: 100%;
  height: clamp(200px, 6.03rem + 27.6vw, 400px); /* 200px→400px(375px→1100pxで計算。1100px以上は400px固定でキープするため) */
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-xl); /* 24px */
}

.p-recruit-intro__text {
  margin-top: var(--space-5); /* 28px→40px */
  text-align: center;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16px→18px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ==========================================================================
   Project: Recruit Appeal(採用情報: アピールポイント)
   ========================================================================== */
.p-recruit-appeal {
  padding-block: var(--space-8); /* 56px→100px */
  background-color: var(--color-bg-cream);
}

.p-recruit-appeal__heading {
  text-align: center;
}

.p-recruit-appeal__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 0.357rem + 2.38vw, 2.5rem); /* 20px→40px。.p-sale-point__itemと同じ考え方 */
  margin-top: var(--space-6); /* 40px→60px。タイトル→コンテンツ */
}

.p-recruit-appeal__photo {
  flex: 0 0 auto;
  min-width: 0;
}

.p-recruit-appeal__photo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  border-radius: var(--radius-xl); /* 24px */
}

.p-recruit-appeal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 28px→40px。01〜03の間隔 */
  flex: 1;
  min-width: 0;
}

.p-recruit-appeal__subtitle {
  font-size: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem); /* 20px→28px。.p-sale-point__subtitleと同じ */
}

.p-recruit-appeal__text {
  margin-top: 12px; /* .p-sale-point__textと同じ、サブタイトルとの間隔 */
  font-size: clamp(1rem, 0.93rem + 0.31vw, 1.125rem); /* 16px→18px */
  font-weight: 500;
  line-height: 2; /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

@media (max-width: 1100px) {
  .p-recruit-appeal__photo {
    flex: 1; /* コンテナ幅(1100px)を下回ったら、写真もリストと同じflex:1で1:1の比率で追従させる */
    min-width: 0;
  }

  .p-recruit-appeal__photo img {
    width: 100%;
    max-height: none; /* 1100px以下は幅に応じた比率で追従させるため上限を外す */
  }
}

@media (max-width: 768px) {
  .p-recruit-appeal__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .p-recruit-appeal__photo img {
    width: 100%;
    height: clamp(240px, 5.46rem + 40.7vw, 400px); /* 240px→400px(375px→768pxで計算。このルール自体が768px以下でのみ有効なため) */
    object-fit: cover;
    object-position: center; /* 上部が切れてもよいため中央基準でトリミング */
  }

  .p-recruit-appeal__item {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .p-recruit-appeal__text {
    text-align: left;
  }

  .p-recruit-appeal__item .c-numbered-heading__subtitle {
    margin-top: 0;
  }
}

/* ==========================================================================
   Project: Recruit Job(採用情報: 募集要項)
   ========================================================================== */
.p-recruit-job {
  padding-block: var(--space-8); /* 56px→100px */
}

.p-recruit-job__heading {
  text-align: center;
}

.p-recruit-job__empty {
  margin-top: var(--space-6); /* 40px→60px */
  text-align: center;
  font-size: var(--font-size-3); /* 18px */
  font-weight: 500;
  color: var(--color-text);
}

.p-recruit-job__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 40px→60px。募集要項間の間隔 */
  margin-top: var(--space-6); /* 40px→60px。タイトル→コンテンツ */
}

.p-recruit-job__item {
  padding: var(--space-5); /* 28px→40px */
  border-radius: var(--radius-xl); /* 24px */
  background-color: var(--color-pink-05);
}

.p-recruit-job__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-recruit-job__badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: clamp(2px, 0.081rem + 0.19vw, 4px) clamp(8px, 0.412rem + 0.38vw, 12px); /* 2px 8px→4px 12px。nameの縮小に合わせて枠だけ調整(可読性のためfont-sizeは固定のまま) */
  border: 1px solid var(--color-pink);
  font-size: var(--font-size-1); /* 14px */
  font-weight: bold;
  letter-spacing: 0;
  color: var(--color-pink);
  white-space: nowrap;
}

.p-recruit-job__name {
  font-size: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem); /* 20px→24px */
  font-weight: bold;
  letter-spacing: 0;
  color: var(--color-pink);
}

.p-recruit-job__rows {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .p-recruit-job__rows {
    margin-top: 0;
  }
}

.p-recruit-job__row {
  display: flex;
  align-items: baseline;
  padding-block: 24px;
  border-bottom: 1px solid rgba(37, 69, 119, 0.2); /* var(--color-blue) 20%。賃貸・売買の詳細ページ(.c-property-detail__row)と同じ下線 */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: var(--leading-loose); /* 200% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-recruit-job__row-label {
  flex-shrink: 0;
  width: clamp(8.25rem, 32%, 12.5rem); /* 132px→200px。.c-property-detail__row-labelと同じ考え方で上限のみ200pxに調整 */
  padding-right: 16px;
}

.p-recruit-job__row-value {
  flex: 1;
  min-width: 0;
}

@media (max-width: 576px) {
  .p-recruit-job__row-label {
    width: clamp(100px, 32%, 12.5rem); /* スマホでは下限を132px→100pxに下げ、value列の幅を確保する */
  }
}

/* ==========================================================================
   Project: Recruit Flow(採用情報: 採用の流れ)
   ========================================================================== */
.p-recruit-flow {
  padding-top: var(--space-8); /* 56px→100px */
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保。mainの最後のセクションのため */
  background-color: var(--color-bg-cream);
}

.p-recruit-flow__heading {
  text-align: center;
}

.p-recruit-flow__list {
  display: flex;
  gap: var(--space-5); /* 28px→40px */
  margin-top: var(--space-6); /* 40px→60px。タイトル→コンテンツ */
}

.p-recruit-flow__item {
  /* item-heading内の数字→サブタイトルの間隔は.c-numbered-heading__subtitleのmargin-top(8px)に任せる。
     アピールポイントと同じ余白感にするため、ここではgapを持たせない */
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-3); /* 20px→24px */
  border-radius: var(--radius-xl); /* 24px */
  background-color: #fff;
}

.p-recruit-flow__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-5) / 2 - 5.3px); /* 矢印は右下半分にしか描かれない形のため、見た目の中心が間隔の中央に来るよう左に補正(.p-sale-flowと同じ考え方) */
  width: 15px;
  height: 15px;
  border-right: 2px solid #494949;
  border-bottom: 2px solid #494949;
  transform: translate(-50%, -50%) rotate(-45deg); /* .p-sale-flowの矢印と同じ形で、向きだけ右向きにしている */
}

.p-recruit-flow__subtitle {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.5rem); /* 18px→24px */
}

.p-recruit-flow__text {
  margin-top: clamp(1rem, 0.91rem + 0.38vw, 1.25rem); /* 16px→20px。サブタイトルとテキストの間隔 */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 160% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-recruit-flow__address {
  margin-top: 20px; /* テキストとの間隔。.p-recruit-flow__textと同じ考え方 */
  padding: 12px;
  background-color: var(--color-bg-cream);
}

.p-recruit-flow__address-text {
  font-size: var(--font-size-1); /* 14px */
  font-weight: 500;
  line-height: 1.6; /* 160% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .p-recruit-flow__list {
    flex-direction: column;
  }

  .p-recruit-flow__item {
    width: 100%; /* margin-inline: autoでstretchが効かなくなり内容幅まで縮むため、明示的に指定 */
    max-width: 500px;
    margin-inline: auto;
  }

  .p-recruit-flow__item-heading {
    text-align: center;
  }

  .p-recruit-flow__text {
    text-align: center;
  }

  .p-recruit-flow__item:not(:last-child)::after {
    top: calc(100% + var(--space-5) / 2 - 5.3px); /* PC版と同じ補正を上下方向に適用 */
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); /* 縦積み時は下向きに変える */
  }
}

/* ==========================================================================
   Project: Repair Request Password(管理物件の修繕依頼はこちら: パスワード未入力時のフォーム)
   ========================================================================== */
.p-repair-request-password {
  padding-top: var(--space-7); /* 48px→80px。パンくずから続く1つ目のセクションのため他ページと同様の間隔 */
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保。mainの最後のセクションのため */
}

/* ==========================================================================
   Project: Repair Request Line(管理物件の修繕依頼はこちら: LINEでかんたん修繕依頼)
   ========================================================================== */
.p-repair-request-line {
  padding-top: var(--space-7); /* 48px→80px。パンくずから続く1つ目のセクションのため他ページと同様の間隔 */
  padding-bottom: var(--space-8); /* 56px→100px */
}

.p-repair-request-line__heading {
  text-align: center;
}

.p-repair-request-line__text {
  margin-top: var(--space-6); /* 40px→60px。タイトル→テキスト */
  text-align: center;
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-repair-request-line__br {
  display: none;
}

.p-repair-request-line__body {
  display: flex;
  align-items: center;
  gap: var(--space-6); /* 40px→60px。イラストとボックスの間 */
  max-width: 850px;
  margin-top: var(--space-6); /* 40px→60px。テキスト→下のコンテンツ */
  margin-inline: auto;
}

.p-repair-request-line__illust {
  flex: 4.5; /* イラスト:ボックス = 4.5:5.5 */
  min-width: 0;
  width: 100%;
  max-width: 370px;
  height: auto;
  display: block;
}

.p-repair-request-line__box {
  flex: 5.5; /* イラスト:ボックス = 4.5:5.5 */
  min-width: 0;
}

.p-repair-request-line__box-title {
  padding-bottom: 12px; /* 文字と下線の距離 */
  border-bottom: 3px solid var(--color-pink);
  font-family: var(--font-family-heading);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5; /* 150% */
  letter-spacing: 0.1em;
  color: var(--color-pink);
}

.p-repair-request-line__list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* リストアイテム間 */
  margin-top: 16px; /* 下線→リスト */
}

.p-repair-request-line__item {
  display: flex;
  align-items: center;
  gap: 8px; /* チェックボックス→テキスト */
}

.p-repair-request-line__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.p-repair-request-line__item-text {
  font-size: var(--font-size-2); /* 16px */
  font-weight: bold;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-repair-request-line__notice {
  margin-top: 20px; /* リスト→注意書き */
  padding: 16px 16px 16px 32px; /* 左だけ32px(上のリストのチェックアイコン24px+間隔8px分)にして、テキストの開始位置をリストと揃える */
  border-radius: 12px;
  background-color: var(--color-pink-05);
}

.p-repair-request-line__notice-text {
  font-size: var(--font-size-2); /* 16px */
  font-weight: bold;
  line-height: 1.4; /* 140% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-repair-request-line__notice-tel {
  margin-top: 8px; /* テキスト→電話番号 */
  font-size: var(--font-size-2); /* 16px */
  font-weight: bold;
  line-height: 1.4; /* 140% */
  letter-spacing: 0.02em;
}

.p-repair-request-line__notice-tel a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
}

.p-repair-request-line__tel-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .p-repair-request-line__br {
    display: inline;
  }

  .p-repair-request-line__body {
    flex-direction: column;
    align-items: stretch;
    max-width: 500px;
  }

  .p-repair-request-line__illust {
    max-width: clamp(270px, 28.74vw + 149.3px, 370px); /* 768pxで370px(PC時と同じ)→420pxで270pxへなめらかに縮小 */
    margin-inline: auto;
  }
}

/* ==========================================================================
   Project: Repair Request Flow(管理物件の修繕依頼はこちら: 手順はかんたん3ステップ)
   ========================================================================== */
.p-repair-request-flow {
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保。mainの最後のセクションのため */
  /* padding-topは持たせない。前セクション(.p-repair-request-line)のpadding-bottomと重複して間隔が2倍になるため(.p-company-overview→.p-historyと同じ考え方) */
}

.p-repair-request-flow__heading {
  text-align: center;
}

.p-repair-request-flow__list {
  margin-top: var(--space-6); /* 40px→60px。タイトル→コンテンツ */
}

.p-repair-request-flow__item {
  /* カード自体(背景/角丸/矢印)は.p-sale-flow__itemと同じ。中身のレイアウトのみステップごとに専用実装 */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 28px→40px。サブタイトル→下のコンテンツ */
  padding-block: var(--space-5); /* 28px→40px */
  padding-inline: clamp(1.125rem, 1.03rem + 0.375vw, 1.5rem); /* 18px→24px */
  background-color: var(--color-pink-05);
  border-radius: var(--radius-xl); /* 24px */
  text-align: center;
}

.p-repair-request-flow__item-heading {
  text-align: center;
}

.p-repair-request-flow__item:not(:last-child) {
  margin-bottom: var(--space-5); /* 28px→40px。矢印を挟むための間隔 */
}

.p-repair-request-flow__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: calc((var(--space-5) - 15px) / 2 - 5.3px); /* 矢印は箱の下半分にしか描かれない形のため、見た目の中心が間隔の中央に来るよう上に補正(.p-sale-flowと同じ考え方) */
  width: 15px;
  height: 15px;
  border-right: 2px solid #494949;
  border-bottom: 2px solid #494949;
  transform: translateX(-50%) rotate(45deg);
}

.p-repair-request-flow__item.p-repair-request-flow__item--no-arrow::after {
  /* .p-repair-request-flow__item:not(:last-child)::afterと同じ詳細度のため、確実に上書きされるよう複合セレクタにしている */
  content: none; /* 03と4つ目の要素(お客様へのご返信)の間は矢印なしにするため */
}

.p-repair-request-flow__subtitle {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.5rem); /* 18px→24px。.p-sale-flow__subtitleと同じ */
}

/* Step 01: LINE友だち追加(スマートフォンの方/パソコンの方) */
.p-repair-request-flow__devices {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.p-repair-request-flow__device {
  flex: 1;
  min-width: 0;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background-color: #fff;
}

.p-repair-request-flow__device-label {
  width: 100%;
  padding-block: 6px;
  border-radius: 2px;
  background-color: var(--color-blue-light);
  font-size: var(--font-size-2); /* 16px */
  font-weight: bold;
  color: var(--color-blue);
}

.p-repair-request-flow__device-text {
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-repair-request-flow__device-image {
  display: block;
  margin-top: auto; /* ラベル・テキストは上揃えのまま、画像だけ残りの余白内で縦中央に来るように */
  margin-inline: auto;
  margin-bottom: auto;
  height: auto;
}

.p-repair-request-flow__device-image img {
  display: block;
  width: 100%;
  height: auto;
}

.p-repair-request-flow__device-image--friend {
  max-width: 150px;
}

.p-repair-request-flow__device-image--qr {
  max-width: 100px;
}

/* Step 02・03: イラスト+テキスト */
.p-repair-request-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* イラスト→テキスト */
}

.p-repair-request-flow__step-illust {
  display: block;
  height: auto;
}

.p-repair-request-flow__step-illust--02 {
  width: 100%; /* max-widthだけだとコンテナより広い場合に親からはみ出すため、widthも指定してコンテナ内で可変させる */
  max-width: 350px;
}

.p-repair-request-flow__step-illust--03 {
  width: 100%;
  max-width: 170px;
}

.p-repair-request-flow__step-text {
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 160% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* Step 03: コピー&ペースト用ボックス */
.p-repair-request-flow__copy-box {
  width: 100%;
  max-width: 750px;
  margin-top: calc(20px - var(--space-5)); /* 親.itemのgap(var(--space-5))を打ち消して、上の要素との間隔を20px固定にする */
  margin-inline: auto;
  padding: 24px; /* 左右は1100px以下で幅可変時も24pxを下限として確保するため、外側のl-containerとは別にこのボックス自体にも持たせている */
  border: 1px solid var(--color-pink);
  background-color: #fff;
}

.p-repair-request-flow__copy-inner {
  /* 見出し・リストをまとめて中身の幅に合わせて中央寄せし、内部は左揃えにすることで開始位置を揃える */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  margin-inline: auto;
}

.p-repair-request-flow__copy-heading {
  display: flex;
  align-items: flex-start; /* テキストが2行になった時、アイコンを1行目に揃える */
  gap: 4px;
  text-align: left; /* .p-repair-request-flow__itemのtext-align: centerを打ち消す(2行目が中央寄せにならないようにする) */
  font-size: var(--font-size-2); /* 16px */
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-repair-request-flow__copy-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-repair-request-flow__copy-list {
  display: flex;
  flex-direction: column;
  margin-top: 16px; /* 見出し→下のコンテンツ(リスト)との距離 */
  gap: 8px;
  text-align: left; /* .p-repair-request-flow__itemのtext-align: centerを打ち消す */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  color: var(--color-text);
}

/* Step 03: 当社からお客様へご返信 */
.p-repair-request-flow__reply {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-repair-request-flow__reply-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1); /* 8px。c-numbered-heading__subtitleの数字→サブタイトルの間隔と同じ */
  font-family: var(--font-family-heading);
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.5rem); /* 18px→24px */
  font-weight: bold;
  color: var(--color-pink);
}

.p-repair-request-flow__reply-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-repair-request-flow__reply-text {
  margin-top: calc(20px - var(--space-5)); /* 親.itemのgap(var(--space-5))を打ち消して、見出しとの間隔を20px固定にする */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 160% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-repair-request-flow__reply-notice {
  width: 100%;
  max-width: 500px;
  margin-top: calc(16px - var(--space-5)); /* 親.itemのgap(var(--space-5))を打ち消して、テキストとの間隔を16px固定にする */
  margin-inline: auto;
  padding: 6px 24px; /* 上下6px。左右は1100px以下で幅可変時も24pxを下限として確保するため、copy-boxと同じ考え方でこのボックス自体にも持たせている */
  border: 1px solid var(--color-pink);
  background-color: #fff;
}

.p-repair-request-flow__reply-notice-text {
  font-size: var(--font-size-1); /* 14px */
  font-weight: bold;
  line-height: 1.8; /* 180% */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.p-repair-request-flow__br--980 {
  display: none;
}

@media (max-width: 980px) {
  .p-repair-request-flow__br--980 {
    display: inline;
  }
}

@media (max-width: 576px) {
  .p-repair-request-flow__devices {
    flex-direction: column;
    align-items: center; /* max-width:300pxで頭打ちになったdeviceが左寄せにならないよう中央揃え */
  }

  .p-repair-request-flow__device {
    width: 100%; /* align-items:centerだと幅がコンテンツに合わせて縮む(219px程度)ため、明示的に100%を指定してmax-width:300pxまで広げる */
  }

  .p-repair-request-flow__reply-text,
  .p-repair-request-flow__step-text {
    text-align: left; /* .p-repair-request-flow__itemのtext-align: centerを打ち消す */
  }

  .p-repair-request-flow__reply-notice-text {
    width: fit-content; /* テキストのボックス自体をコンテンツ幅にして中央寄せし、中は左揃えで改行時の開始位置を揃える */
    margin-inline: auto;
    text-align: left;
  }

  .p-repair-request-flow__reply-text .p-repair-request-flow__br--980,
  .p-repair-request-flow__step-text .p-repair-request-flow__br--980 {
    display: none; /* 980px以下用の改行を、576px以下では入れない */
  }

  .p-repair-request-flow__step-illust--02 {
    max-width: 270px;
  }
}

/* ==========================================================================
   Project: Not Found(404: ページが見つかりません)
   ========================================================================== */
.p-not-found {
  padding-top: var(--space-7); /* 48px→80px。パンくずが無いページのため、他ページの1つ目のセクションよりは詰めた間隔にしている */
  padding-bottom: calc(var(--space-8) + var(--footer-wave-overlap)); /* 波(.l-footer__wave)のオーバーラップ分を吸収した上で、さらにspace-8分の余白を確保。mainの最後のセクションのため */
  text-align: center;
}

.p-not-found__text {
  /* .p-store-vision__text(会社概要)と同じサイズ・行間・余白感 */
  margin-top: var(--space-6); /* 40px→60px */
  margin-bottom: var(--space-6); /* 40px→60px */
  font-size: var(--font-size-2); /* 16px */
  font-weight: 500;
  line-height: 2.3; /* 230%。.p-store-vision__textと同じ特殊値 */
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ==========================================================================
   Utility: Font
   ========================================================================== */
.u-font-en {
  font-family: var(--font-family-en);
}

/* ==========================================================================
   Utility: Icon color(インラインSVGのfill="currentColor"をcolorで色分け)
   ========================================================================== */
.icon-pink svg {
  color: var(--color-pink);
  transition: color 0.6s ease;
}

.icon-blue svg {
  color: var(--color-blue);
  transition: color 0.6s ease;
}

/* ==========================================================================
   Utility: Line break(ブレイクポイントで表示/非表示を切り替える改行)
   ========================================================================== */
.u-br-sp {
  display: none;
}

.u-br-pc {
  display: inline;
}

.u-br-tab {
  display: none;
}

@media (max-width: 768px) {
  .u-br-tab {
    display: inline;
  }
}

@media (max-width: 576px) {
  .u-br-sp {
    display: inline;
  }

  .u-br-pc {
    display: none;
  }
}

/* ==========================================================================
   Utility: Scroll Fade(画面に入ったタイミングでフェードイン+上昇する演出。
   is-visibleはJS側で付与)
   ========================================================================== */
.js-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
  お部屋探しはLINEから
========================================================================== */
/* カラム親要素 */
.equal-height-columns {
  display: flex !important;
}

/* 左右のカラム */
.equal-height-columns > .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
}

/* 内側のグループ（灰色のエリア）を高さ100%に強制 */
.equal-height-columns .wp-block-group {
  height: 100% !important;
  box-sizing: border-box !important;
}