/* =====================================================
   style.css（index.html 固有スタイル）
   モバイルファースト設計
   基本スタイル（モバイル） → min-width で拡張

   ブレークポイント
     sm  : min-width: 481px
     md  : min-width: 769px
     lg  : min-width: 1025px
===================================================== */

/* =====================================================
   PAGE TRANSITION
   ページ遷移時、遷移先のページがふわっと表示される
   （body 全体を 0 → 1 にフェードイン）
===================================================== */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageFadeIn 0.6s ease-out both;
}

/* OSで「視差効果を減らす」設定の方にはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}

/* =====================================================
   HAMBURGER MENU FIX（共通CSS側の不具合対応）
   メニュー開閉時、真ん中の線が消える際に左右両端が
   「点」として残ってしまう問題を防ぐため、opacityで
   完全に非表示にする。
   状態クラス名が不明なため、よく使われる候補をまとめて対応。
===================================================== */
.hbg.on span:nth-child(2),
.hbg.active span:nth-child(2),
.hbg.open span:nth-child(2),
.hbg.is-open span:nth-child(2),
.hbg.is-active span:nth-child(2),
.hbg[aria-expanded="true"] span:nth-child(2) {
  opacity: 0 !important;
}

/* =====================================================
   HERO
===================================================== */

/* モバイル基本 */
.hero {
  margin-top: var(--hh);
  min-height: 560px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

@media (min-width: 769px) {
  .hero {
    min-height: 600px;
  }
}

@media (min-width: 1025px) {
  .hero {
    height: calc(100vh - var(--hh));
    min-height: 500px;
  }
}

/* 背景写真：透過なし（フル表示） */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/mv-img.jpg');
  background-size: cover;
  background-position: center;
}

/* #1F1203 を透過率25%でオーバーレイ */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(31, 18, 3, 0.25);
}

/* コンテンツラッパー：モバイル基本 */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px 20px;
  display: flex;
  align-items: center;
}

@media (min-width: 769px) {
  .hero-inner {
    padding: clamp(44px, 6vh, 72px) 40px;
  }
}

@media (min-width: 1025px) {
  .hero-inner {
    max-width: 1520px;
    margin: 0 auto;
    padding: clamp(44px, 6vh, 72px) 60px;
  }
}

/* モバイル基本：幅いっぱい */
.hero-content {
  max-width: 100%;
}

@media (min-width: 1025px) {
  .hero-content {
    max-width: 760px;
  }
}

/* ヒーローコンテンツ：ファーストビューアニメーション */
.hero-catch,
.hero-sub,
.hero-cta {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-catch.fv-on,
.hero-sub.fv-on,
.hero-cta.fv-on {
  opacity: 1;
}

.hero-catch {
  font-family: var(--mincho);
  font-size: clamp(2rem, 7.5vw, 2.8rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-shadow: 0 2px 14px rgba(0,0,0,0.22);
  margin-bottom: 12px;
}

@media (min-width: 1025px) {
  .hero-catch {
    font-size: clamp(2.2rem, 5.8vw, 3.8rem);
  }
}

/* 「上質」をゴールドに */
.hero-gold {
  color: var(--gold);
}

.hero-sub {
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.06em;
  line-height: 1.9;
  margin-bottom: 32px;
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 1025px) {
  .hero-sub {
    font-size: 1.25rem; /* 20px */
  }
}

.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  gap: 0;
  background: var(--gold);
  color: #fff;
  padding: 16px 52px 16px 32px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  transition: background 0.25s, opacity 1.2s ease;
}
.hero-cta .arr {
  position: absolute;
  right: 12px;
}
.hero-cta:hover {
  background: var(--gold-dk);
}

@media (min-width: 1025px) {
  .hero-cta {
    font-size: 1rem;
    min-width: 240px;
    padding: 18px 64px 18px 40px;
  }
  .hero-cta .arr {
    right: 14px;
  }
}

/* =====================================================
   CONCEPT
===================================================== */

/* モバイル基本 */
.concept {
  background-color: #F0EBE2;
  background-image: url('../images/concept-bg.jpg');
  background-size: cover;
  background-position: 25%;
  position: relative;
  overflow: visible;
  padding: 80px 0 88px;
}

/* 背景画像の上に #FFF を透過して重ねる */
.concept::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  z-index: 0;
}

/* セクション下部 中央縦線 */
.concept::after {
  content: '';
  position: absolute;
  bottom: -55px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100px;
  background: var(--text);
  z-index: 2;
}

@media (min-width: 1025px) {
  .concept {
    padding: 112px 0 120px;
  }
}

/* 斜めの白いブロック：不要のため非表示 */
.concept-deco {
  display: none;
}

.concept-deco2 {
  display: none;
}

/* モバイル基本 */
.concept-in {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

@media (min-width: 1025px) {
  .concept-in {
    max-width: 900px;
    padding: 0 60px;
  }
}

.concept-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  margin-bottom: 30px;
}

/* 日本語ラベル */
.concept-label .ja {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* 英語ラベル */
.concept-label .en {
  font-family: var(--mincho);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* concept-sub：モバイル基本 */
.concept-sub {
  font-family: var(--mincho);
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 30px;
}

@media (min-width: 1025px) {
  .concept-sub {
    font-size: 2.25rem; /* 36px */
  }
}

.concept-body {
  font-size: 0.875rem;
  color: var(--text-lt);
  line-height: 2.4;
  letter-spacing: 0.06em;
  text-align: left;
  font-weight: 400;
}

@media (min-width: 1025px) {
  .concept-body {
    text-align: center;
  }
}

/* =====================================================
   SUPPORT
===================================================== */

/* モバイル基本 */
.support {
  padding: 80px 0;
  background: var(--white);
  overflow: hidden;
}

@media (min-width: 1025px) {
  .support {
    padding: 160px 0 112px;
  }
}

/* モバイル基本：1カラム */
.support-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1025px) {
  .support-in {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.sup-badge {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* 左カラム：h2背景デコの基準 */
.sup-left {
  position: relative;
}

/* h2見出しと重なる背景色ブロック：上端・左端いっぱいまで */
.sup-left::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -100vw;
  right: 0;
  height: 240px;
  background: var(--off);
  z-index: 0;
}

@media (min-width: 1025px) {
  .sup-left::before {
    top: -160px;
    height: 370px;
  }
}

.sup-title {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.8vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.75;
  color: var(--text-lt);
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

/* 「それぞれの暮らし」ゴールドカラー */
.sup-title-gold {
  color: var(--gold);
}

.sup-body {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
  line-height: 2.1;
  letter-spacing: 0.01em;
  margin-top: 65px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

/* サポートメニュー */
.sup-menu {
  display: flex;
  flex-direction: column;
}
.sup-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--greige);
  cursor: pointer;
  transition: opacity 0.3s;
  text-decoration: none;
  color: inherit;
}
.sup-item:first-child {
  border-top: 1px solid var(--greige);
}
.sup-item:hover {
  opacity: 0.72;
}

/* アイコンのみ（丸なし） */
.sup-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sup-dot svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}

.sup-item-body {
  flex: 1;
}
.sup-item-t {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.sup-item-d {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
}
.sup-item-arr {
  display: none;
}

/* sup-item内のarrはゆっくりスライド＋カラー変化 */
.sup-item .arr {
  color: var(--gold);
  margin-right: 12px;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.3s ease;
}
.sup-item:hover .arr {
  color: var(--gold);
  transform: translateX(6px);
}

/* =====================================================
   HACO SELECT
===================================================== */

/* モバイル基本 */
.hs {
  padding: 80px 0;
  background: #F8F8F8;
}

@media (min-width: 1025px) {
  .hs {
    padding: 112px 0;
  }
}

/* セクション共通見出し */
.sec-head {
  margin-bottom: 0;
}
.sec-badge {
  font-size: 0.812rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  display: block;
  font-weight: 400;
  line-height: 1;
}
.sec-head h2 {
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* タブ */
.hs-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--greige);
  margin: 32px 0 70px;
}

/* モバイル基本 */
.hs-tab {
  padding: 12px 28px;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  color: var(--text-lt);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s, border-color 0.25s;
  font-weight: 500;
}

@media (min-width: 1025px) {
  .hs-tab {
    padding: 12px 40px;
    font-size: 1.25rem;
  }
}

.hs-tab .tab-en {
  font-weight: 400;
}
.hs-tab .tab-ja {
  font-size: 0.875rem;
  font-weight: 400;
}
.hs-tab.on {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* パネル */
.hs-panel {
  display: none;
}
.hs-panel.on {
  display: block;
}

/* 物件カードグリッド：モバイル基本 1カラム */
.prop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

@media (min-width: 769px) {
  .prop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1025px) {
  .prop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
  }
}

.prop-card {
  border: 1px solid #E9E8E5;
  background: var(--white);
  overflow: hidden;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s, transform 0.3s;
}
.prop-card:hover {
  box-shadow: 0 10px 30px rgba(58,53,48,0.1);
  transform: translateY(-3px);
}

/* 物件画像エリア（実装時は img タグに差し替え） */
.prop-img {
  height: 300px;
  position: relative;
  background: linear-gradient(145deg, #DEDAD4, #CECAC4);
  background-size: cover;
  background-position: center;
}
.prop-img.v2 {
  background: linear-gradient(145deg, #D4D0CA, #C4C0BA);
}
.prop-img.v3 {
  background: linear-gradient(145deg, #E0DCD6, #D0CCC6);
}

/* バッジ：左上角にピタッと */
.prop-bdg {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gold);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  padding: 4px 20px;
  font-weight: 300;
}
.prop-bdg.dark {
  background: var(--dark);
}

.prop-body {
  padding: 30px 18px 30px;
}
.prop-type {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 3px;
}
.prop-name {
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.5;
}
.prop-addr {
  font-size: 0.75rem;
  color: var(--text-lt);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* マップアイコン：黒塗り */
.prop-addr svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: var(--text);
  stroke: none;
}
/* ボーダートップなし */
.prop-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 10px;
  border-top: none;
  flex-wrap: wrap;
}
.prop-price {
  font-family: var(--sans);
  font-size: 1.1875rem;
}
.prop-unit {
  font-size: 0.75rem;
  color: var(--text-lt);
}
.prop-spec {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-lt);
}
.prop-tags {
  display: flex;
  gap: 5px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.prop-tag {
  font-size: 0.75rem;
  color: var(--text-lt);
  border: 1px solid var(--greige);
  padding: 2px 7px;
  letter-spacing: 0.06em;
}

/* PC: 物件カード内部の余白・フォントを広めに */
@media (min-width: 1025px) {
  .prop-body {
    padding: 34px 28px 32px;
  }
  .prop-name {
    font-size: 1rem;
    margin-bottom: 6px;
  }
  .prop-addr {
    font-size: 0.8125rem;
    margin-bottom: 16px;
    gap: 6px;
  }
  .prop-addr svg {
    width: 14px;
    height: 14px;
  }
  .prop-price-row {
    gap: 8px;
    padding-top: 12px;
  }
  .prop-price {
    font-size: 1.375rem;
  }
  .prop-unit,
  .prop-spec {
    font-size: 0.8125rem;
  }
  .prop-tags {
    margin-top: 34px;
    gap: 6px;
  }
  .prop-tag {
    font-size: 0.8125rem;
    padding: 3px 10px;
  }
}

.hs-cta {
  text-align: center;
}

/* =====================================================
   BUY / SELL
===================================================== */
.buy-sell {
  position: relative;
}

/* 疑似要素の左右背景：モバイルでは非表示 */
.buy-sell::before {
  display: none;
}
.buy-sell::after {
  display: none;
}

@media (min-width: 1025px) {
  /* Buy（左半分）の全幅背景 */
  .buy-sell::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    background: #F0EBE2;
    z-index: 0;
  }

  /* Sell（右半分）の全幅背景 */
  .buy-sell::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: var(--sell);
    z-index: 0;
  }
}

/* モバイル基本：1カラム */
.buy-sell-grid {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  .buy-sell-grid {
    max-width: 1520px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
  }
}

/* ゾーン共通 */
.zone-badge {
  width: 100%;
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 0.875rem;
  letter-spacing: 0.09em;
  padding: 5px 30px;
  margin-bottom: 20px;
  font-weight: 400;
}

@media (min-width: 1025px) {
  .zone-badge {
    margin-bottom: 32px;
  }
}
.zone-sub {
  display: block;
  font-size: 0.875rem;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0.1em;
}
/* 「選ぶ」「売りたい」ゴールド */
.zone-sub-gold {
  color: var(--gold);
}

/* =====================================================
   セクション H2 共通スタイル
   .zone-title（Buy/Sell）/ .ct-title（Contact）に適用
   ※ haco select の .sec-head h2 に合わせて統一
===================================================== */
h2.zone-title,
h2.ct-title {
  font-family: var(--mincho);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* モバイル基本 */
.zone-title {
  font-size: 2rem;
  color: var(--text);
  margin-bottom: 12px;
}

/* Sell側は白 */
.sell-zone .zone-title {
  color: #fff;
}

@media (min-width: 769px) {
  .zone-title {
    font-size: 1.8rem;
  }
}

@media (min-width: 1025px) {
  .zone-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: 0;
  }
}

.zone-lead {
  margin-bottom: 24px;
  font-size: clamp(0.95rem, 1.6vw, 1.18rem);
  color: var(--text);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

@media (min-width: 1025px) {
  .zone-lead {
    margin-bottom: 40px;
  }
}

/* 「心地よく暮らせる」ゴールド */
.zone-lead-gold {
  color: var(--gold);
}

.zone-sep {
  width: 100%;
  height: 1px;
  background: #707070;
  margin: 24px 0;
}

@media (min-width: 1025px) {
  .zone-sep {
    margin: 40px 0;
  }
}

/* ---- BUY ---- */

/* モバイル基本：背景色を直接指定 */
.buy-zone {
  background: #E9E8E5;
  padding: 48px 20px 52px;
}

@media (min-width: 769px) {
  .buy-zone {
    padding: 48px 44px 56px;
  }
}

@media (min-width: 1025px) {
  .buy-zone {
    background: transparent;
    padding: 80px 80px 88px;
  }
}

.buy-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

@media (min-width: 1025px) {
  .buy-list {
    gap: 24px;
    margin-bottom: 44px;
  }
}
.buy-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 30px;
  background: var(--white);
  border: 1px solid rgba(196,162,106,0.16);
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s;
  text-decoration: none;
  color: inherit;
}
.buy-item:hover {
  border-color: var(--gold);
  transform: translateX(3px);
}
/* アイコンのみ（丸なし） */
.buy-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buy-dot svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}
.buy-item-body {
  flex: 1;
}
.buy-item-t {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 1px;
}
.buy-item-d {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
}
.buy-item-arr {
  display: none;
}

