/* 須藤牧場 子テーマ：写真の大きさ・動画・再生できない動画・下層の飾り（2026-09-23 追加1〜7）。
   読むのは functions.php の sf_media_target() が真のページだけ＝固定ページ（TOP・/news/・/staff/・投稿一覧は読まない）。
   決まり（追加6＝写真の大きさの統一規則）
     ・1枚ずつのスライド／1枚の写真＝PC 1340:600（高さ上限 600px）・SP 4:3
     ・2枚並び＝各枠 3:2（PC 高さ上限 460px）・SP は1枚ずつ 4:3
     ・3枚以上並び＝各枠 4:3（高さ上限 320px）
     ・全部 object-fit:cover。角丸は枠1か所（img には付けない）。写真の縁の線（border・outline・box-shadow）は付けない
   対象外（切ると中身が読めなくなる物＝写真ではない・つないだ絵・顔の切り抜き）
     漫画（manga）／図版の箱（icons・.sf-s3__figure）／HACCP のマーク・GTP の図／写真と挿絵の切り替え（/rooms/ .sf-rooms-gallery）／
     2枚の写真を横につないだ帯（.sf-cover）／本文の図（/work/ の1日の図）／カレンダー・地図の絵／スタッフの顔写真（.sf-s3__staffphoto）／モッツァレラの題字・商品の切り抜き */

/* ---------- 1. 写真の大きさの統一（追加6・追加1・追加3） ---------- */
/* 1-a 1枚ずつ（PC 1340:600） */
body .sf-slider[data-sf-slider="lead"]:not(.sf-rooms-gallery) .swiper-slide > img,
body .sf-hero > img,
body .sf-row > .sf-row__media:not(.sf-slider) > img:not([src$="HACCP.png"]),
body .sf-s3__rowmedia > img:first-child:not(.sf-s3__rowart):not([src*="gtp-index-img01"]),
body #sf-cheese-legacy .sf-s3__rowmedia > img:first-child,
body .sf-voice__movie-thumb > img,
body .l-2column--image > img,
body .l-2column--text > img.sp-only{
	display:block;width:100%;height:auto;max-height:600px;aspect-ratio:1340/600;object-fit:cover;object-position:center 50%;
	border:0;outline:0;box-shadow:none;background:transparent;
}
/* 1-b 2枚並び（3:2・PC 高さ上限 460px） */
body .sf-slider[data-sf-slider="half"] .swiper-slide img,
body .sf-slider[data-sf-slider="square"] .swiper-slide img{
	display:block;width:100%;height:auto;max-height:460px;aspect-ratio:3/2;object-fit:cover;object-position:center 45%;
	border:0;outline:0;box-shadow:none;background:transparent;
}
/* 1-c 3枚以上並び（4:3・高さ上限 320px） */
body .sf-slider[data-sf-slider="wide"] .swiper-slide img,
body .sf-slider[data-sf-slider="staff"] .swiper-slide img,
body .l-dish > img,
body .p-store__image > img{
	display:block;width:100%;height:auto;max-height:320px;aspect-ratio:4/3;object-fit:cover;object-position:center 50%;
	border:0;outline:0;box-shadow:none;background:transparent;
}
/* SP（767px 以下）：どの並びも 4:3（2枚並びは JS が1枚ずつ送る） */
@media screen and (max-width:767px){
	body .sf-slider[data-sf-slider="lead"]:not(.sf-rooms-gallery) .swiper-slide > img,
	body .sf-hero > img,
	body .sf-row > .sf-row__media:not(.sf-slider) > img:not([src$="HACCP.png"]),
	body .sf-s3__rowmedia > img:first-child:not(.sf-s3__rowart):not([src*="gtp-index-img01"]),
	body #sf-cheese-legacy .sf-s3__rowmedia > img:first-child,
	body .sf-voice__movie-thumb > img,
	body .l-2column--image > img,
	body .l-2column--text > img.sp-only,
	body .sf-slider[data-sf-slider="half"] .swiper-slide img,
	body .sf-slider[data-sf-slider="square"] .swiper-slide img{aspect-ratio:4/3;max-height:none;}
	body .sf-slider[data-sf-slider="wide"] .swiper-slide img,
	body .sf-slider[data-sf-slider="staff"] .swiper-slide img,
	body .l-dish > img,
	body .p-store__image > img{max-height:none;}
}
/* モッツァレラのページ（/mozzarella-cheese/）は子テーマ css/sf-mozz-sp.css と親の LP の指定が ID で強いので、同じ強さで並べ直す（料理3枚＝4:3・お店の写真＝4:3・栄養の写真＝1枚の比率） */
body #lp-about .l-dish,body #lp-restaurant .p-store__image{height:auto;aspect-ratio:auto;}
body #lp-about .l-dish > img,body #lp-about .l-container .l-wrapper .l-dish > img,body #lp-restaurant .p-store__image > img{height:auto;max-height:320px;aspect-ratio:4/3;object-fit:cover;}
body #lp-about .l-2column--image > img,body #lp-about .l-2column--text > img.sp-only{height:auto;aspect-ratio:1340/600;object-fit:cover;}
@media screen and (max-width:767px){
	body #lp-about .l-dish > img,body #lp-about .l-container.sf-slider .l-wrapper .l-dish > img,body #lp-restaurant .p-store__image > img{max-height:none;aspect-ratio:4/3;}
	body #lp-about .l-2column--image > img,body #lp-about .l-2column--text > img.sp-only{aspect-ratio:4/3;}
	body #lp-about .l-container.sf-slider .l-wrapper .l-dish{aspect-ratio:auto;}
	body #sf-cheese-legacy .sf-s3__rowmedia > img:first-child{aspect-ratio:4/3;}
}
/* 枠の高さは写真の比率で決める（固定の高さを外す）：ページ上の横長写真の帯・/rooms/ の広い段 */
body .sf-hero{height:auto;}
body .sf-s3__row--wide .sf-s3__rowmedia > img:first-child{height:auto;}

