@charset "utf-8";
/* ------------------------------------------------------------------
   rehako-adjust.css  … common.css を上書きする調整用（2026-08-21 追加）
   common.css は書き換えず、このファイルで差分だけ当てる。
   functions.php の my_script_init() で common.css の後に読み込んでいる。
------------------------------------------------------------------ */

/* ヘッダーのメニュー崩れ対策
   原因: 文字を折り返さない(nowrap)にすると、flex の子であるロゴ側が縮められて
   メニューと重なっていた（1228px でロゴ 121px→74px に潰れ、間隔 0）。
   対策:
   1. ロゴは縮めない（flex-shrink:0）。サイズはテーマ元々の指定のまま
   2. ロゴとメニューの間に最低限の間隔を確保する
   3. 文字はテーマ元々どおり画面幅に比例して縮む。折り返しだけ禁止
   4. 1050px未満はドロワーに切り替える（7項目＋電話＋ボタンが収まらなくなる幅）
------------------------------------------------------------------ */
.header__logo {
  flex: 0 0 auto;
}
.header__nav {
  margin-left: min(28px, 2vw);
  min-width: 0;
}
.header__menu li a,
.header__tel p,
.header__tel a,
.header__mail {
  white-space: nowrap;
}
/* 「コラム」→「空き家を売る／空き家を買う」で文字数が増えたぶん（約+90px）、
   間隔と電話・ボタンの余白を詰めて吸収する。文字サイズはテーマのまま */
.header__menu li:nth-child(n+2) {
  margin-left: min(16px, 1.2vw);
}
.header__contact {
  margin-left: min(14px, 1.1vw);
}
.header__tel p {
  font-size: min(1.1rem, 1.1vw);
}
.header__mail {
  margin-left: min(16px, 1.3vw);
  padding: 0.55em 1em;
}
/* 1280px未満は、さらに少しだけ文字を縮めて1行に収める（比例縮小のまま） */
@media (max-width: 1279px) {
  .header__menu li a { font-size: min(1.06vw, 1.6rem); }
  .header__tel a { font-size: min(2.4rem, 2vw); }
  .header__mail { font-size: min(2rem, 1.32vw); }
}
@media (max-width: 1049px) {
  .header__nav { display: none; }
  .drawer-icon {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  }
  .drawer-content { display: block; -webkit-transform: translateX(105%); transform: translateX(105%); }
  .drawer-content.is-active { -webkit-transform: translateX(0); transform: translateX(0); }
}

/* 「この記事を書いている人」を本文の上に出す場合の余白調整
------------------------------------------------------------------ */
.supervision--top {
  margin-top: 0;
  margin-bottom: var(--mt-20, 40px);
}

/* 「空き家を買う」一覧ページ（archive-buy-contents.php）
   1. 見出し枠の右にイラスト(::after)が絶対配置されていて、サブ文が長いと文字に被る。
      テキスト側に幅の上限を付けて、イラストの手前で折り返させる。
   2. 代表ページ（投資家様／リスク7分類）のカードを枠の中に出す。
------------------------------------------------------------------ */
@media (min-width: 768px) {
  .column-archive--buy .column-archive__heading,
  .column-archive--buy .column-archive__header > p {
    max-width: 60%;
  }
  .column-archive--buy .column-archive__header::after {
    top: 70px;
    transform: none;
  }
}
.buy-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 560px));
  gap: 20px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px dashed #c9d8ce;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .buy-featured {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
}
.buy-featured__item a {
  display: flex;
  gap: 14px;
  align-items: stretch;
  height: 100%;
  background: #fff;
  border: 2px solid #1C8B42;
  border-radius: 10px;
  overflow: hidden;
  color: #333;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.buy-featured__item a:hover {
  box-shadow: 0 6px 18px rgba(28,139,66,.22);
  transform: translateY(-2px);
}
.buy-featured__thumb {
  flex: 0 0 38%;
  min-height: 120px;
  background: #eaf4ed;
}
.buy-featured__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.buy-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px 14px 0;
  min-width: 0;
}
.buy-featured__label {
  display: inline-block;
  align-self: flex-start;
  background: #1C8B42;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}
.buy-featured__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}
.buy-featured__lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #666;
}
@media (max-width: 767px) {
  .buy-featured__thumb { flex-basis: 34%; min-height: 96px; }
  .buy-featured__title { font-size: 1.4rem; }
}