/* ---- SELL ---- */

/* モバイル基本：背景色を直接指定 */
.sell-zone {
  background: var(--sell);
  padding: 48px 20px 52px;
}

@media (min-width: 769px) {
  .sell-zone {
    padding: 48px 44px 56px;
  }
}

@media (min-width: 1025px) {
  .sell-zone {
    background: transparent;
    padding: 80px 80px 88px;
  }
}

.sell-zone .zone-title,
.sell-zone h2.zone-title {
  color: #fff !important;
}
.sell-zone .zone-sub {
  color: rgba(255,255,255,0.5);
}
.sell-zone .zone-sub-gold {
  color: var(--gold-lt);
}
.sell-zone .zone-sep {
  background: #fff;
}

/* sell-lead：ゴシック体 */
.sell-lead {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.6vw, 1.18rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.85;
  margin-bottom: 40px;
}
/* 「まず知りたい」ゴールド */
.sell-lead-gold {
  color: var(--gold-lt);
}

/* sell-listをbuy-listと同じデザインに統一 */
.sell-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

@media (min-width: 1025px) {
  .sell-list {
    gap: 24px;
    margin-bottom: 44px;
  }
}
.sell-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 30px;
  background: var(--white);
  border: 1px solid rgba(196,162,106,0.16);
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s;
  text-decoration: none;
  color: inherit;
}
.sell-item:hover {
  border-color: var(--gold);
  transform: translateX(3px);
}
/* アイコンのみ（丸なし） */
.sell-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sell-dot svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}
.sell-item-body {
  flex: 1;
}
.sell-item-t {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 1px;
}
.sell-item-d {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
}
.sell-item-arr {
  display: none;
}

/* =====================================================
   HOW TO
===================================================== */

/* モバイル基本 */
.howto {
  padding: 80px 0;
  background: var(--white);
}

@media (min-width: 1025px) {
  .howto {
    padding: 112px 0;
  }
}

/* How To 見出し（haco select h2 に統一） */
.howto .sec-head h2 {
  font-family: var(--mincho);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* モバイル基本：2カラム */
/* モバイル基本：縦並び（左に丸・右にテキスト・縦線） */
.howto-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-top: 52px;
}

@media (min-width: 769px) {
  .howto-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1025px) {
  .howto-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

/* ステップ間の横線：デスクトップのみ */
.howto-steps::before {
  display: none;
}

@media (min-width: 1025px) {
  .howto-steps::before {
    content: '';
    display: block;
    position: absolute;
    top: 44px;
    left: calc(12.5% + 4px);
    right: calc(12.5% + 4px);
    height: 1px;
    background: rgba(196,162,106,0.32);
  }
}

/* モバイル基本：左丸・右テキスト */
.h-step {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    padding: 0 0 0 8px;
    position: relative;
}

/* モバイル縦線：丸の中央から次のステップへ */
.h-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(8px + 26px); /* padding-left + circle半径 */
  top: 52px;
  bottom: -40px;
  width: 1px;
  background: rgba(196,162,106,0.32);
}

@media (min-width: 769px) {
  .h-step {
    display: block;
    text-align: center;
    padding: 0 8px;
  }
  .h-step:not(:last-child)::after {
    display: none;
  }
}

@media (min-width: 1025px) {
  .h-step {
    padding: 0 14px;
  }
}

/* ステップ本体コンテンツ（モバイルで右側に並ぶ） */
.h-step-body {
  flex: 1;
}

@media (min-width: 769px) {
  .h-step-body {
    flex: none;
    padding-top: 0;
  }
}

.step-circle {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--white);
  font-family: var(--mincho);
  font-size: 0.96rem;
  font-weight: 400;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  letter-spacing: 0.04em;
}

@media (min-width: 769px) {
  .step-circle {
    margin: 0 auto 20px;
  }
}

@media (min-width: 1025px) {
  .step-circle {
    width: 88px;
    height: 88px;
    font-size: 1.2rem;
    margin: 0 auto 28px;
  }
}

.step-t {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-bottom: 8px;
}

@media (min-width: 1025px) {
  .step-t {
    font-size: 1rem;
    margin-bottom: 12px;
  }
}

.step-d {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.85;
}

@media (min-width: 1025px) {
  .step-d {
    font-size: 0.875rem;
  }
}

/* モバイルでの各ステップ間の余白 */
.h-step {
  padding-bottom: 60px;
}
.h-step:last-child {
  padding-bottom: 0;
}

@media (min-width: 769px) {
  .h-step {
    padding-bottom: 0;
  }
}
.howto-note {
  text-align: center;
  margin-top: 48px;
  font-family: var(--mincho);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--text-lt);
}

/* =====================================================
   CONTACT BAND
===================================================== */
.contact-band {
  background: transparent;
  padding: 0 20px;
  position: relative;
  z-index: 0;
}

/* フッター背景色を、Contact帯の下半分の背後に全幅で回り込ませる
   （Contact帯のちょうど半分の高さ・画面全幅。下のフッター背景と連続） */
.contact-band::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 50%;
  background: #ECEBE8; /* footer と同色 */
  z-index: -1;
}

@media (min-width: 769px) {
  .contact-band {
    padding: 0 40px;
  }
}

@media (min-width: 1025px) {
  .contact-band {
    padding: 0 60px;
  }
}

/* 背景画像コンテナ：左右余白の内側に画像を表示 */
.contact-band-inner {
  position: relative;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
}

/* 背景画像 */
.contact-band-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/contact-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* 背景を暗くするオーバーレイ */
.contact-band-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(58, 50, 44, 0.62);
  z-index: 1;
}

/* モバイル基本：1カラム */
.contact-in {
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "left"
    "desc"
    "btns";
  gap: 16px;
  position: relative;
  z-index: 2;
}

@media (min-width: 769px) {
  .contact-in {
    padding: 48px 40px;
    gap: 20px;
  }
}

@media (min-width: 1025px) {
  .contact-in {
    max-width: 1000px;
    padding: 48px 60px;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left desc"
      "btns btns";
    gap: 0 80px;
    row-gap: 32px;
  }
}

.ct-left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ct-desc {
  grid-area: desc;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 2.0;
  letter-spacing: 0.06em;
  align-self: center;
}

/* sec-badge と同じスタイル */
.ct-label {
    font-size: 0.812rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    display: block;
    font-weight: 400;
    line-height: 1;
}
/* sec-head h2 と同じスタイル（色はfff維持） */
.ct-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: #fff;
}