/* 1-d 角丸は枠1か所：スライドのコマ（説明文の無い物）・行の写真の箱・スタッフの写真の箱に持たせ、img は角丸なし。
   説明文のあるコマ（/room/ 冒頭）と、下に挿絵が並ぶ行の写真（.sf-s3__rowmedia＝挿絵を枠で切らない）は img の角丸1か所だけ */
body .sf-slider[data-sf-slider]:not(.sf-rooms-gallery):not([data-sf-slider="manga"]):not([data-sf-slider="icons"]) figure.swiper-slide:not(:has(figcaption)),
body .sf-slider[data-sf-slider="staff"] .swiper-slide figure,
body .sf-row > .sf-row__media:not(.sf-slider){border-radius:0.15rem;overflow:hidden;border:0;box-shadow:none;}
body .sf-slider[data-sf-slider]:not(.sf-rooms-gallery):not([data-sf-slider="manga"]):not([data-sf-slider="icons"]) figure.swiper-slide:not(:has(figcaption)) > img,
body .sf-slider[data-sf-slider="staff"] .swiper-slide figure > img,
body .sf-row > .sf-row__media:not(.sf-slider) > img{border-radius:0;}
body .sf-slider[data-sf-slider="lead"] .swiper-slide:has(figcaption) > img{border-radius:0.15rem;}
body .sf-slider[data-sf-slider="staff"] .swiper-slide figure{margin:0;}
/* 追加3：/rooms/ の施設紹介5枚は画像そのものに角丸と灰色の1px の縁が焼き込まれている（本番由来・rooms-img01〜05.png の四隅30px が透明＋外周1px が #707070）。
   比率の切り抜きで上下の角は外に出る。左右の縁の線は枠の外に出るまで少しだけ拡大する（1.04＝左右に各2%＝約11px。人物・牛は切れない＝2026-09-23 5枚を目視） */
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="rooms-img0"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img08"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img09"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img10"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img11"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img12"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img13"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img14"],
body .sf-slider[data-sf-slider="square"] .swiper-slide img[src*="sdgs-img15"]{transform:scale(1.04);}
/* 同じ焼き込み（外周1px の #707070）が /sdgs-2/ の sdgs-img08〜15（2枚並びのコマ＝コマが overflow:hidden なので上と同じ拡大）と、
   /gohan-2/ の gohan-img04（行の写真。枠は挿絵を切らないので overflow を持たない＝拡大すると外へはみ出す）にもある（2026-09-23 検証員 Must-1）。
   gohan-img04 は img 自身で四辺を1%ずつ切り（clip-path）、切った分だけ拡大して元の枠の大きさに戻す（0.98×1.0205≒1）。
   枠の外へははみ出さず、枠の縁に地も出ない。SP は縦がちょうど収まるので上下の線も見えていた（検証員の判定は左右だけだった）。角丸は既存の 0.15rem */
body .sf-s3__rowmedia > img[src*="gohan-img04"]{clip-path:inset(1% round 0.147rem);transform:scale(1.0205);}

