、会員カードは)の余分なpaddingを0に。
会員カードだけ左paddingが大きく見えていた原因は .no_anchor に効いていなかったため。 */
.room_list li.room > a,
.room_list li.room > .no_anchor { padding: 0; }
/* お気に入り・資料請求(白ボタン)のドロップシャドウを無しにする。
下paddingが開きすぎて文字が上寄りに見えるため下paddingを詰めて文字を下げる。
会員登録(緑ボタン)も同じ白ベース(背景白・文字#007a8e・枠は共通)に揃える。 */
.room .links .btn.white,
.room .links .btn.green {
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.1em;
}
/* アイコン字形は箱の上寄りに描画されるため、アイコンだけ下へ2px寄せて文字と字形を揃える
(テキストは対称paddingで中央のまま) */
.room .links .btn.white i,
.room .links .btn.green i { position: relative; top: 1px; }
/* 会員登録(person_edit)アイコンは字形が他と違い下寄りに見えるので、もう少し上に */
.room .links .btn.green i { top: -1px; }
/* 資料請求・会員登録ボタンの右margin(共有7.7px)を除去し、右端をバンド右端に揃える */
.room .links .btn.white.request,
.room .links .btn.green { margin-right: 0; }
/* お気に入りボタンのマウスオン時、ハートを星と同じゴールド(#a5843c)にする。
共有hoverの青緑塗り(ゴールドが埋もれる)を打ち消し、白背景のままハートだけゴールドに。 */
.room .links .btn.white.favorite i { font-size: 21px; }
.room .links .btn.white.favorite:hover { background: #fff; color: #007a8e; box-shadow: none; }
/* マウスオン時はハートを塗りつぶし(FILL 1)＋色#a5843cにする */
.room .links .btn.white.favorite:hover i { color: #a5843c; font-variation-settings: 'FILL' 1; }
.room .links .btn.green { background: #fff; color: #007a8e; transition: background-color 0.15s, color 0.15s; }
/* 会員登録ボタンもマウスオンで反転(背景ティール・文字白) */
.room .links .btn.green:hover { background: #007a8e; color: #fff; }
/* お気に入り・資料請求(・会員登録)のボタン文字を少し小さく */
.room .links .btn.white span,
.room .links .btn.green span { font-size: 0.9em; }
/* お気に入り・資料請求(白ボタン)の文字だけ上寄りに見えるので1px下げる */
.room .links .btn.white span { position: relative; top: 1px; }
/* タグリストを楕円(pill)で囲う */
.room .links a.link {
display: inline-block;
text-decoration: none;
color: #666;
font-size: 0.82em;
border: 1px solid #cfd8dc;
border-radius: 999px;
padding: 0.1em 0.7em;
margin-left: 0.4em;
margin-right: 0;
line-height: 1.8;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
/* タグpillはマウスオンで文字色と背景色を反転(背景=文字色のティール, 文字=白)、グレー罫線は消す */
.room .links a.link:hover {
background: #007a8e;
color: #fff;
border-color: transparent;
}
/* タグリストを右揃え(公開日は左のまま。公開日にmargin-right:autoでタグを右へ寄せる) */
.room .links > .bl_flex:first-child { flex: 1; flex-wrap: wrap; align-items: center; }
.room .links > .bl_flex:first-child .date { margin-right: auto; margin-left: 0; }
/* マウスオーバーでカードが浮き上がる挙動(translateY -7px + box-shadow)を無効化(共有.room_list li.room:hoverに勝つ特異度) */
.room_list li.room:hover { transform: none; box-shadow: none; }
/* ===== SP(768px以下)限定の調整。PC(769px以上)・他ページには影響しない ===== */
@media screen and (max-width: 768px) {
/* カード内「評価」ラベル(SP用dt)を非表示 */
.room .bldg_data.main dt.sp { display: none; }
/* 会員登録ボタンのアイコンにPC向けの top:-1px(共通ルール)が効いており、SPでは
アイコン+テキストがボタン中心より上にずれる。SP限定でアイコン1px・テキスト1px下へ */
.room .links .btn.green i { top: 1px; }
.room .links .btn.green span { position: relative; top: 1px; }
/* SP限定: お気に入り・資料請求ボタンはテキストを隠しアイコンのみの丸ボタンにする(サイズは相対値) */
.room .links .btn.white.favorite span,
.room .links .btn.white.request span { display: none; }
.room .links .btn.white.favorite,
.room .links .btn.white.request {
width: 2.8em;
height: 2.8em;
padding: 0;
border-radius: 50%;
gap: 0;
}
/* カードのドロップシャドウは不要 */
.room_list li.room { box-shadow: none !important; border-top: none !important; margin-bottom: 0 !important; }
/* 最寄り駅テキスト(大江戸線 築地市場駅 徒歩3分 等)の文字サイズを下げる */
.room .bldg_band .band_station .band_val { font-size: 15px; }
/* カードの左右余白は常に20px。下marginは不要。
一覧(.m_search_result)はコンテナ側が既に左右20pxを持つため、そこだけカード側を0に戻す。
これで一覧・マンション詳細・関連物件(新着/周辺)のどこでもカードの左右余白が20pxに揃う。 */
.room { padding: 24px 20px 36px; }
.m_search_result .room { padding-left: 0; padding-right: 0; }
/* 物件名の下マージンを少しだけ小さく(タイトルとバンドの間を詰める) */
.room .bldg_band { margin-top: 2px; }
/* SPは.bldg_data.mainがdisplay:flexになりDOM順(タイトル→NEW/評価)で並んでしまう。
PCはgridでNEW/評価が先に来るため、SPも order で同じ並び(NEW/評価が上・タイトルが下)に揃える。
これによりタイトル側の元々のmargin-top:-0.5em(共通ルール)がそのままタイトルを評価に
寄せるため、画面幅や会員/公開カードの違いを気にした個別のmargin計算が不要になる。 */
.room .bldg_data.main .bldg_star { order: -1; margin-top: 0; }
/* くの字マークをもう少し左に */
.room_list li.room > a .bldg_name strong::after { margin-left: 0.3em; }
/* お気に入り・資料請求の丸ボタンを、評価+タイトルのブロック全体に対して縦中央揃えにする
(PCはalign-self:endのまま、SPのみcenterに変更) */
.room .links > .bl_flex:last-child { align-self: center; }
/* 価格・利回りの小見出しは左下に(数字を先に表示し、見出しをその下へ) */
/* 価格・利回りの小見出しは数字の左・下揃え(縦積みから横並びへ) */
.room .bldg_band .band_price,
.room .bldg_band .band_yield { flex-direction: row; align-items: center; }
.room .bldg_band .band_price .band_lbl,
.room .bldg_band .band_yield .band_lbl { margin-bottom: 0; margin-right: 1em; }
/* タグリストは公開日と同じ行で右揃え(折り返さず1行に収める) */
.room .links > .bl_flex:first-child { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
.room .links > .bl_flex:first-child .date,
.room .links > .bl_flex:first-child a.link { flex: 0 0 auto; }
.room .links .date { width: auto; }
/* スペック(所在地/築年月/建物構造/専有面積/間取り)の下マージンを広げる */
.room .bldg_data.sub { margin-bottom: 12px; }
/* 各カードのサムネイル画像一覧を、折返し(複数行)から横1列のスワイプ(横スクロール)に変更。
.bldg_pic は li.room のCSS Gridアイテムであり、grid item の min-width 初期値は auto
(=中身の最小幅まで広がる)ため、min-width:0 を入れないと ul が画像の合計幅まで伸びて
ページ全体に横スクロールが出る。必ずセットで指定する。 */
.room .bldg_pic {
flex-wrap: nowrap;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
row-gap: 0;
scrollbar-width: none;
/* 右端で画像が途中で切れて見えるよう、画面右端まで伸ばす(左端は本文と揃えたまま)。
右の余白の実体は .m_search_result の padding-right: 20px(固定px)なので、
同値の負マージンで打ち消す。祖先に overflow:hidden は無く(実測)クリップされない。
padding-right はスクロール末尾で最後の画像が画面端に貼り付かないための余白。 */
}
/* 右端まで伸ばす負マージンは「カードの右に20pxの余白がある」前提。
一覧では .m_search_result の padding-right:20px、それ以外では .room 自身の
padding-right:20px がその実体なので、どちらでも -20px で打ち消せる。
.bldg_pic は min-width:0 + overflow-x:auto のため横溢れにはならない。 */
.room .bldg_pic {
margin-right: -20px;
padding-right: 20px;
}
/* スクロールバーは非表示(スワイプ操作前提。高さが変わらないよう領域も取らせない) */
.room .bldg_pic::-webkit-scrollbar { display: none; }
/* nowrap下でも画像が潰れないよう縮小を止め、幅は既存の 6em を明示する */
.room .bldg_pic li {
flex: 0 0 auto;
width: 6em;
max-width: none;
scroll-snap-align: start;
}
}