/* モバイル基本：縦並び・中央 */
.ct-btns {
  grid-area: btns;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1025px) {
  .ct-btns {
    flex-direction: row;
    justify-content: center;
    gap: 100px;
  }
}

/* モバイル基本 */
.ct-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 52px 16px 32px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: #fff;
  width: 100%;
  max-width: 280px;
}
.ct-btn .arr {
  position: absolute;
  right: 12px;
}

@media (min-width: 1025px) {
  .ct-btn {
    font-size: 1rem;
    padding: 23px 52px 23px 32px;
    max-width: none;
    flex: 1;
  }
  .ct-btn .arr {
    right: 14px;
  }
}

.ct-btn-line {
  background: var(--green);
  transition: opacity 0.25s;
}
.ct-btn-line:hover {
  opacity: 0.85;
}
.ct-btn-form {
  background: var(--gold);
  transition: background 0.25s;
}
.ct-btn-form:hover {
  background: var(--gold-dk);
}

/* =====================================================
   FOR OWNERS
===================================================== */

/* モバイル基本 */
.owners-wrap {
  padding: 30px 24px 32px;
  position: relative;
  background: #ECEBE8;
}

/* フッター背景色をコンタクトの縦中央まで上に引き上げる疑似要素 */
.owners-wrap::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 50%;
  background: #ECEBE8;
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 769px) {
  .owners-wrap {
    padding: 30px 40px 36px;
  }
}

@media (min-width: 1025px) {
  .owners-wrap {
    padding: 60px 60px 40px;
  }
}

/* モバイル基本：縦並び */
.owners-card {
  max-width: 900px;
  margin: 0 auto;
  background: #FFF;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

@media (min-width: 481px) {
  .owners-card {
    padding: 32px 40px;
  }
}

@media (min-width: 1025px) {
  .owners-card {
    max-width: 1100px;
    padding: 50px 80px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }
}

/* sec-badge と同じスタイル */
.owners-badge {
  font-size: 0.812rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  display: block;
  font-weight: 400;
  line-height: 2;
}

/* sec-head h2 と同じスタイル */
.owners-title {
  margin-bottom: 25px;
  font-family: var(--mincho);
  font-size: clamp(1.8rem, 3.2vw, 2.25rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
}

.owners-desc {
  font-size: 0.875rem;
  color: var(--text);
  letter-spacing: 0.05em;
  font-weight: 400;
}

.owners-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  gap: 0;
  background: var(--gold);
  color: #fff;
  padding: 16px 52px 16px 32px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.25s;
}
.owners-btn .arr {
  position: absolute;
  right: 12px;
}
.owners-btn:hover {
  background: var(--gold-dk);
}

@media (min-width: 1025px) {
  .owners-btn {
    font-size: 1rem;
    min-width: 300px;
    padding: 18px 64px 18px 40px;
  }
  .owners-btn .arr {
    right: 14px;
  }
}

/* =====================================================
   ARROW HOVER ANIMATION（style.css 固有ボタン）
   ホバー時に矢印が右へゆっくりスライド
===================================================== */

/* buy/sell リスト矢印：常時ゴールド */
.buy-item .arr,
.sell-item .arr {
  color: var(--gold);
}

.hero-cta:hover .arr,
.sup-item:hover .arr,
.buy-item:hover .arr,
.sell-item:hover .arr,
.ct-btn:hover .arr,
.owners-btn:hover .arr {
  transform: translateX(7px);
}

/* =====================================================
   PROPERTY LIST PAGE
===================================================== */

/* PAGE HEADER */

/* =====================================================
   PROPERTY LIST PAGE
===================================================== */

/* ---- PAGE HEADER ---- */
.pl-page-header {
  margin-top: var(--hh);
  position: relative;
  padding: 56px 0 30px;
  overflow: hidden;
}

@media (min-width: 1025px) {
  .pl-page-header {
    padding: 80px 0 30px;
  }
}

/* 背景画像 */
.pl-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/haco-select-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* #45403B 80%オーバーレイ */
.pl-page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(69, 64, 59, 0.80);
  z-index: 1;
}

/* テキストをオーバーレイの前面に */
.pl-page-header .wrap {
  position: relative;
  z-index: 2;
}

/* sec-badge と同じスタイル（色は背景が暗いので gold-lt を維持） */
.pl-page-badge {
  display: block;
  font-size: 0.812rem;
  letter-spacing: 0.06em;
  color: var(--gold-lt);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 16px;
}

/* sec-head h2 と同じスタイル（色は #fff を維持） */
.pl-page-title {
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 20px;
}

.pl-page-desc {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  margin-bottom: 0;
}

/* パンくずリスト */
.pl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  margin-top: 48px;
}

@media (min-width: 1025px) {
  .pl-breadcrumb {
    font-size: 0.875rem;
    margin-top: 80px;
  }
}

.pl-breadcrumb a {
  color: rgba(255,255,255,0.75);
  transition: color 0.25s;
}

.pl-breadcrumb a:hover {
  color: var(--gold-lt);
}

/* 区切り：ゴールドの短い横線 */
.pl-breadcrumb-sep {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

@media (min-width: 1025px) {
  .pl-breadcrumb-sep {
    width: 18px;
  }
}

.pl-breadcrumb-current {
  color: rgba(255,255,255,0.9);
}

/* ---- MAIN LAYOUT ---- */
/* PC：カテゴリ左・物件右の2カラム構成 */
.pl-main {
  background: #FFF;
  padding: 0 0 80px;
}

@media (min-width: 1025px) {
  .pl-main {
    padding: 0 0 112px;
  }
}

/* 上部タブ（Rental / Buy） */
.pl-type-tabs {
  margin-top: 60px;
  border-bottom: 1px solid var(--greige);
  background: #FFF;
}

.pl-type-tabs-inner {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 1025px) {
  .pl-type-tabs-inner {
    padding: 0 60px;
  }
}

.pl-type-tab {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 40px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-xlt);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
  margin-bottom: -1px;
}

@media (min-width: 1025px) {
  .pl-type-tab {
    padding: 22px 52px;
    font-size: 1.25rem;
  }
}

.pl-type-tab .pl-type-tab-en {
  font-family: var(--sans);
  font-size: 1em;
  letter-spacing: 0.08em;
}

.pl-type-tab .pl-type-tab-ja {
  font-size: 0.8em;
  letter-spacing: 0.08em;
  color: inherit;
}

.pl-type-tab.on {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.pl-type-tab:hover:not(.on) {
  color: var(--text-lt);
}

/* メインコンテンツ：モバイル1カラム、PC 2カラム */
.pl-body {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1520px;
  margin: 0 auto;
  padding: 32px 20px 0;
}

@media (min-width: 769px) {
  .pl-body {
    padding: 40px 40px 0;
  }
}

@media (min-width: 1025px) {
  .pl-body {
    grid-template-columns: 320px 1fr;
    gap: 80px;
    padding: 52px 60px 0;
    align-items: start;
  }
}

/* ---- SIDEBAR ---- */
.pl-sidebar {
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .pl-sidebar {
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--hh) + 24px);
  }
}

.pl-sidebar-section {
  margin-bottom: 50px;
}

.pl-sidebar-heading {
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E9E8E5;
}

/* カテゴリーリスト */
.pl-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pl-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
  border: 1px solid #E9E8E5;
  cursor: pointer;
  background: #FFF;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  text-align: left;
  width: 100%;
  margin-bottom: 4px;
}

.pl-cat-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pl-cat-item-left svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}

.pl-cat-item-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.pl-cat-item-name {
  font-size: 0.875rem;
  font-weight: 400;
  color: inherit;
  line-height: 1.4;
}

.pl-cat-item-sub {
  font-size: 0.7rem;
  color: var(--text-xlt);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.pl-cat-item-count {
  font-size: 0.75rem;
  color: var(--text-xlt);
  letter-spacing: 0.04em;
}

/* PC：カテゴリーアイテムを広めのパディング・フォントに */
@media (min-width: 1025px) {
  .pl-cat-item {
    padding: 20px 24px;
  }
  .pl-cat-item-left {
    gap: 14px;
  }
  .pl-cat-item-left svg {
    width: 22px;
    height: 22px;
  }
  .pl-cat-item-name {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .pl-cat-item-sub {
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .pl-cat-item-count {
    font-size: 0.8125rem;
  }
}

.pl-cat-item.on,
.pl-cat-item:hover {
  background: #F8F8F8;
  border-color: var(--gold);
  color: var(--text);
}

.pl-cat-item.on {
  border-color: var(--gold);
  color: var(--gold);
}

.pl-cat-item.on .pl-cat-item-left svg {
  color: var(--gold);
}

/* 売却・住み替え相談（濃色バリアント）
   ─ 売買版のみで使用。他のカテゴリとは逆に濃色背景＋白文字 */
.pl-cat-item--consult {
  background: var(--sell);
  border-color: var(--sell);
  color: #fff;
  text-decoration: none;
}

.pl-cat-item--consult:hover,
.pl-cat-item--consult.on {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

.pl-cat-item--consult .pl-cat-item-name {
  color: #fff;
}

.pl-cat-item--consult .pl-cat-item-sub {
  color: rgba(255, 255, 255, 0.65);
}

.pl-cat-item--consult .pl-cat-item-left svg {
  color: var(--gold-lt);
}

.pl-cat-item--consult:hover .pl-cat-item-left svg,
.pl-cat-item--consult.on .pl-cat-item-left svg {
  color: var(--gold-lt);
}

.pl-cat-item--consult .arr {
  color: #fff;
}

/* エリアリスト */
.pl-area-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pl-area-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-lt);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.25s;
  text-align: left;
  width: 100%;
}

.pl-area-item-count {
  font-size: 0.75rem;
  color: var(--text-xlt);
}

.pl-area-item.on,
.pl-area-item:hover {
  color: var(--gold);
}

/* PC：エリアアイテムもカテゴリに合わせて拡張 */
@media (min-width: 1025px) {
  .pl-area-item {
    padding: 14px 0;
    font-size: 0.9375rem;
  }
  .pl-area-item-count {
    font-size: 0.8125rem;
  }
}

/* ---- CONTENT AREA ---- */
.pl-content {
  min-width: 0;
}

/* コンテンツヘッダー：カテゴリ名 + 件数 + サブフィルター */
.pl-content-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
}

@media (min-width: 1025px) {
  .pl-content-header {
    margin-bottom: 44px;
  }
}

.pl-content-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 16px;
}

@media (min-width: 1025px) {
  .pl-content-title-row {
    padding-bottom: 22px;
  }
}