/* 1-e 写真1枚ずつの位置（顔・牛が切れない位置。1枚ずつ見て決めた＝実装記録 2026-09-23 追加6 の表） */
body img[src*="sakunyu15"]{object-position:center 62%;}
body img[src*="sakunyu-img01"]{object-position:center 55%;}
body img[src*="sakunyu11"]{object-position:center 45%;}
body img[src*="1042787-scaled"]{object-position:center 60%;}
body img[src*="1043939-scaled"]{object-position:center 40%;}
body img[src*="1042668-scaled"]{object-position:center 40%;}
body img[src*="sdgs-img07"]{object-position:center 35%;}
body img[src*="1041065-scaled"]{object-position:center 45%;}
body img[src*="1054458-scaled"]{object-position:center 55%;}
body img[src*="1041118-scaled"]{object-position:center 50%;}
body img[src*="1042695-scaled"]{object-position:center 45%;}
body img[src*="staff-index-img"]{object-position:center 22%;}

/* ---------- 2. 動画は 16:9・切らない（追加4） ---------- */
/* 本文の埋め込み（生 HTML の .youtubemovie は padding-bottom:56.25%・overflow:hidden・iframe を absolute で重ねる型＝今は高さ 623px で下が切れていた）を、iframe 自身の 16:9 に戻す */
body .youtubemovie{position:static;height:auto;padding:0;overflow:visible;}
body .youtubemovie iframe{position:static;}
body iframe[src*="youtube.com/embed"],
body iframe[src*="youtube-nocookie.com/embed"]{display:block;width:100%;max-width:960px;height:auto;aspect-ratio:16/9;margin-left:auto;margin-right:auto;border:0;border-radius:0;transform:none;object-fit:initial;}
body .sf-lead .youtubemovie,body .sf-s3__movie{width:100%;max-width:960px;margin-left:auto;margin-right:auto;}
/* 2本並び（/staff-old/sutoakira/）も1本ずつ横幅いっぱい */
body .sf-s3__movies{grid-template-columns:1fr;max-width:960px;margin-left:auto;margin-right:auto;}
/* /review/ の冒頭は2列の片側（段の幅いっぱい）。16:9 のまま */
body .sf-review__lead iframe{max-width:none;}

/* ---------- 3. 再生できない動画は枠を出さない（追加5） ---------- */
/* YouTube の oEmbed が 404（2026-09-23 判定）＝削除か非公開。埋め込みのコードは本文に残し、ここで枠だけ隠す。
   先方から差し替えの動画が届いたら、本文の ID を差し替えるだけで下の条件に当たらなくなり、元どおり出る。 */
body .youtubemovie:has(iframe[src*="E0-ot1KhrcY"]),
body .youtubemovie:has(iframe[src*="LE_CzOFkL1I"]),
body iframe[src*="E0-ot1KhrcY"],
body iframe[src*="LE_CzOFkL1I"]{display:none;}

/* ---------- 4. 下層の飾りのイラスト（追加7） ---------- */
/* 置き場所は js/sf-deco.js が文字・写真・ボタン・フォーム・動画と重ならない所を数えて決める。押せない（pointer-events:none）・読み上げない（aria-hidden） */
#sf-deco-layer{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible;z-index:2;pointer-events:none;}
.sf-deco{position:absolute;margin:0;padding:0;max-width:none;pointer-events:none;}
.sf-deco img{display:block;width:100%;max-width:none;height:auto;}
.sf-deco--sway img{transform-origin:50% 100%;animation:sf-deco-sway 4.5s ease-in-out infinite alternate;}
.sf-deco--bob img{animation:sf-deco-bob 3.5s ease-in-out infinite alternate;}
.sf-deco--drift img{animation:sf-deco-drift 6s ease-in-out infinite alternate;}
.sf-deco--flutter img{transform-origin:50% 100%;animation:sf-deco-flutter 3s ease-in-out infinite alternate;}
.sf-deco img{animation-play-state:paused;}
.sf-deco.is-in img{animation-play-state:running;}
@keyframes sf-deco-sway{from{transform:rotate(-2deg);}to{transform:rotate(2deg);}}
@keyframes sf-deco-bob{from{transform:translateY(0);}to{transform:translateY(-5px);}}
@keyframes sf-deco-drift{from{transform:translateX(-6px);}to{transform:translateX(6px);}}
@keyframes sf-deco-flutter{from{transform:rotate(-3deg);}to{transform:rotate(3deg);}}
@media (prefers-reduced-motion:reduce){.sf-deco img{animation:none !important;}}