/* ==========================================================================
   動き（ホバー・スクロール時の表示）
   common.css・slide.css のあとに読み込み、ばらばらだった動きをここで上書きしてそろえる。

   動きは4種類だけにする（触って気持ちよく、うるさくない）
     1. 色が変わる ……… 文字のリンクは青に、ボタンは背景色が変わる（--motion-fast）
     2. 下線が左から伸びる … 文字のリンク・「もっと見る」「詳しく見る」（--motion-base）
     3. 矢印が少し進む …… 黒丸の矢印が右へ 3px（--motion-base）
     4. 写真がゆっくり寄る … 物件写真が 4% 拡大。薄くする代わり（--motion-slow）
   スクロール時は、物件カード・物件一覧・お知らせ一覧・フッターの案内だけを下から静かに表示する
   （メイン画像と物件詳細の情報は、すぐ読めることを優先して動かさない）

   色: 賃貸（/rental へのリンク）はオレンジ、売買（/real_estate へのリンク）は青。リンク先の URL で判定する。
   白地の文字のオレンジはボタンの #EA5504 だと読みにくい（コントラスト 3.6）ので、文字だけ #CC4800（4.7）にする
   ========================================================================== */

:root{
  --motion-ease:cubic-bezier(.22, .61, .36, 1); /* すっと動き出して、なめらかに止まる */
  --motion-fast:.2s;
  --motion-base:.3s;
  --motion-slow:.6s;
  --motion-reveal:.7s;
  --motion-accent:#004EA2;
}

/* --- 色: リンク先で賃貸・売買の色を切り替える（--link: 文字、--icon: 矢印の丸・ボタン） --- */
a[href*="/rental"]{
  --link:#CC4800;
  --link-strong:#B84000;
  --icon:#EA5504;
  --icon-strong:#C24400;
}

a[href*="/real_estate"]{
  --link:#004EA2;
  --link-strong:#003F85;
  --icon:#004EA2;
  --icon-strong:#003F85;
}

.pankuzu a,
.side-category li a,
.post-nav__title,
.link-line,
.bukken-yoko__item a .item-link{
  color:var(--link, #00328E);
}

/* ヘッダー・フッターのメニューは、通常時は全項目を同じ色にそろえる。
   1つだけ色が違うと「今いるページ」と誤解されるため。色はホバー時と、本当に今いる区分の項目にだけ出す */
.header__menu-item a,
.footer__menu-item a{
  color:#00328E;
}

.header__menu-item a.is-current{
  color:var(--link, var(--motion-accent));
  background-size:100% 1px;
}

/* --- 共通: すべてのリンクの「全部の値を .3s で動かす」と一律の半透明をやめる --- */
a{
  transition:color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), background-size var(--motion-base) var(--motion-ease);
}

a:hover,
.bukken-yoko__item a:hover div,
.bukken-tate__link:hover div{
  opacity:1;
}

/* キーボード操作のときだけ、操作位置を青い枠で示す */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--motion-accent);
  outline-offset:3px;
}

/* --- 1・2. 文字のリンク: 青に変わり、1px の下線が左から伸びる --- */
.header__menu-item a,
.footer__menu-item a,
.pankuzu a,
.main-visual__oshirase-title,
.post-nav__title,
.unit-oshirase__title,
.entry-content a{
  text-decoration:none;
  background:linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom:1px;
}

.header__menu-item a:hover,
.footer__menu-item a:hover,
.pankuzu a:hover,
.main-visual__oshirase-title:hover,
.post-nav__title:hover,
.unit-oshirase__item:hover .unit-oshirase__title,
.entry-content a:hover{
  color:var(--link-strong, var(--motion-accent));
  background-size:100% 1px;
}

/* 「もっと見る」「詳しく見る」の下線は文字のすぐ下に（以前は 20px 下に離れていた） */
.link-line::before,
.bukken-yoko__item a .item-link::before,
.bukken-tate__item a .item-link::before{
  bottom:-4px;
  height:1px;
  background:currentColor;
  transition:transform var(--motion-base) var(--motion-ease);
}