.pl-content-divider {
  width: 100%;
  height: 1px;
  background: var(--greige);
  margin-bottom: 16px;
}

@media (min-width: 1025px) {
  .pl-content-divider {
    margin-bottom: 22px;
  }
}

.pl-content-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 1025px) {
  .pl-content-title {
    gap: 16px;
  }
}

.pl-content-badge {
  background: var(--gold);
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  font-weight: 400;
}

@media (min-width: 1025px) {
  .pl-content-badge {
    font-size: 0.75rem;
    padding: 5px 14px;
  }
}

.pl-content-name {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
}

@media (min-width: 1025px) {
  .pl-content-name {
    font-size: 1.125rem;
    letter-spacing: 0.08em;
  }
}

.pl-content-count {
  font-size: 0.75rem;
  color: var(--text-xlt);
  letter-spacing: 0.06em;
}

@media (min-width: 1025px) {
  .pl-content-count {
    font-size: 0.875rem;
  }
}

/* サブフィルター（並び替え等） */
.pl-sub-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 0;
}

@media (min-width: 1025px) {
  .pl-sub-filters {
    gap: 12px;
  }
}

/* 並び替えラベル（ボタンではなく見出し） */
.pl-sub-label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-lt);
  margin-right: 8px;
}

@media (min-width: 1025px) {
  .pl-sub-label {
    font-size: 0.875rem;
    margin-right: 16px;
  }
}

.pl-sub-btn {
  padding: 6px 18px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-lt);
  background: none;
  border: 1px solid var(--greige);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

@media (min-width: 1025px) {
  .pl-sub-btn {
    padding: 9px 24px;
    font-size: 0.875rem;
  }
}

.pl-sub-btn.on,
.pl-sub-btn:hover {
  background: var(--off);
  border-color: var(--greige2);
  color: var(--text);
}

/* 物件グリッド */
.pl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}

/* タブレット（サイドバー未表示）：2列 */
@media (min-width: 600px) {
  .pl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }
}

/* PC（サイドバー表示）：content領域が狭いため1列に戻す */
@media (min-width: 1025px) {
  .pl-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 72px;
  }
}

/* 広いPC：content領域が2列に耐える幅を持ったら2列に */
@media (min-width: 1280px) {
  .pl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
  }
}

/* PAGINATION */
.pl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

@media (min-width: 1025px) {
  .pl-pagination {
    gap: 10px;
  }
}

.pl-page-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-lt);
  background: none;
  border: 1px solid var(--greige);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

@media (min-width: 1025px) {
  .pl-page-btn {
    width: 44px;
    height: 44px;
    font-size: 0.9375rem;
  }
}

.pl-page-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.pl-page-btn.current {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.pl-page-btn.prev,
.pl-page-btn.next {
  width: auto;
  padding: 0 12px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

@media (min-width: 1025px) {
  .pl-page-btn.prev,
  .pl-page-btn.next {
    padding: 0 18px;
    font-size: 0.8125rem;
  }
}

.pl-page-ellipsis {
  font-size: 0.875rem;
  color: var(--text-xlt);
}

/* =====================================================
   PROPERTY DETAIL（single-rental.html）
===================================================== */

/* ---- ページヘッダー（パンくずのみ・左寄せ・薄灰背景） ---- */
.pd-page-header {
  margin-top: var(--hh);
  background: #F8F8F8;
  padding: 14px 0;
}

@media (min-width: 1025px) {
  .pd-page-header {
    padding: 18px 0;
  }
}

/* 薄背景用にパンくず色を上書き */
.pd-page-header .pl-breadcrumb {
  margin-top: 0;
  color: var(--text-xlt);
}

.pd-page-header .pl-breadcrumb a {
  color: var(--text-lt);
}

.pd-page-header .pl-breadcrumb a:hover {
  color: var(--gold);
}

.pd-page-header .pl-breadcrumb-current {
  color: var(--text);
}

/* ---- メイン2カラム ---- */
.pd-main {
  padding: 32px 0 80px;
}

@media (min-width: 1025px) {
  .pd-main {
    padding: 52px 0 112px;
  }
}

.pd-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 1025px) {
  .pd-body {
    grid-template-columns: 1fr 370px;
    gap: 80px;
    align-items: start;
  }
}

.pd-content {
  min-width: 0;
}

/* ---- 画像ギャラリー（Slick） ---- */
.pd-gallery {
  margin-bottom: 40px;
}

.pd-gallery-main {
  position: relative;
  margin-bottom: 12px;
}

.pd-gallery-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #DEDAD4, #CECAC4);
  background-size: cover;
  background-position: center;
}
.pd-gallery-img.v2 {
  background: linear-gradient(145deg, #D4D0CA, #C4C0BA);
}
.pd-gallery-img.v3 {
  background: linear-gradient(145deg, #E0DCD6, #D0CCC6);
}

.pd-gallery-thumbs {
  margin: 0 -6px;
}

.pd-gallery-thumbs .slick-slide {
  padding: 0 6px;
  cursor: pointer;
}

.pd-gallery-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #DEDAD4, #CECAC4);
  background-size: cover;
  background-position: center;
  transition: opacity 0.25s;
}
.pd-gallery-thumb.v2 {
  background: linear-gradient(145deg, #D4D0CA, #C4C0BA);
}
.pd-gallery-thumb.v3 {
  background: linear-gradient(145deg, #E0DCD6, #D0CCC6);
}

.pd-gallery-thumbs .slick-slide:not(.slick-current) .pd-gallery-thumb {
  opacity: 0.55;
}

/* Slick 矢印カスタマイズ：白の小ボックス＋グレーのシェブロンSVG */
.pd-gallery-main .slick-prev,
.pd-gallery-main .slick-next {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.92);
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  transition: background 0.25s;
}

.pd-gallery-main .slick-prev:hover,
.pd-gallery-main .slick-next:hover {
  background: #fff;
}

.pd-gallery-main .slick-prev:before,
.pd-gallery-main .slick-next:before {
  display: none;
}

.pd-gallery-main .slick-prev svg,
.pd-gallery-main .slick-next svg {
  width: 18px;
  height: 18px;
  color: #B8B3AE;
  stroke: currentColor;
  display: block;
}

.pd-gallery-main .slick-prev {
  left: 14px;
}
.pd-gallery-main .slick-next {
  right: 14px;
}

@media (min-width: 1025px) {
  .pd-gallery-main .slick-prev,
  .pd-gallery-main .slick-next {
    width: 50px;
    height: 50px;
  }
  .pd-gallery-main .slick-prev svg,
  .pd-gallery-main .slick-next svg {
    width: 20px;
    height: 20px;
  }
  .pd-gallery-main .slick-prev { left: 18px; }
  .pd-gallery-main .slick-next { right: 18px; }
}

/* ---- タイトルブロック ---- */
.pd-title-block {
  margin-bottom: 18px;
}

.pd-title-type {
  font-size: 0.8125rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.pd-title-name {
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.5;
}

@media (min-width: 1025px) {
  .pd-title-name {
    font-size: 1.75rem;
  }
}

/* ---- 住所行 ---- */
.pd-address-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #ACABAB;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}

.pd-address-row svg {
  width: 14px;
  height: 14px;
  fill: #ACABAB;
  flex-shrink: 0;
}

/* ---- チップ（アクセスタグ・Features で共用） ---- */
.pd-access-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.pd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 16px;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--off);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@media (min-width: 1025px) {
  .pd-chip {
    min-height: 40px;
    padding: 8px 20px;
    font-size: 0.875rem;
  }
}

/* ---- 価格ボックス ---- */
.pd-price-box {
  border: 1px solid var(--greige);
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 60px;
}

.pd-price-main {
  border-right: 1px solid var(--greige);
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.pd-price-label {
  display: block;
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.pd-price-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.pd-price-num {
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pd-price-unit {
  font-size: 0.75rem;
  color: var(--text-lt);
  white-space: nowrap;
}

.pd-price-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 22px 28px;
}

.pd-price-meta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.pd-price-meta-key {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  min-width: 56px;
  margin: 0;
  flex-shrink: 0;
}

.pd-price-meta-val {
  color: var(--text);
  font-size: 0.8125rem;
  margin: 0;
}

@media (min-width: 769px) {
  .pd-price-box {
    grid-template-columns: minmax(180px, 1fr) 2.2fr;
  }
  .pd-price-main {
    padding: 32px 40px;
  }
  .pd-price-label {
    font-size: 0.8125rem;
    margin-bottom: 10px;
  }
  .pd-price-amount {
    gap: 6px;
  }
  .pd-price-num {
    font-size: 2rem;
  }
  .pd-price-unit {
    font-size: 0.875rem;
  }
  .pd-price-meta {
    padding: 32px 48px;
    gap: 10px;
  }
  .pd-price-meta-row {
    gap: 16px;
  }
  .pd-price-meta-key {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    min-width: 72px;
  }
  .pd-price-meta-val {
    font-size: 0.875rem;
  }
}

@media (min-width: 1025px) {
  .pd-price-num {
    font-size: 2.25rem;
  }
}

/* ---- セクション共通 ---- */
.pd-section {
  margin-bottom: 64px;
}

.pd-section--last {
  margin-bottom: 0;
}

@media (min-width: 1025px) {
  .pd-section {
    margin-bottom: 80px;
  }
}

/* セクション見出し：英字タイトル + 和文ラベル + ゴールド横線 */
.pd-sec-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.pd-sec-head-title {
  font-family: var(--mincho);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
  flex-shrink: 0;
}

@media (min-width: 1025px) {
  .pd-sec-head-title {
    font-size: 1.75rem;
  }
}

.pd-sec-head-label {
  font-size: 0.8125rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.pd-sec-head-line {
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* ---- Overview テーブル ---- */
.pd-table {
  width: 100%;
  border-collapse: collapse;
}

.pd-table tr {
  border-bottom: 1px solid #E9E8E5;
}

.pd-table tr:first-child {
  border-top: 1px solid #E9E8E5;
}

.pd-table th,
.pd-table td {
  padding: 18px 12px;
  font-size: 0.8125rem;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}

.pd-table th {
  color: var(--text-lt);
  letter-spacing: 0.06em;
  width: 120px;
  white-space: nowrap;
  background: #F4F2EF;
}

.pd-table td {
  color: var(--text);
}

@media (min-width: 1025px) {
  .pd-table th,
  .pd-table td {
    padding: 22px 30px;
    font-size: 0.875rem;
  }
  .pd-table th {
    width: 180px;
  }
}

/* ---- Features ---- */
.pd-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Floor Plan ---- */
.pd-floor-plan {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #E2DED8, #D0CCC6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-floor-plan-placeholder {
  color: var(--text-lt);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  font-family: var(--mincho);
}

@media (min-width: 1025px) {
  .pd-floor-plan-placeholder {
    font-size: 1rem;
  }
}

/* ---- Access Map（Googleマップ埋め込み・グレースケール＋ゴールドピン） ---- */
.pd-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--off);
  overflow: hidden;
}

.pd-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(100%) contrast(0.95);
}

/* 目的地を示すゴールドピン（iframe中央にオーバーレイ） */
.pd-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: var(--gold);
  pointer-events: none;
  z-index: 2;
  line-height: 0;
}

.pd-map-pin svg {
  width: 32px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

@media (min-width: 1025px) {
  .pd-map-pin svg {
    width: 40px;
  }
}

/* ---- haco's note（ダークな引用ボックス） ---- */
.pd-note {
  background: var(--sell);
  color: #fff;
  padding: 28px 24px;
  line-height: 1.9;
}

@media (min-width: 1025px) {
  .pd-note {
    padding: 36px 40px;
  }
}

.pd-note-heading {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gold-lt);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.pd-note-body {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}

.pd-note-staff {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-note-staff-name {
  color: var(--gold-lt);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.pd-note-staff-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
}

/* ---- 右サイドバー（コンタクトパネル） ---- */
.pd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1025px) {
  .pd-sidebar {
    position: sticky;
    top: calc(var(--hh) + 24px);
  }
}

/* Contact Us パネル */
.pd-contact {
  border: 1px solid var(--greige);
  background: #fff;
  padding: 32px 24px;
  text-align: center;
}

.pd-contact-title {
  font-family: var(--mincho);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 12px;
}

.pd-contact-desc {
  font-size: 0.8125rem;
  color: var(--text-lt);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.pd-contact-divider {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 24px;
}

.pd-contact-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 36px;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 10px;
  transition: opacity 0.25s, background 0.25s;
}

.pd-contact-btn .arr {
  position: absolute;
  right: 14px;
}

.pd-contact-btn-line {
  background: var(--green);
}
.pd-contact-btn-line:hover {
  opacity: 0.85;
}

.pd-contact-btn-form {
  background: var(--gold);
  margin-bottom: 18px;
}
.pd-contact-btn-form:hover {
  background: var(--gold-dk);
}

.pd-contact-btn:hover .arr {
  transform: translateX(5px);
}

.pd-contact-tel {
  display: block;
  padding: 12px;
  border: 1px solid var(--greige);
  text-align: center;
  font-size: 1rem;
  color: var(--text);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  transition: border-color 0.25s, color 0.25s;
}

.pd-contact-tel:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.pd-contact-hours,
.pd-contact-note {
  font-size: 0.75rem;
  color: var(--text-lt);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* シェア・印刷ボタン */
.pd-util-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pd-util-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 8px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text);
  background: #F4F2EF;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.25s, color 0.25s;
}

.pd-util-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gold);
}

