/* 須藤牧場 子テーマ：写真の横スライド（第9回・2026-09-19）。親 header2.php が読む Swiper 11 の CSS 変数を上書きするだけ。子テーマで Swiper は読まない。HTML に swiper クラスは書かず JS が足す */
/* 文字だけの物差し --sf-t＝1rem の 1/100・下限 0.95px。親の 1rem は幅 768〜1455px で 52.75〜99.9px に縮む（css/style.css 118行 min(100vw/1456*100,100px)）ので、文字の大きさと行送りだけをこの単位で書く。
   1456px 以上と SP（390 で 1rem＝104px）では今までと同じ大きさ、768〜1366px の帯だけ下限が効いて 14×0.95＝13.3px 以上になる。器の幅・余白は rem のまま（1rem を変えると PC の組みが 768px に入らない）。第17回 2026-09-19 */
:root{--sf-t:max(0.01rem,0.95px);}
.sf-slider{margin-top:0.3rem;position:relative;--sf-ctrl:max(0.5rem,48px);padding-bottom:var(--sf-ctrl);min-width:0;--swiper-theme-color:#A71527;--swiper-navigation-size:max(0.18rem,16px);--swiper-pagination-bottom:calc((var(--sf-ctrl) - var(--swiper-pagination-bullet-size)) / 2);--swiper-pagination-bullet-size:0.1rem;--swiper-pagination-bullet-horizontal-gap:0.03rem;--swiper-pagination-bullet-inactive-color:#604C38;--swiper-pagination-bullet-inactive-opacity:0.35;}
@media screen and (min-width:768px){.sf-slider{margin-top:0.5rem;--swiper-pagination-bullet-horizontal-gap:0.06rem;}}
/* JS が動く前・動かない時（CDN 不達）：横に流れる帯。写真は隠さない */
.sf-slider:not(.swiper) .swiper-wrapper{display:flex;gap:0.12rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.sf-slider:not(.swiper) .swiper-slide{flex:0 0 80%;scroll-snap-align:start;}
@media screen and (min-width:768px){.sf-slider:not(.swiper) .swiper-slide{flex-basis:32%;}}
.sf-slider .swiper-wrapper{align-items:stretch;}
.sf-slider .swiper-slide{height:auto;box-sizing:border-box;margin:0;display:flex;flex-direction:column;}
.sf-slider .swiper-slide img{display:block;width:100%;height:auto;object-fit:contain;border-radius:0.15rem;background:#fff;}
.sf-slider .swiper-slide figcaption{margin-top:0.08rem;font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));color:#604C38;font-weight:500;text-align:center;}
/* 矢印＝押す物 48px 以上。このテーマの 1rem は幅で伸び縮みし、768〜1279px の帯だけ 52.75〜70.3px まで縮む（0.5rem＝26〜35px）。大きさは rem のまま、下限を px で併記する（PC1440＝49.5px・SP390＝52px は今のまま、768〜1279px だけ 48px になる）。赤 #A71527 の印。ドットは押す物にしない（現在位置の印だけ）。第14回 2026-09-19 */
.sf-slider .swiper-button-prev,.sf-slider .swiper-button-next{width:var(--sf-ctrl);height:var(--sf-ctrl);margin-top:0;border-radius:50%;background:#fff;box-shadow:0 0.02rem 0.06rem rgba(27,20,17,0.18);top:auto;bottom:0;}
.sf-slider .swiper-button-prev{left:0.04rem;}
.sf-slider .swiper-button-next{right:0.04rem;}
/* 先頭・末尾のコマでも矢印は薄く残す（片側だけ消えると操作行が非対称に見える＝検証記録 2026-09-21 §3-4 b）。押せないのは pointer-events:none のまま。第28回 2026-09-21 */
.sf-slider .swiper-button-disabled{opacity:.25;pointer-events:none;}
.sf-slider .swiper-pagination{pointer-events:none;}
.sf-slider .swiper-pagination-lock,.sf-slider .swiper-button-lock{display:none;}
/* コマが全部枠に入って送りが要らない時（Swiper が点と矢印を *-lock で隠す時）は、操作行の場所取りも消す。:has() は Chrome 105・Safari 15.4・Firefox 121 以降（MDN browser-compat-data css.selectors.has・2026-09-21 取得）。効かない古い環境では今までどおり空きが残るだけで壊れない。第28回 2026-09-21 */
.sf-slider:has(.swiper-pagination-lock){padding-bottom:0;}
/* /iot/ だけ：文章と2列の行の中（.sf-row__media＝PC で半分の幅）。親 sf-page.css の .sf-row__media img の角丸と同じ */
.sf-row__media.sf-slider{margin-top:0;}
/* 点は必ず矢印の内側に収める（SP で点が12個並んでも矢印にぶつからない）。第26回 2026-09-20 */
.sf-slider .swiper-pagination.swiper-pagination-horizontal{left:calc(var(--sf-ctrl) + 0.04rem);right:calc(var(--sf-ctrl) + 0.04rem);width:auto;}
/* 段の親が display:flex の時に、Swiper の overflow:hidden のせいでスライドが幅0に潰れるのを止める（/sdgs-2/ の3本目＝IoT の写真4枚が今この形で1枚も見えていない）。/iot/ の半分幅のスライド（.sf-row__media）は除く。第26回 2026-09-20 */
.sf-s3__sec>.sf-slider:not(.sf-row__media){align-self:stretch;width:100%;}
/* 写真が1枚だけのスライド（同じ写真の重複を外した後など）：送らない・点と矢印を出さない・操作行の場所取りも消す・1枚を幅いっぱいに出す。
   JS が付ける sf-slider--single と、JS が動く前・動かない時の :only-child の両方で効かせる（:only-child は古い環境でも効く）。2026-09-23 /room/ 冒頭 */
.sf-slider.sf-slider--single{padding-bottom:0;}
.sf-slider--single .swiper-pagination,.sf-slider--single .swiper-button-prev,.sf-slider--single .swiper-button-next{display:none;}
.sf-slider:not(.swiper) .swiper-slide:only-child{flex-basis:100%;}
/* 漫画（/sanbright/・data-sf-slider="manga"・dir="rtl"）の大きさ。2026-09-23 漫画ビューアの直し。
   --sf-manga-w＝スライダー全体の幅。本文の枠（100%）の中央にそろえたまま、足りない時だけ枠の外へ広げる（margin-left で中央寄せ）。
   SP（〜767）＝画面幅いっぱい（1ページ＝画面幅）／768〜1024＝1ページずつ・最大 600px／1025〜＝見開き2ページ・1ページ 520〜526px（1100 と 1440 の実測は検証記録）。 */
.sf-slider[data-sf-slider="manga"]{--sf-manga-w:100vw;width:var(--sf-manga-w);max-width:none;box-sizing:border-box;margin-left:calc((100% - var(--sf-manga-w)) / 2);margin-right:0;}
@media screen and (min-width:768px){.sf-slider[data-sf-slider="manga"]{--sf-manga-w:min(100%,600px);}}
@media screen and (min-width:1025px){.sf-slider[data-sf-slider="manga"]{--sf-manga-w:max(100%,min(1064px,calc(100vw - 48px)));}}
/* 矢印は写真の下の操作行の両端（コマに重ならない）。sf-stage3.css の 1280px 以上の「本文の外へ出す」指定は、スライダーの overflow:hidden で矢印が切れて見えず押せなかった（2026-09-23 実測 1280・1440）＝漫画だけ操作行に戻す。次へ＝左・前へ＝右（dir="rtl"） */
.sf-slider[data-sf-slider="manga"].swiper-rtl .swiper-button-next{left:0.04rem;right:auto;}
.sf-slider[data-sf-slider="manga"].swiper-rtl .swiper-button-prev{right:0.04rem;left:auto;}
/* 押すと拡大。指で送った時は開かない（JS 側） */
.sf-slider--zoom .swiper-slide img{cursor:zoom-in;}
.sf-slider--zoom .swiper-slide img:focus-visible{outline:3px solid #A71527;outline-offset:-3px;}
/* 拡大表示（画面幅 900px 未満と fancybox が無い時に JS が作る .sf-mlb）。ページは元の大きさ 800px・枠の中をスクロール。ボタンと題は画面に固定 */
html.sf-mlb-open{overflow:hidden;}
.sf-mlb{position:fixed;inset:0;z-index:111200;background:rgba(0,0,0,.9);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.sf-mlb__img{display:block;width:800px;max-width:none;height:auto;margin:68px auto 76px;background:#fff;}
.sf-mlb__cap{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 64px;background:rgba(0,0,0,.75);color:#fff;text-align:center;font-size:14px;line-height:1.6;}
.sf-mlb__btn,.sf-mlb__close{position:fixed;width:48px;height:48px;border:0;border-radius:50%;background:#fff;cursor:pointer;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.sf-mlb__btn{top:50%;margin-top:-24px;}
.sf-mlb__next{left:12px;}
.sf-mlb__prev{right:12px;}
@media screen and (max-width:767px){.sf-mlb__btn{top:auto;bottom:4px;margin-top:0;}.sf-mlb__next{left:8px;}.sf-mlb__prev{right:8px;}}
.sf-mlb__btn[hidden]{display:none;}
.sf-mlb__btn::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:12px;border-top:3px solid #A71527;border-right:3px solid #A71527;}
.sf-mlb__next::after{transform:translate(-35%,-50%) rotate(-135deg);}
.sf-mlb__prev::after{transform:translate(-65%,-50%) rotate(45deg);}
.sf-mlb__close{top:10px;right:10px;}
.sf-mlb__close::before,.sf-mlb__close::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:3px;margin:-1.5px 0 0 -10px;background:#1B1411;transform:rotate(45deg);}
.sf-mlb__close::after{transform:rotate(-45deg);}
/* 漫画を本に見せる（2026-09-23 井埜さん「本ぽい感じにしといて」）。JS（sf-slider.js の book()）がスライダーを .sf-manga で包み、紙・ノド・ページ数・めくりの重ねを足す。
   幅と中央寄せは包みの .sf-manga が持つ（上の --sf-manga-w と同じ値）。スライダー本体は包みの幅いっぱい。
   紙の地と外側の影をスライダーの外（包み）に置くのは、Swiper の overflow:hidden で影が切れるため。角丸・白い枠の箱にはしない（本が置かれている影だけ）。 */
.sf-manga{position:relative;box-sizing:border-box;max-width:none;--sf-ctrl:max(0.5rem,48px);--sf-count:28px;--sf-manga-w:100vw;width:var(--sf-manga-w);margin-left:calc((100% - var(--sf-manga-w)) / 2);margin-top:0.3rem;} /* 上の余白は包む前の実測と同じ（SP 0.3rem・768〜 0.5rem） */
@media screen and (min-width:768px){.sf-manga{--sf-manga-w:min(100%,600px);margin-top:0.5rem;}}
@media screen and (min-width:1025px){.sf-manga{--sf-manga-w:max(100%,min(1064px,calc(100vw - 48px)));}}
.sf-manga>.sf-slider[data-sf-slider="manga"]{width:100%;margin:0;position:relative;z-index:1;padding-bottom:calc(var(--sf-ctrl) + var(--sf-count));--swiper-pagination-bottom:calc((var(--sf-ctrl) - var(--swiper-pagination-bullet-size)) / 2);}
/* ページは紙の上に直に刷った見え方：角丸と白い地を外し、紙の色はスライドに持たせる */
.sf-manga>.sf-slider[data-sf-slider="manga"] .swiper-slide{background:#FFFDF8;}
.sf-manga>.sf-slider[data-sf-slider="manga"] .swiper-slide.sf-manga__blank{background:transparent;}
.sf-manga>.sf-slider[data-sf-slider="manga"] .swiper-slide img{border-radius:0;background:transparent;} /* sf-stage3.css 112行 .sf-s3__manga .swiper-slide img（白地・角丸）より強く */
/* 紙の地と外側のやわらかい影（本の小口の重なりを 1〜3px の線で少しだけ） */
.sf-manga__paper{position:absolute;z-index:0;left:0;right:0;top:0;bottom:calc(var(--sf-ctrl) + var(--sf-count));background:#FFFDF8;pointer-events:none;
  box-shadow:0 1px 0 #E8E0CF,0 2px 0 #FBF7EE,0 3px 0 #E3DAC6,0 4px 10px rgba(60,40,20,.14),0 14px 34px rgba(60,40,20,.20);}
.sf-manga.is-cover .sf-manga__paper{left:25%;right:25%;} /* 表紙だけの時は真ん中寄りの1ページ分（2026-09-24：前は右半分だけで左半分が空いて見えた） */
/* 2026-09-24 表紙の位置：見開きの表紙だけの時は、スライドを半ページ左へ寄せる（表紙が 25〜75% に来る）。次へで表紙が右へずれて 2–3 が開く（JS の coverTurn） */
.sf-manga.is-spread.is-cover>.sf-slider[data-sf-slider="manga"] .swiper-slide{transform:translateX(-50%);}
.sf-manga.is-cover .sf-manga__hint{left:25%;right:25%;}
.sf-manga.is-cover .sf-manga__zoom{right:calc(25% + 8px);}
.sf-manga__paper{transition:left .4s ease-out,right .4s ease-out;}
.sf-manga.is-cover .sf-manga__paper{transition-delay:.6s;} /* 前へで表紙に戻る時は、2ページ目がめくれ終わってから縮める */
.sf-manga__zoom{transition:right .4s ease-out,color .2s ease;}
.sf-manga.is-cover .sf-manga__zoom{transition-delay:.6s,0s;}
.sf-manga.is-opening>.sf-slider[data-sf-slider="manga"] .swiper-wrapper{visibility:hidden;} /* 表紙の出入りを重ねている間は本物のスライドを隠す */
.sf-manga__opage,.sf-manga__ocover{position:absolute;top:0;bottom:0;width:50%;background:#FFFDF8;}
.sf-manga__opage{left:0;}
.sf-manga__ocover{left:50%;}
.sf-manga__opage img,.sf-manga__ocover img{display:block;width:100%;height:auto;}
.sf-manga__open.is-o-next .sf-manga__ocover{animation:sfmCoverRight .4s ease-out both;}
.sf-manga__open.is-o-next .sf-manga__opage{animation:sfmFadeIn .3s .25s ease-out both;}
.sf-manga__open.is-o-next .sf-manga__leaf{left:0;transform-origin:100% 50%;animation:sfmTurnNext .6s .4s cubic-bezier(.45,.05,.35,1) both;}
.sf-manga__open.is-o-next .sf-manga__face.is-back::after{animation-delay:.4s;}
.sf-manga__open.is-o-prev .sf-manga__leaf{left:50%;transform-origin:0 50%;animation:sfmTurnPrev .6s cubic-bezier(.45,.05,.35,1) both;}
.sf-manga__open.is-o-prev .sf-manga__face.is-front::after{background:linear-gradient(to right,rgba(40,25,10,.28),rgba(40,25,10,0) 60%);}
.sf-manga__open.is-o-prev .sf-manga__opage{animation:sfmFade .3s .6s ease-in both;}
.sf-manga__open.is-o-prev .sf-manga__ocover{animation:sfmCoverLeft .4s .6s ease-out both;}
/* ノド（綴じ目）の影：幅 28px・真ん中に向かって暗く。見開きの時だけ */
.sf-manga__gutter{display:none;position:absolute;z-index:2;top:0;bottom:calc(var(--sf-ctrl) + var(--sf-count));left:50%;width:28px;margin-left:-14px;pointer-events:none;
  background:linear-gradient(to right,rgba(60,40,20,0) 0%,rgba(60,40,20,.07) 30%,rgba(40,25,10,.26) 50%,rgba(60,40,20,.07) 70%,rgba(60,40,20,0) 100%);}
.sf-manga.is-spread:not(.is-cover) .sf-manga__gutter{display:block;}
/* ページ数「1–2 / 5」：ページの下・点の上に小さく */
.sf-manga__count{position:absolute;z-index:2;left:0;right:0;bottom:var(--sf-ctrl);height:var(--sf-count);margin:0;display:flex;align-items:flex-end;justify-content:center;font-size:13px;line-height:1;letter-spacing:.08em;color:#604C38;font-feature-settings:"tnum";pointer-events:none;}
/* めくる動き（見開きのページ送りの時だけ JS が重ねる・600ms で消える）。左のページがノドを軸に右へ（次）／右のページが左へ（前） */
.sf-manga__turn{position:absolute;z-index:3;left:0;right:0;top:0;bottom:calc(var(--sf-ctrl) + var(--sf-count));perspective:3600px;pointer-events:none;}
.sf-manga__under,.sf-manga__leaf{position:absolute;top:0;bottom:0;width:50%;}
.sf-manga__turn.is-next .sf-manga__under{left:50%;}
.sf-manga__turn.is-prev .sf-manga__under{left:0;}
.sf-manga__under{background:#FFFDF8;}
.sf-manga__under.is-blank{background:transparent;}
.sf-manga__under.is-fade{animation:sfmFade .6s ease-in forwards;}
.sf-manga__leaf{transform-style:preserve-3d;}
.sf-manga__turn.is-next .sf-manga__leaf{left:0;transform-origin:100% 50%;animation:sfmTurnNext .6s cubic-bezier(.45,.05,.35,1) forwards;}
.sf-manga__turn.is-prev .sf-manga__leaf{left:50%;transform-origin:0 50%;animation:sfmTurnPrev .6s cubic-bezier(.45,.05,.35,1) forwards;}
.sf-manga__face{position:absolute;inset:0;background:#FFFDF8;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;}
.sf-manga__face.is-blank{background:transparent;}
.sf-manga__face.is-back{transform:rotateY(180deg);}
.sf-manga__face img,.sf-manga__under img{display:block;width:100%;height:auto;}
.sf-manga__face::after{content:'';position:absolute;inset:0;pointer-events:none;}
.sf-manga__face.is-front::after{background:linear-gradient(to left,rgba(40,25,10,.28),rgba(40,25,10,0) 60%);animation:sfmShadeIn .6s ease-in forwards;opacity:0;}
.sf-manga__turn.is-prev .sf-manga__face.is-front::after{background:linear-gradient(to right,rgba(40,25,10,.28),rgba(40,25,10,0) 60%);}
.sf-manga__face.is-back::after{background:linear-gradient(to right,rgba(40,25,10,.28),rgba(40,25,10,0) 60%);animation:sfmShadeOut .6s ease-out forwards;}
.sf-manga__turn.is-prev .sf-manga__face.is-back::after{background:linear-gradient(to left,rgba(40,25,10,.28),rgba(40,25,10,0) 60%);}
.sf-manga__face.is-blank::after{display:none;}
@keyframes sfmTurnNext{from{transform:rotateY(0deg);}to{transform:rotateY(180deg);}}
@keyframes sfmTurnPrev{from{transform:rotateY(0deg);}to{transform:rotateY(-180deg);}}
@keyframes sfmShadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes sfmShadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes sfmFade{from{opacity:1;}to{opacity:0;}}
@keyframes sfmFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes sfmCoverRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes sfmCoverLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.sf-manga__turn{display:none;}.sf-manga__paper,.sf-manga__zoom{transition:none;}.sf-manga.is-opening>.sf-slider[data-sf-slider="manga"] .swiper-wrapper{visibility:visible;}}
/* 2026-09-23 操作性の直し（井埜さん「押せないから漫画押すと変わる方がいい」「ページ送りが逆な気がする」）。JS は sf-slider.js の book()。
   本を押して送る：左半分＝次・右半分＝前（右から左へ読む）。マウスを乗せると進む側の端にうっすら矢印と手のカーソル（.sf-manga__hint）。
   本の幅は JS が画面の高さから決める（--sf-manga-w を px で上書き）。拡大は右上の虫めがね（.sf-manga__zoom）。 */
.sf-manga.is-hint-next>.sf-slider[data-sf-slider="manga"],.sf-manga.is-hint-prev>.sf-slider[data-sf-slider="manga"]{cursor:pointer;}
.sf-manga>.sf-slider[data-sf-slider="manga"] .swiper-slide img{cursor:inherit;-webkit-user-select:none;user-select:none;}
.sf-manga__hint{position:absolute;z-index:3;left:0;right:0;top:0;bottom:calc(var(--sf-ctrl) + var(--sf-count));pointer-events:none;}
.sf-manga__hint::before,.sf-manga__hint::after{content:'';position:absolute;top:0;bottom:0;width:88px;opacity:0;transition:opacity .2s ease;
  background-repeat:no-repeat;background-size:44px 44px,100% 100%;}
.sf-manga__hint::before{left:0;background-position:14px 50%,0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='21' fill='%23fff' fill-opacity='.92'/%3E%3Cpath d='M25 13l-9 9 9 9' fill='none' stroke='%23A71527' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to right,rgba(27,20,17,.16),rgba(27,20,17,0));}
.sf-manga__hint::after{right:0;background-position:calc(100% - 14px) 50%,0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='21' fill='%23fff' fill-opacity='.92'/%3E%3Cpath d='M19 13l9 9-9 9' fill='none' stroke='%23A71527' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to left,rgba(27,20,17,.16),rgba(27,20,17,0));}
.sf-manga.is-hint-next .sf-manga__hint::before,.sf-manga.is-hint-prev .sf-manga__hint::after{opacity:1;}
.sf-manga__zoom{position:absolute;z-index:4;top:8px;right:8px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#604C38;cursor:zoom-in;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(27,20,17,.28);}
.sf-manga__zoom:hover{color:#A71527;}
.sf-manga__zoom:focus-visible{outline:3px solid #A71527;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.sf-manga__hint::before,.sf-manga__hint::after{transition:none;}}