.main-visual__oshirase-more .link-line::before{
  bottom:-4px;
}

/* --- 3. 黒丸の矢印: 青に変わり、右へ 3px 進む --- */
.link-line::after,
.bukken-yoko__item a .item-link::after,
.bukken-tate__link .item-link::after,
.side-category li a::after{
  background-color:var(--icon, #333);
  transition:background-color var(--motion-fast) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}

.link-line:hover::after,
.bukken-yoko__item a:hover .item-link::after,
.bukken-tate__link:hover .item-link::after,
.side-category li a:hover::after{
  background-color:var(--icon-strong, var(--motion-accent));
}

.side-category li a:hover,
.link-line:hover,
.bukken-yoko__item a:hover .item-link{
  color:var(--link-strong, var(--motion-accent));
}

/* --- 1. ボタン: 背景色だけが変わる（黄色い枠などの余計な変化は出さない） --- */
.button__large{
  transition:background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

.button--orange:hover:hover{
  border-color:#EE6C26;
}

.button--blue:hover:hover{
  border-color:#226CBC;
}

.post-nav__button,
.pagination .page-numbers,
.photo-viewer__nav{
  transition:background-color var(--motion-fast) var(--motion-ease);
}

.post-nav__button:hover,
.pagination a.page-numbers:hover{
  background-color:var(--icon-strong, var(--motion-accent));
}

.single-rental .photo-viewer__nav:hover,
.single-rental .photo-viewer__nav:focus-visible{
  background-color:#C24400;
}

.single-rental .photo-list li.is-active{
  border-color:#EA5504;
}

/* お知らせ一覧の行は、背景を敷かず題名の下線だけで反応する */
.unit-oshirase__item:hover{
  background-color:transparent;
}

/* --- 4. 写真: 枠の中でゆっくり寄る --- */
.bukken-yoko__item .item-picture,
.bukken-tate__item .item-picture{
  overflow:hidden;
}

.bukken-yoko__item .item-picture img,
.bukken-tate__item .item-picture img{
  transition:transform var(--motion-slow) var(--motion-ease);
}

.bukken-yoko__item a:hover .item-picture img,
.bukken-tate__item .item-picture a:hover img{
  transform:scale(1.04);
}

/* --- スクロール時の表示 ---
   motion-ready は head の小さなスクリプトが付ける（JS が無効・視差効果を減らす設定のときは付かず、最初から表示される） */
.motion-ready .unit-chintai__header,
.motion-ready .unit-baibai__header,
.motion-ready .bukken-yoko__item,
.motion-ready .unit-chintai .center,
.motion-ready .unit-baibai .center,
.motion-ready .bukken-tate__item,
.motion-ready .bukken-tate__item + .item-link,
.motion-ready .unit-oshirase__list,
.motion-ready .footer-contact__left,
.motion-ready .footer-contact__right{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease);
  transition-delay:var(--reveal-delay, 0s);
}

/* 隠す側の指定（例: .motion-ready .unit-chintai .center はクラス3つ分）に負けないよう、クラスを重ねて優先度を上げる */
.motion-ready .is-revealed.is-revealed.is-revealed{
  opacity:1;
  transform:none;
}

/* 印刷（PDF 保存を含む）では、まだスクロールしていない部分も含めてすべて表示する */
@media print{
  .motion-ready .unit-chintai__header,
  .motion-ready .unit-baibai__header,
  .motion-ready .bukken-yoko__item,
  .motion-ready .unit-chintai .center,
  .motion-ready .unit-baibai .center,
  .motion-ready .bukken-tate__item,
  .motion-ready .bukken-tate__item + .item-link,
  .motion-ready .unit-oshirase__list,
  .motion-ready .footer-contact__left,
  .motion-ready .footer-contact__right{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* 視差効果を減らす設定の端末では、動きを止める */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}