.pd-util-btn:hover {
  background: var(--greige);
}

/* ---- 類似物件 ---- */
.pd-similar {
  background: #F8F8F8;
  padding: 64px 0;
  margin-bottom: 56px;
}

@media (min-width: 1025px) {
  .pd-similar {
    padding: 96px 0;
    margin-bottom: 88px;
  }
}

.pd-similar-head {
  text-align: center;
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .pd-similar-head {
    margin-bottom: 56px;
  }
}

.pd-similar-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.pd-similar-title {
  font-family: var(--mincho);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1.2;
}

.pd-similar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 600px) {
  .pd-similar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }
}

@media (min-width: 1025px) {
  .pd-similar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
  }
}

/* ---- pd-contact-btn の矢印アニメーション ---- */
.pd-contact-btn .arr,
.pd-util-btn .arr {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =====================================================
   APARTMENT DETAIL（single-apartment.html 追加分）
===================================================== */

/* ---- 物件種別タブ（左寄せ・Rental/Buyタブとは別系統） ---- */
.pd-type-tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--greige);
  margin-bottom: 40px;
  padding: 8px 0 0;
}

@media (min-width: 1025px) {
  .pd-type-tabs {
    gap: 48px;
    margin-bottom: 56px;
  }
}

.pd-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  color: var(--text-xlt);
  transition: color 0.25s;
  position: relative;
  margin-bottom: -1px;
  flex-shrink: 0;
}

@media (min-width: 1025px) {
  .pd-type-tab {
    padding: 18px 0;
    gap: 14px;
  }
}

.pd-type-tab-main {
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
}

@media (min-width: 1025px) {
  .pd-type-tab-main {
    font-size: 1.125rem;
  }
}

.pd-type-tab-sub {
  font-size: 0.6875rem;
  padding: 4px 10px;
  background: var(--off);
  color: var(--text-lt);
  letter-spacing: 0.04em;
  line-height: 1;
}

@media (min-width: 1025px) {
  .pd-type-tab-sub {
    font-size: 0.75rem;
    padding: 5px 12px;
  }
}

.pd-type-tab.on {
  color: var(--gold);
}

.pd-type-tab.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold);
}

.pd-type-tab.on .pd-type-tab-sub {
  background: var(--cream);
  color: var(--gold);
}

.pd-type-tab:hover:not(.on) {
  color: var(--text-lt);
}

/* ---- 価格ボックス（売買版：クリームパネル+白セル構成） ---- */
.pd-price-box--sale {
  display: block;
  background: transparent;
  padding: 0;
  border: none;
}

/* 上段：オフホワイトパネル＋ゴールド左アクセント */
.pd-price-sale-main {
  background: var(--off);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 8px;
}

@media (min-width: 1025px) {
  .pd-price-sale-main {
    padding: 24px 32px;
    margin-bottom: 10px;
  }
}

.pd-price-box--sale .pd-price-label {
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}

@media (min-width: 1025px) {
  .pd-price-box--sale .pd-price-label {
    font-size: 0.9375rem;
  }
}

