容器+
![]()
のとき効く */
object-position: center;
display: block;
}
/* === 追加修正：スマホでアイキャッチが横幅いっぱいに巨大化し、
隣のテキストが極端に細く潰れてしまう問題を修正（a-abc/relaxと同一原因） ===
原因：.top_blog_img の幅指定（21rem）が実機の画面幅に対して大きすぎ、
かつ正方形固定(aspect-ratio)のために縮まらなくなっていたため。 */
@media screen and (max-width: 969px){
ul.top_blog .top_blog_img {
width: 8rem !important; /* 21rem → 8rem に縮小（実機幅に合わせて調整） */
margin-right: 1rem !important;
flex-shrink: 0 !important;
}
ul.top_blog .top_blog_text {
width: auto !important; /* 固定49remをやめて残り幅を自動で使う */
flex: 1 1 auto !important;
min-width: 0 !important; /* テキストがはみ出さず正しく折り返すために必須 */
}
}
/* ==========================================================================
2026-07-25 追加修正
① SNSアイコン（X / Instagram / ゼロツー）の大きさを統一
② スマホ表示でセラピスト写真の左右が切れる問題を修正
※ 既存のルールは触らず、末尾に追記するだけで効くようにしています
========================================================================== */
/* --------------------------------------------------------------
① SNSアイコンのサイズ統一
これまでの問題：
・Xだけ画像の中に余白が無く、枠いっぱいに広がるので大きく見えていた
・object-fit:cover のため、Xの左右がわずかに切れていた
・Instagramだけ width:3.8rem という別指定があり、幅が揃っていなかった
・ページによってXの幅が変わってしまっていた（TOPだけ細く潰れる等）
対応：
・すべて同じ正方形の枠（PC 3.5rem / スマホ 2.5rem）に統一
・object-fit:contain にして、アイコンが切れずに枠内へ収まるようにする
-------------------------------------------------------------- */
ul.sns_icon li img,
ul.sns_icon li img.instagram,
ul.sns_icon li img.twitter,
ul.sns_icon li img.zerotwo {
object-fit: contain !important;
margin-top: 0 !important;
}
ul.sns_icon li {
flex: 0 0 auto !important;
}
@media screen and (min-width: 970px) {
ul.sns_icon li img,
ul.sns_icon li img.instagram,
ul.sns_icon li img.twitter,
ul.sns_icon li img.zerotwo {
width: 3.5rem !important;
height: 3.5rem !important;
}
}
@media screen and (max-width: 969px) {
ul.sns_icon li img,
ul.sns_icon li img.instagram,
ul.sns_icon li img.twitter,
ul.sns_icon li img.zerotwo {
width: 2.5rem !important;
height: 2.5rem !important;
}
}
/* --------------------------------------------------------------
② スマホ表示：セラピスト写真の左右が切れる問題
これまでの問題：
写真の枠が「幅の約1.7倍」という細長い形だったため、
3:4のセラピスト写真を入れると左右あわせて約22%が切り落とされていた。
対応：
枠の縦横比を写真と同じ 3:4 にして、左右が切れないようにする。
（PCは元々ほぼ切れていないため、スマホのみ調整）
-------------------------------------------------------------- */
@media screen and (max-width: 969px) {
div#pickup {
height: auto !important;
}
.therapist_img {
height: auto !important;
aspect-ratio: 3 / 4;
}
.therapist_img img {
height: 100% !important;
}
}
/* --------------------------------------------------------------
③ SNSアイコンの位置（スマホ）
池田さん側で実機調整いただいた値をそのまま採用。
実測すると、5サイトとも構造は完全に同じでした：
・TOPスライダーのカード … 内側に0.5remの余白あり
・一覧／出勤表のカード … 内側の余白なし
そのため、同じ値で5サイトとも同じ見え方になります。
この指定での実測結果（スマホ幅502pxの場合）:
TOPスライダー … 写真の上から8.1px / 右から16.3px
一覧・出勤表 … 写真の上から8.1px / 右から8.1px
セラピスト詳細 … 写真の上から16.3px / 右から16.3px（現状維持）
-------------------------------------------------------------- */
@media screen and (max-width: 969px) {
/* 一覧・出勤表・TOPの本日の出勤 */
ul.sns_icon {
top: 0.5rem !important;
right: 0.5rem !important;
}
/* TOPスライダー */
#pickup ul.sns_icon {
right: 1.5rem !important;
}
/* セラピスト詳細ページは「ばっちり」とのことなので現状のまま維持 */
#therapist_pf ul.sns_icon,
.therapist_pf_img ul.sns_icon {
top: 1rem !important;
right: 1rem !important;
}
/* 位置ズレの原因になるので li 側のズラしは無効化 */
ul.sns_icon li {
top: 0 !important;
}
}