/* 金額＋単位＋消費税込みを横並び（同じ baseline） */
.pd-price-box--sale .pd-price-amount {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.pd-price-box--sale .pd-price-num {
  font-size: 1.75rem;
}

@media (min-width: 1025px) {
  .pd-price-box--sale .pd-price-num {
    font-size: 2.125rem;
  }
}

.pd-price-box--sale .pd-price-unit {
  font-size: 1rem;
  color: var(--text);
}

@media (min-width: 1025px) {
  .pd-price-box--sale .pd-price-unit {
    font-size: 1.0625rem;
  }
}

.pd-price-note {
  font-size: 0.8125rem;
  color: var(--text-lt);
  letter-spacing: 0.04em;
  margin-left: 12px;
}

@media (min-width: 1025px) {
  .pd-price-note {
    font-size: 0.875rem;
    margin-left: 14px;
  }
}

/* 下段：費用3セル（画面幅に応じて1列↔3列を切替、テキスト途中改行を禁止） */
.pd-price-fees {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* タブレット（サイドバー未表示）：3列 */
@media (min-width: 768px) and (max-width: 1024px) {
  .pd-price-fees {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* 広いPC（サイドバー表示でもcontent領域が十分広い）：3列 */
@media (min-width: 1280px) {
  .pd-price-fees {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

.pd-fee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: #FFF;
  border: 1px solid var(--off);
}

.pd-fee-key {
  color: var(--gold);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
}

.pd-fee-val {
  color: var(--text);
  font-size: 0.9375rem;
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 1025px) {
  .pd-fee-item {
    padding: 14px 24px;
  }
  .pd-fee-key {
    font-size: 0.9375rem;
  }
  .pd-fee-val {
    font-size: 1rem;
  }
}

/* ---- Plan（メイン1枚） ---- */
.pd-plan-main {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #E2DED8, #D0CCC6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-plan-placeholder {
  color: var(--text-lt);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
}

@media (min-width: 1025px) {
  .pd-plan-placeholder {
    font-size: 1rem;
  }
}

/* ---- 周辺施設（Plan 2nd：3枚グリッド、キャプション付き） ---- */
.pd-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .pd-plan-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1025px) {
  .pd-plan-grid {
    gap: 24px;
  }
}

.pd-plan-item {
  margin: 0;
  position: relative;
}

.pd-plan-item-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #DEDAD4, #CECAC4);
}
.pd-plan-item-img.v2 {
  background: linear-gradient(145deg, #D4D0CA, #C4C0BA);
}
.pd-plan-item-img.v3 {
  background: linear-gradient(145deg, #E0DCD6, #D0CCC6);
}

.pd-plan-item-cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--text-lt);
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* ---- Photos（3×2グリッド） ---- */
.pd-photos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .pd-photos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1025px) {
  .pd-photos-grid {
    gap: 24px;
  }
}

.pd-photo-item {
  margin: 0;
  position: relative;
}

.pd-photo-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #DEDAD4, #CECAC4);
}
.pd-photo-img.v2 {
  background: linear-gradient(145deg, #D4D0CA, #C4C0BA);
}
.pd-photo-img.v3 {
  background: linear-gradient(145deg, #E0DCD6, #D0CCC6);
}

.pd-photo-cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--text-lt);
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* ---- Loan（ローンシミュレーション） ---- */
.pd-loan {
  background: #F8F6F2;
  border-left: 3px solid var(--gold);
  padding: 24px 20px;
}

@media (min-width: 769px) {
  .pd-loan {
    padding: 32px 40px;
  }
}

.pd-loan-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.pd-loan-inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 600px) {
  .pd-loan-inputs {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.pd-loan-field {
  display: flex;
  flex-direction: column;
}

.pd-loan-field label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.pd-loan-field input {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-family: inherit;
  font-weight: 400;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--greige);
  transition: border-color 0.25s;
  -moz-appearance: textfield;
}

.pd-loan-field input:focus {
  outline: none;
  border-color: var(--gold);
}

.pd-loan-field input::-webkit-outer-spin-button,
.pd-loan-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 計算結果表示（ラベル＋金額を両端揃え） */
.pd-loan-result {
  background: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (min-width: 1025px) {
  .pd-loan-result {
    padding: 22px 28px;
  }
}

.pd-loan-result-label {
  font-size: 0.875rem;
  color: var(--text);
  letter-spacing: 0.04em;
}

@media (min-width: 1025px) {
  .pd-loan-result-label {
    font-size: 0.9375rem;
  }
}

.pd-loan-result-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.pd-loan-result-value {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.02em;
}

@media (min-width: 1025px) {
  .pd-loan-result-value {
    font-size: 1.875rem;
  }
}

.pd-loan-result-unit {
  font-size: 0.8125rem;
  color: var(--text-lt);
}

@media (min-width: 1025px) {
  .pd-loan-result-unit {
    font-size: 0.875rem;
  }
}

.pd-loan-btn {
  background: var(--gold);
  color: #fff;
  padding: 12px 40px;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  margin-bottom: 18px;
  font-family: inherit;
  transition: background 0.25s;
}

.pd-loan-btn:hover {
  background: var(--gold-dk);
}

.pd-loan-note {
  font-size: 0.75rem;
  color: var(--text-lt);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* =====================================================
   SELL PAGE（sell.html）
===================================================== */

/* ---- このページの <p> と 01〜03 のチェックリスト <li> は font-weight: 400 ---- */
.page-sell p,
.page-sell .sl-check-list li {
  font-weight: 400;
}

/* ---- PAGE HEADER（haco select と同一構造、背景画像のみ差し替え） ---- */
.sl-page-header::before {
  background-image: url('../images/sell-image02.jpg');
}

/* ---- LEAD（メインキャッチ + CTA） ---- */
.sl-lead {
  padding: 64px 0 72px;
  text-align: center;
}

@media (min-width: 1025px) {
  .sl-lead {
    padding: 100px 0 112px;
  }
}

.sl-lead-title {
  font-family: var(--mincho);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}

@media (min-width: 769px) {
  .sl-lead-title {
    font-size: 1.75rem;
  }
}

@media (min-width: 1025px) {
  .sl-lead-title {
    font-size: 2rem;
    margin-bottom: 32px;
  }
}

.sl-lead-line {
  display: inline-block;
  width: 160px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  .sl-lead-line {
    width: 180px;
    margin-bottom: 28px;
  }
}

.sl-lead-desc {
  font-size: 0.875rem;
  color: var(--text-lt);
  letter-spacing: 0.04em;
  margin-bottom: 36px;
}

@media (min-width: 1025px) {
  .sl-lead-desc {
    font-size: 0.9375rem;
    margin-bottom: 52px;
    font-weight: 400;
  }
}

.sl-lead-btn-wrap {
  display: flex;
  justify-content: center;
}

/* 売却について相談する（共通 .btn-gold を sell ページ専用で広く） */
.sl-lead .btn-gold {
  min-width: 300px;
}

@media (min-width: 1025px) {
  .sl-lead .btn-gold {
    min-width: 380px;
  }
}

/* ---- REASON（01/02/03：テキストと画像の2カラム） ---- */
.sl-reason {
  background: #F4F2EF;
  padding: 56px 0;
}

.sl-reason--even {
  background: #F4F2EF;
}

.sl-reason--reverse {
  background: #fff;
}

@media (min-width: 1025px) {
  .sl-reason {
    padding: 96px 0;
  }
}

.sl-reason-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 1025px) {
  .sl-reason-in {
    /* テキスト側をやや広く、画像側を狭く */
    grid-template-columns: 1.4fr 1fr;
    gap: 120px;
  }
}

/* スマホ表示では reverse でも「文章 → 写真」の順に表示 */
.sl-reason--reverse .sl-reason-text {
  order: -1;
}

@media (min-width: 1025px) {
  .sl-reason--reverse .sl-reason-in {
    /* 反転時は画像左・テキスト右でも同じ比率（1fr : 1.4fr） */
    grid-template-columns: 1fr 1.4fr;
  }
  /* PC時は HTML の順序通り（画像 → テキスト） */
  .sl-reason--reverse .sl-reason-text {
    order: 0;
  }
}

.sl-reason-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sl-reason-title {
  font-family: var(--mincho);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

@media (min-width: 1025px) {
  .sl-reason-title {
    font-size: 1.875rem;
    gap: 24px;
    margin-bottom: 28px;
  }
}

.sl-reason-num {
  font-family: var(--mincho);
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  font-weight: 400;
}

@media (min-width: 1025px) {
  .sl-reason-num {
    font-size: 2rem;
  }
}

.sl-reason-desc {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  .sl-reason-desc {
    font-size: 0.9375rem;
    margin-bottom: 32px;
  }
}

/* チェックリスト */
.sl-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1025px) {
  .sl-check-list {
    margin-bottom: 40px;
    gap: 14px;
  }
}

.sl-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

@media (min-width: 1025px) {
  .sl-check-list li {
    font-size: 0.9375rem;
  }
}

.sl-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 2px;
}

.sl-check-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (min-width: 1025px) {
  .sl-check-icon,
  .sl-check-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* Reason 内ボタン（白背景+ゴールド文字+ゴールド枠） */
.sl-reason-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  gap: 0;
  background: #fff;
  color: var(--gold);
  padding: 16px 52px 16px 40px;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  border: 1px solid var(--gold);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.sl-reason-btn .arr {
  position: absolute;
  right: 14px;
}

.sl-reason-btn:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.sl-reason-btn:hover .arr {
  transform: translateX(7px);
}

@media (min-width: 1025px) {
  .sl-reason-btn {
    font-size: 0.9375rem;
    min-width: 380px;
    padding: 18px 56px 18px 40px;
  }
  .sl-reason-btn .arr {
    right: 18px;
  }
}

/* Reason 画像 */
.sl-reason-img {
  width: 100%;
}

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

@media (min-width: 1025px) {
  .sl-reason-img img {
    aspect-ratio: 5 / 4;
  }
}

/* ---- HOW TO SELL（トップページの .howto / .h-step / .step-circle を継承し、5ステップ対応＋見出し＋スタガーアニメーション） ---- */

/* 見出し（デザインデータ準拠：小さい 売却の流れ ラベル + 大きい How To Sell） */
.sl-howto-head {
  margin-bottom: 48px;
}

@media (min-width: 1025px) {
  .sl-howto-head {
    margin-bottom: 64px;
  }
}

.sl-howto-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

@media (min-width: 1025px) {
  .sl-howto-label {
    font-size: 0.875rem;
    margin-bottom: 14px;
  }
}

.sl-howto-title {
  font-family: var(--mincho);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
}

@media (min-width: 1025px) {
  .sl-howto-title {
    font-size: 2.75rem;
  }
}

/* 5ステップ対応：PC時は repeat(5, 1fr) */
@media (min-width: 1025px) {
  .sl-howto-steps {
    grid-template-columns: repeat(5, 1fr);
  }

  /* 横線の位置調整（5等分の左右外側を除いた範囲） */
  .sl-howto-steps::before {
    left: calc(10% + 4px);
    right: calc(10% + 4px);
  }
}

/* スタガーアニメーション：--i インデックスに応じて順次 fade-in */
.sl-howto-steps .h-step {
  transition-delay: calc(var(--i, 0) * 0.15s);
}


/* =====================================================
   COMPANY PAGE（company.html）
===================================================== */

/* ---- このページの <p> は font-weight: 400 ---- */
.page-company p {
  font-weight: 400;
}

/* ---- PAGE HEADER（haco select と同じ仕様、背景画像のみ差し替え） ---- */
.co-page-header::before {
  background-image: url('../images/sell-image02.jpg');
}

/* ---- MESSAGE（代表メッセージ） ---- */
.co-message {
  padding: 64px 0 80px;
  background: #fff;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1025px) {
  .co-message {
    padding: 64px 0 120px;
  }
}

/* モバイル：通常のwrap相当の内側padding */
.co-message-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 0 20px;
}

@media (min-width: 769px) {
  .co-message-in {
    padding: 0 40px;
  }
}

/* PC：左はwrap相当の padding / 右は viewport 端まで */
@media (min-width: 1025px) {
  .co-message-in {
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(48px, 6vw, 88px);
    /* stretch にして画像と文章の高さを揃える */
    align-items: stretch;
    padding: 0 0 0 max(40px, calc((100vw - 1400px) / 2));
    max-width: none;
  }
}

.co-message-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  /* viewport幅に応じて top padding を可変に */
  .co-message-text {
    padding-top: clamp(40px, 4vw, 80px);
  }
}

.co-message-label {
  display: block;
  font-family: var(--mincho);
  font-size: 0.9375rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}

@media (min-width: 1025px) {
  .co-message-label {
    font-size: 1rem;
    margin-bottom: 24px;
  }
}

.co-message-title {
  font-family: var(--mincho);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 28px;
}

@media (min-width: 769px) {
  .co-message-title {
    font-size: 2rem;
  }
}

@media (min-width: 1025px) {
  .co-message-title {
    font-size: 2.25rem;
    margin-bottom: 40px;
  }
}

.co-message-body {
  width: 100%;
  margin-bottom: 24px;
}

.co-message-body p {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.co-message-body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1025px) {
  .co-message-body p {
    font-size: 0.9375rem;
    margin-bottom: 22px;
  }
  .co-message-body {
    margin-bottom: 32px;
  }
}

.co-message-sign {
  align-self: flex-end;
  font-size: 0.9375rem;
  color: var(--text);
  letter-spacing: 0.12em;
  margin-top: 8px;
}

@media (min-width: 1025px) {
  .co-message-sign {
    font-size: 1rem;
    margin-top: 12px;
  }
}

.co-message-img {
  width: 100%;
}

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

@media (min-width: 1025px) {
  /* PC表示：画像をページヘッダーまで引き上げて前面表示、右端はviewport端まで
     高さはテキスト列に合わせて伸縮、引き上げ量はviewport幅で可変 */
  .co-message-img {
    position: relative;
    z-index: 3;
    margin-top: clamp(-300px, -20vw, -160px);
    display: flex;
  }

  .co-message-img img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    aspect-ratio: auto;
  }
}

/* ---- OUR VALUES ---- */
.co-values {
  padding: 72px 0 80px;
  background: #fff;
}

@media (min-width: 1025px) {
  .co-values {
    padding: 100px 0 120px;
  }
}

.co-values-head {
  text-align: center;
  margin-bottom: 48px;
}

@media (min-width: 1025px) {
  .co-values-head {
    margin-bottom: 72px;
  }
}

.co-values-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

@media (min-width: 1025px) {
  .co-values-label {
    font-size: 0.875rem;
    margin-bottom: 14px;
  }
}

.co-values-title {
  font-family: var(--mincho);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
}

@media (min-width: 1025px) {
  .co-values-title {
    font-size: 2.75rem;
  }
}

.co-values-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .co-values-list {
    gap: 24px;
  }
}

/* 各バリューカード */
.co-value-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px 24px;
  border: 1px solid var(--gold);
  background: #fff;
  transition-delay: calc(var(--i, 0) * 0.15s);
}

@media (min-width: 769px) {
  .co-value-item {
    gap: 48px;
    padding: 32px 40px;
  }
}

@media (min-width: 1025px) {
  .co-value-item {
    gap: 64px;
    padding: 36px 56px;
  }
}

.co-value-num {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1;
}

@media (min-width: 1025px) {
  .co-value-num {
    font-size: 1.25rem;
  }
}

.co-value-body {
  min-width: 0;
}

.co-value-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

@media (min-width: 1025px) {
  .co-value-title {
    font-size: 1.0625rem;
    margin-bottom: 10px;
  }
}

.co-value-desc {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.95;
  letter-spacing: 0.04em;
}

@media (min-width: 1025px) {
  .co-value-desc {
    font-size: 0.875rem;
  }
}

/* ---- COMPANY INFO ---- */
.co-info {
  padding: 64px 0 96px;
  background: #fff;
}

@media (min-width: 1025px) {
  .co-info {
    padding: 96px 0 140px;
  }
}

.co-info-head {
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .co-info-head {
    margin-bottom: 56px;
  }
}

.co-info-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

@media (min-width: 1025px) {
  .co-info-label {
    font-size: 0.875rem;
    margin-bottom: 14px;
  }
}

.co-info-title {
  font-family: var(--mincho);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
}

@media (min-width: 1025px) {
  .co-info-title {
    font-size: 2.75rem;
  }
}

.co-info-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 1025px) {
  .co-info-body {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* Googleマップ（グレースケール） */
.co-info-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--off);
}

@media (min-width: 1025px) {
  .co-info-map {
    aspect-ratio: 1 / 1;
  }
}

.co-info-map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  filter: grayscale(100%) contrast(0.95);
}

/* 会社情報テーブル */
.co-info-table {
  width: 100%;
  border-collapse: collapse;
}

.co-info-table tr {
  border-bottom: 1px solid #E9E8E5;
}

.co-info-table tr:first-child {
  border-top: 1px solid #E9E8E5;
}

.co-info-table th,
.co-info-table td {
  padding: 18px 16px;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  line-height: 1.9;
}

.co-info-table th {
  color: var(--text-lt);
  letter-spacing: 0.06em;
  width: 110px;
  white-space: nowrap;
}

.co-info-table td {
  color: var(--text);
}

@media (min-width: 1025px) {
  .co-info-table th,
  .co-info-table td {
    padding: 22px 24px;
    font-size: 0.9375rem;
  }
  .co-info-table th {
    width: 160px;
  }
}


/* =====================================================
   CONTACT PAGE（contact.html）
===================================================== */

/* ---- このページの <p> は font-weight: 400 ---- */
.page-contact p {
  font-weight: 400;
}

/* ---- PAGE HEADER（haco select と同じ仕様、背景画像） ---- */
.ct-page-header::before {
  background-image: url('../images/sell-image02.jpg');
}

/* ---- LEAD ---- */
.ct-lead {
  padding: 64px 0 32px;
  background: #fff;
}

@media (min-width: 1025px) {
  .ct-lead {
    padding: 100px 0 20px;
    text-align: center;
  }
}

.ct-lead-title {
  font-family: var(--mincho);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 36px;
}

@media (min-width: 769px) {
  .ct-lead-title {
    font-size: 1.875rem;
  }
}

@media (min-width: 1025px) {
  .ct-lead-title {
    font-size: 2.125rem;
    margin-bottom: 48px;
  }
}

.ct-lead-line {
  display: inline-block;
  width: 160px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  .ct-lead-line {
    width: 180px;
    margin-bottom: 28px;
  }
}

.ct-lead-desc {
  font-size: 0.875rem;
  color: var(--text-lt);
  letter-spacing: 0.04em;
  line-height: 2;
}

@media (min-width: 1025px) {
  .ct-lead-desc {
    font-size: 0.9375rem;
  }
}

/* ---- LINE 相談セクション ---- */
.ct-line {
  padding: 32px 0 64px;
  background: #fff;
}

@media (min-width: 1025px) {
  .ct-line {
    padding: 48px 0 96px;
  }
}

.ct-line-inner {
  background: #F4F2EF;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

@media (min-width: 769px) {
  .ct-line-inner {
    padding: 48px 48px;
  }
}

@media (min-width: 1025px) {
  .ct-line-inner {
    /* PCでは横幅を1100pxで中央寄せし、左右の余白を適度に */
    max-width: 1100px;
    margin: 0 auto;
    grid-template-columns: 1fr auto;
    padding: 48px 56px;
    gap: 40px;
  }
}

.ct-line-text {
  /* モバイルは左寄せ（デフォルト） */
}

@media (min-width: 1025px) {
  .ct-line-text {
    text-align: left;
  }
}

.ct-line-title {
  font-family: var(--mincho);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 14px;
  /* 行を均等に折り返し（「ます」などが孤立して2行目に落ちるのを防ぐ） */
  text-wrap: balance;
}

@media (min-width: 1025px) {
  .ct-line-title {
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
  }
}

.ct-line-brand {
  font-family: var(--mincho);
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-right: 4px;
}

.ct-line-desc {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.95;
  letter-spacing: 0.04em;
}

@media (min-width: 1025px) {
  .ct-line-desc {
    font-size: 0.9375rem;
  }
}

/* LINE 相談ボタン */
.ct-line-btn-wrap {
  display: flex;
  justify-content: center;
}

@media (min-width: 1025px) {
  .ct-line-btn-wrap {
    justify-content: flex-end;
  }
}

.ct-line-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 14px 52px 14px 28px;
  background: var(--green);
  color: #fff;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: opacity 0.25s;
}

.ct-line-btn .arr {
  position: absolute;
  right: 14px;
}

.ct-line-btn:hover {
  opacity: 0.85;
}

.ct-line-btn:hover .arr {
  transform: translateX(7px);
}

@media (min-width: 1025px) {
  .ct-line-btn {
    font-size: 0.9375rem;
    min-width: 360px;
    padding: 16px 56px 16px 32px;
  }
  .ct-line-btn .arr {
    right: 18px;
  }
}

/* ---- FORM セクション ---- */
.ct-form-sec {
  padding: 0 0 96px;
  background: #fff;
}

@media (min-width: 1025px) {
  .ct-form-sec {
    padding: 0 0 140px;
  }
}

/* フォーム上の指示テキスト */
.ct-form-note-top {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .ct-form-note-top {
    font-size: 0.9375rem;
    margin-bottom: 56px;
  }
}

/* フォーム本体 */
.ct-form {
  max-width: 880px;
  margin: 0 auto;
}

/* 各行：モバイル縦並び → PCで左ラベル右フィールド */
.ct-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 22px 0;
  align-items: center;
}

@media (min-width: 769px) {
  .ct-form-row {
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 20px 0;
  }
}

@media (min-width: 1025px) {
  .ct-form-row {
    grid-template-columns: 280px 1fr;
    gap: 32px;
    padding: 24px 0;
  }
}

/* テキストエリア行のみ上寄せ */
.ct-form-row--textarea {
  align-items: start;
}

@media (min-width: 769px) {
  .ct-form-row--textarea {
    padding: 20px 0;
  }
}

@media (min-width: 1025px) {
  .ct-form-row--textarea {
    padding: 24px 0;
  }
}

/* ラベル：バッジを左側に配置 */
.ct-form-lbl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.04em;
}

/* テキストエリア行のラベルは入力欄のトップに揃える */
.ct-form-row--textarea .ct-form-lbl {
  padding-top: 12px;
}

/* 必須 / 任意 バッジ */
.ct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.4;
  flex-shrink: 0;
}

.ct-badge-req {
  background: var(--gold);
}

.ct-badge-opt {
  background: #C6BFB8;
}

/* フィールド */
.ct-form-field {
  width: 100%;
}

.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"],
.ct-form textarea,
.ct-form select {
  width: 100%;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text);
  background: #FAFAFA;
  border: 1px solid #E6E5E1;
  transition: border-color 0.25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  line-height: 1.6;
}

.ct-form input::placeholder,
.ct-form textarea::placeholder {
  color: #C6BFB8;
}

.ct-form input:focus,
.ct-form textarea:focus,
.ct-form select:focus {
  outline: none;
  border-color: var(--gold);
}

.ct-form textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.85;
}

/* セレクトボックス（右端にダークな正方形＋白の下向き矢印） */
.ct-select-wrap {
  position: relative;
}

/* ダークな正方形の背景 */
.ct-select-wrap::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  aspect-ratio: 1 / 1;
  background: #5A5550;
  pointer-events: none;
}

/* 白い下向き矢印（正方形の中央） */
.ct-select-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  aspect-ratio: 1 / 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  pointer-events: none;
}

.ct-form select {
  padding-right: 60px;
  cursor: pointer;
}

/* 送信ボタン（シンプルなゴールド塗り） */
.ct-form-submit {
  margin-top: 36px;
  text-align: center;
}

@media (min-width: 1025px) {
  .ct-form-submit {
    margin-top: 48px;
  }
}

.ct-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 48px;
  background: var(--gold);
  color: #fff;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  font-weight: 400;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background 0.25s;
}

.ct-submit-btn:hover {
  background: var(--gold-dk);
}

@media (min-width: 1025px) {
  .ct-submit-btn {
    font-size: 1rem;
    min-width: 220px;
    padding: 16px 56px;
  }
}
/* =====================================================
   TOP リニューアル（2025-05 構成変更）
   ── 新規セクション：
      HERO（2ボタン）/ ABOUT / SERVICE / FOR SALE /
      FOR SELL / HOW TO タブ / OUR PROMISE
   ── 旧 CONCEPT / SUPPORT / HACO SELECT / BUY-SELL の
      スタイルは未使用となりますが、保守のため残しています。
===================================================== */

/* ---- 汎用：ゴールド枠線ボタン（塗りなし） ---- */
.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  gap: 0;
  background: #fff;
  color: var(--gold-dk);
  border: 1px solid var(--gold);
  padding: 12px 51px 12px 31px;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  transition: background 0.25s, color 0.25s;
}
.btn-outline .arr {
  position: absolute;
  right: 12px;
}
.btn-outline:hover {
  background: var(--off);
}

@media (min-width: 1025px) {
  .btn-outline {
    font-size: 1rem;
    min-width: 260px;
    padding: 17px 63px 17px 39px;
  }
  .btn-outline .arr {
    right: 14px;
  }
}

/* ---- HERO：2ボタン横並び ---- */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-actions.fv-on {
  opacity: 1;
}

@media (min-width: 600px) {
  .hero-actions {
    flex-direction: row;
    gap: 20px;
  }
}

/* HERO 2ボタン時はサイズを揃える */
.hero-actions .hero-cta {
  margin: 0;
  opacity: 1; /* フェードはコンテナ(.hero-actions)側で制御 */
}

/* HERO 白枠ボタン */
.hero-cta-outline {
  background: rgba(255,255,255,0.92);
  color: var(--text);
}
.hero-cta-outline:hover {
  background: #fff;
}

/* =====================================================
   ABOUT HACO
===================================================== */
.about {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 72px 0 80px;
}

/* about-bg.jpg を不透明度10%で全幅に敷く */
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/about-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 0;
}

@media (min-width: 1025px) {
  .about {
    padding: 104px 0 112px;
  }
}

.about-in {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

@media (min-width: 1025px) {
  .about-in {
    padding: 0 60px;
  }
}

.about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.about-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.about-title {
  font-family: var(--mincho);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1.3;
}

.about-sub {
  font-family: var(--mincho);
  font-size: clamp(1.2rem, 3.2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 28px;
}

.about-body {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-lt);
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-align: left;
  margin-bottom: 40px;
  line-break: strict;
  word-break: auto-phrase; /* 対応ブラウザでは文節単位で自然に改行 */
}

@media (min-width: 1025px) {
  .about-body {
    text-align: center;
    margin-bottom: 48px;
  }
}

.about-cta {
  text-align: center;
}

/* =====================================================
   SERVICE
===================================================== */
.service {
  background: #fff;
  padding: 72px 0;
}

@media (min-width: 1025px) {
  .service {
    padding: 104px 0;
  }
}

.service-head {
  margin-bottom: 48px;
}
.service-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.812rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 18px;
}
.service-title {
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 22px;
}
.service-lead {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-lt);
  letter-spacing: 0.05em;
}

@media (min-width: 1025px) {
  .service-head {
    margin-bottom: 64px;
  }
}

/* リスト */
.service-list {
  border-top: none;
}

/* モバイル基本：縦積み */
.svc-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num  name"
    "desc desc";
  align-items: center;
  gap: 4px 16px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(196,162,106,0.4);
}
.svc-row:first-child {
  border-top: 1px solid rgba(196,162,106,0.4);
}

.svc-num {
  grid-area: num;
  font-family: var(--mincho);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.svc-name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-en {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.svc-ja {
  font-family: var(--mincho);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  line-height: 1.3;
}
.svc-desc {
  grid-area: desc;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-lt);
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* PC：番号 / 英＋和 / 説明 を横一列に */
@media (min-width: 1025px) {
  .svc-row {
    grid-template-columns: 60px 280px 1fr;
    grid-template-areas: "num name desc";
    align-items: center;
    gap: 0 32px;
    padding: 34px 0;
  }
  .svc-num {
    font-size: 1.625rem;
  }
  .svc-ja {
    font-size: 1.75rem;
  }
  .svc-desc {
    margin-top: 0;
    font-size: 0.9375rem;
  }
}

.service-cta {
  text-align: center;
  margin-top: 48px;
}

@media (min-width: 1025px) {
  .service-cta {
    margin-top: 64px;
  }
}

/* =====================================================
   FOR SALE
===================================================== */
.forsale {
  background: #F4F2EF;
  padding: 72px 0;
}

@media (min-width: 1025px) {
  .forsale {
    padding: 104px 0;
  }
}

.forsale .sec-head {
  margin-bottom: 44px;
}
.forsale .sec-head h2 {
  font-family: var(--mincho);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 6px 0 0;
}
.forsale-desc {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-lt);
  letter-spacing: 0.05em;
  margin-top: 12px;
}

@media (min-width: 1025px) {
  .forsale .sec-head {
    margin-bottom: 56px;
  }
}

/* For Sale カードグリッド（prop-grid を踏襲しつつ間隔を調整） */
.forsale .prop-grid {
  gap: 32px;
  margin-bottom: 48px;
}

@media (min-width: 1025px) {
  .forsale .prop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 56px;
  }
}

.forsale-cta {
  text-align: center;
}

/* =====================================================
   FOR SELL
===================================================== */
.forsell {
  background: #F4F2EF;
  border-top: 1px solid #BB996B;
  padding: 72px 0;
}

@media (min-width: 1025px) {
  .forsell {
    padding: 104px 0;
  }
}

.forsell .sec-head {
  margin-bottom: 24px;
}
.forsell .sec-head h2 {
  font-family: var(--mincho);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 6px 0 0;
}

.forsell-catch {
  font-family: var(--mincho);
  font-size: clamp(1.3rem, 3vw, 1.875rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 24px;
}

.forsell-body {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-lt);
  line-height: 2.0;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .forsell-body {
    margin-bottom: 52px;
  }
}

/* ボタン2点：中央寄せ */
.forsell-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (min-width: 600px) {
  .forsell-btns {
    flex-direction: row;
    gap: 24px;
  }
}

/* =====================================================
   HOW TO タブ（購入の流れ / 売却の流れ）
===================================================== */
.howto .sec-head {
  margin-bottom: 8px;
}

/* セグメント型タブ */
.ht-tabs {
  display: flex;
  justify-content: center;
  max-width: 520px;
  margin: 40px auto 8px;
  border: 1px solid var(--gold);
}

@media (min-width: 1025px) {
  .ht-tabs {
    margin: 56px auto 8px;
  }
}

.ht-tab {
  flex: 1;
  padding: 14px 10px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold-dk);
  background: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

@media (min-width: 1025px) {
  .ht-tab {
    padding: 16px 10px;
    font-size: 1rem;
  }
}

.ht-tab + .ht-tab {
  border-left: 1px solid var(--gold);
}

.ht-tab.on {
  background: var(--gold);
  color: #fff;
}

/* パネル切替 */
.ht-panel {
  display: none;
}
.ht-panel.on {
  display: block;
}

/* =====================================================
   OUR PROMISE
===================================================== */
.promise {
  background: transparent;
  padding: 48px 20px 0;   /* 上の余白 + 左右余白（背景は内側ボックスへ） */
  margin-bottom: 56px;    /* 下のセクション（Contact）との余白 */
}

/* 背景色ボックス本体：左右に余白を持たせて内側に表示 */
.promise .wrap {
  background: #F4F2EF;
  padding: 56px 24px 64px;
}

@media (min-width: 769px) {
  .promise {
    padding: 56px 40px 0;
  }
}

@media (min-width: 1025px) {
  .promise {
    padding: 64px 60px 0;
    margin-bottom: 88px;
  }
  .promise .wrap {
    padding: 80px 64px 96px;
  }
}

.promise-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 44px;
}
.promise-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.promise-title {
  font-family: var(--mincho);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text);
}

@media (min-width: 1025px) {
  .promise-head {
    margin-bottom: 56px;
  }
}

/* カード：モバイル1列 → PC3列 */
.promise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 769px) {
  .promise-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1025px) {
  .promise-grid {
    gap: 40px;
  }
}

.promise-card {
  background: #fff;
  padding: 36px 28px 40px;
}

@media (min-width: 1025px) {
  .promise-card {
    padding: 44px 36px 48px;
  }
}

.promise-num {
  display: block;
  font-family: var(--mincho);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  .promise-num {
    font-size: 1.625rem;
    margin-bottom: 32px;
  }
}

.promise-card-title {
  font-family: var(--mincho);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #BFA372;
  line-height: 1.6;
  margin-bottom: 22px;
}

@media (min-width: 1025px) {
  .promise-card-title {
    font-size: 1.25rem;
    margin-bottom: 28px;
  }
}

.promise-card-desc {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-lt);
  line-height: 1.95;
  letter-spacing: 0.04em;
}

/* Our Promise CTAボタン（中央寄せ＋上マージン） */
.promise-cta {
  text-align: center;
  margin-top: 48px;
}

@media (min-width: 1025px) {
  .promise-cta {
    margin-top: 64px;
  }
}

/* スクロールリビールのスタッガー（--i に応じて遅延） */
.svc-row.sr,
.promise-card.sr,
.howto .h-step.sr {
  transition-delay: calc(var(--i, 0) * 0.12s);
}

/* =====================================================
   Floor Plan / 間取り・区画図（実画像：自然比率で表示）
===================================================== */
.pd-plan-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .pd-plan-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1025px) {
  .pd-plan-photos {
    gap: 24px;
  }
}
.pd-plan-photos .pd-plan-figure {
  margin: 0;
}
/* 画像1枚のときは中央寄せで幅を抑える */
.pd-plan-photos .pd-plan-figure:only-child {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 0 auto;
}
.pd-plan-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* =====================================================
   Contact Form 7：応答メッセージを中央表示
===================================================== */
.ct-form .wpcf7-response-output {
  text-align: center;
}

/* =====================================================
   プライバシーポリシー（page-privacy.php）
   ※ 全体を明朝体（Shippori Mincho）で統一
===================================================== */
.pp-body-sec {
  padding: 80px 0 120px;
}

.pp-body-wrap {
  max-width: 880px;
}

.pp-body {
  color: #3A3A36;
}

.pp-item + .pp-item {
  margin-top: 56px;
}

.pp-item-title {
  font-family: "Shippori Mincho", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #3A3A36;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #EFEBE5;
}

.pp-item-body {
  font-family: "Shippori Mincho", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #3A3A36;
}

@media (max-width: 768px) {
  .pp-body-sec {
    padding: 56px 0 88px;
  }
  .pp-item + .pp-item {
    margin-top: 40px;
  }
  .pp-item-title {
    font-size: 19px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
  .pp-item-body {
    font-size: 14px;
    line-height: 1.9;
  }
}

/* =====================================================
   reCAPTCHA インライン規約文（送信ボタン直前）
===================================================== */
.recaptcha-inline-notice {
  font-size: 12px;
  color: #8A857E;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin: 32px auto;
  max-width: 640px;
  text-align: center;
}

.recaptcha-inline-notice strong {
  color: #3A3A36;
  font-weight: 500;
}

.recaptcha-inline-notice a {
  color: #8A857E;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.3s ease;
}

.recaptcha-inline-notice a:hover {
  opacity: 0.6;
}

/* CF7 規約文を囲む親要素（<p>等）の余白を相殺して、上下を完全に均等化 */
.wpcf7-form p:has(> .recaptcha-inline-notice),
.wpcf7-form p:has(.recaptcha-inline-notice) {
  margin: 0;
}

/* Contact Form 7 のスピナー（送信中アニメーション）を非表示 */
.wpcf7-spinner {
  display: none !important;
}

@media (max-width: 768px) {
  .recaptcha-inline-notice {
    font-size: 11px;
    line-height: 1.7;
    margin: 26px auto;
    padding: 0 8px;
  }
}