/* 須藤牧場 子テーマ：第3段（旧テンプレ16ページ）の配置。
   /rooms/ /bed-2/ /gohan-2/ /sakunyu-2/ /room/ /cheese/ /gtp/ /sdgs-2/ /reservation/ /sanbright/ とスタッフ個別6ページ。
   親 css/style.css の汎用部品（.u-width .p-page-header）に足りない配置だけ。第2段 css/sf-stage2.css の後に読む。
   物差しは親と同じ 1rem≒100px（html{font-size}）。色は親にある物だけ：赤 #A71527・緑 #5DA829・茶 #604C38・文字 #1B1411／#666666・生成り #FAF6EC・白 #fff。
   important 指定は使わない。インラインの style は使わない。 */
/* 文字だけの物差し --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-s3__header{margin-bottom:0.1rem;}
/* 英字が無いページ（題名が日本語だけ）は日本語を大きく出す */
.sf-s3__header--jp .p-page-header__heading--main .sf-s3__jp{font-size:calc(26*var(--sf-t));line-height:calc(38*var(--sf-t));letter-spacing:0.02em;font-weight:700;margin-top:0;}
@media screen and (min-width:768px){.sf-s3__header--jp .p-page-header__heading--main .sf-s3__jp{font-size:calc(40*var(--sf-t));line-height:calc(56*var(--sf-t));}}

/* ── 段 ───────────────────────────────── */
.sf-s3__sec{margin-top:0.7rem;position:relative;}
@media screen and (min-width:768px){.sf-s3__sec{margin-top:1.2rem;}}
.sf-s3__sec:first-of-type{margin-top:0.3rem;}
@media screen and (min-width:768px){.sf-s3__sec:first-of-type{margin-top:0.5rem;}}
.sf-s3__h2{color:#A71527;font-size:calc(22*var(--sf-t));line-height:calc(34*var(--sf-t));font-weight:700;text-align:center;}
@media screen and (min-width:768px){.sf-s3__h2{font-size:calc(30*var(--sf-t));line-height:calc(44*var(--sf-t));}}
.sf-s3__h3{color:#A71527;font-size:calc(20*var(--sf-t));line-height:calc(32*var(--sf-t));font-weight:700;}
@media screen and (min-width:768px){.sf-s3__h3{font-size:calc(24*var(--sf-t));line-height:calc(38*var(--sf-t));}}
.sf-s3__lead{margin-top:0.2rem;font-size:calc(16*var(--sf-t));line-height:calc(32*var(--sf-t));font-weight:400;color:#1B1411;text-align:center;}
@media screen and (min-width:768px){.sf-s3__lead{margin-top:0.24rem;font-size:calc(17*var(--sf-t));line-height:calc(34*var(--sf-t));}}
.sf-s3__text{margin-top:0.16rem;font-size:calc(16*var(--sf-t));line-height:calc(32*var(--sf-t));font-weight:400;color:#1B1411;}
@media screen and (min-width:768px){.sf-s3__text{font-size:calc(17*var(--sf-t));line-height:calc(34*var(--sf-t));}}
.sf-s3__text a,.sf-s3__lead a{color:#A71527;text-decoration:underline;}
.sf-s3__text a:hover,.sf-s3__lead a:hover{text-decoration:none;}

/* ── 白いカード（文章の入れ物） ─────────── */
.sf-s3__card{margin-top:0.3rem;background:#fff;border-radius:0.2rem;padding:0.24rem 0.2rem;}
@media screen and (min-width:768px){.sf-s3__card{margin-top:0.5rem;padding:0.4rem;}}
.sf-s3__card--plain{background:transparent;padding:0;margin-top:0.24rem;}
@media screen and (min-width:768px){.sf-s3__card--plain{padding:0 0.4rem;margin-top:0.3rem;}.sf-s3__card--plain .sf-s3__text{text-align:center;}}
/* 挿絵の列（本番の各段にあった水彩の絵 *-art*.png・staff-index-art*r.png を、文章の下に流れで戻す。写真にも文字にも重ねない＝絶対配置にしない。白いカードの上なら PNG の縁が見えない）2026-09-19 第15回 */
.sf-s3__cardarts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:0.12rem 0.2rem;margin-top:0.12rem;}
.sf-s3__cardarts--center{justify-content:center;}
.sf-s3__cardarts--pair{justify-content:space-between;}
.sf-s3__cardart{display:block;width:auto;height:0.9rem;max-width:100%;object-fit:contain;}
.sf-s3__cardarts--staff .sf-s3__cardart{height:1.2rem;}
@media screen and (min-width:768px){.sf-s3__cardarts{margin-top:0.16rem;}.sf-s3__cardart{height:max(1.1rem,72px);}.sf-s3__cardarts--staff .sf-s3__cardart{height:max(1.6rem,96px);}}
.sf-s3__movies > .sf-s3__cardarts{grid-column:1 / -1;}

/* ── 写真を並べる（PC 3列・SP 1列。説明文はその下） ── */
.sf-s3__grid{margin-top:0.3rem;display:grid;grid-template-columns:1fr;gap:0.2rem;}
@media screen and (min-width:768px){.sf-s3__grid{margin-top:0.5rem;grid-template-columns:repeat(3,1fr);gap:0.3rem;}}
.sf-s3__grid--2{grid-template-columns:1fr;}
@media screen and (min-width:768px){.sf-s3__grid--2{grid-template-columns:repeat(2,1fr);}}
.sf-s3__grid--5{grid-template-columns:repeat(2,1fr);gap:0.12rem;}
@media screen and (min-width:768px){.sf-s3__grid--5{grid-template-columns:repeat(5,1fr);gap:0.16rem;}}
.sf-s3__grid--5 .sf-s3__cell img{height:1.2rem;}
@media screen and (min-width:768px){.sf-s3__grid--5 .sf-s3__cell img{height:1.7rem;}}
.sf-s3__grid--4{grid-template-columns:repeat(2,1fr);gap:0.12rem;}
@media screen and (min-width:768px){.sf-s3__grid--4{grid-template-columns:repeat(4,1fr);gap:0.2rem;}}
.sf-s3__cell{margin:0;}
.sf-s3__cell img{display:block;width:100%;height:1.9rem;object-fit:cover;border-radius:0.15rem;background:#fff;}
@media screen and (min-width:768px){.sf-s3__cell img{height:2.2rem;}}
.sf-s3__grid--4 .sf-s3__cell img{height:1.2rem;}
@media screen and (min-width:768px){.sf-s3__grid--4 .sf-s3__cell img{height:1.7rem;}}
.sf-s3__cap{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;}

/* ── 横にすべらせて見る帯（旧テーマのスライダーの代わり。JS を使わない） ── */
/* 横スライドの規則は css/sf-slider.css（第9回・2026-09-19）。帯 .sf-s3__strip は廃止 */

/* ── 写真＋文章の行（PC 2列・SP 縦。偶数行は左右を入れ替える） ── */
.sf-s3__row{margin-top:0.4rem;display:flex;flex-direction:column;gap:0.2rem;}
@media screen and (min-width:768px){
  .sf-s3__row{flex-direction:row;align-items:center;gap:0.6rem;margin-top:0.8rem;}
  .sf-s3__row--rev{flex-direction:row-reverse;}
  .sf-s3__row>.sf-s3__rowtext,.sf-s3__row>.sf-s3__rowmedia{width:calc(50% - 0.3rem);}
}
/* 全幅の行（写真を主役に。/rooms/ の 1・4・7 段目＝W・2・2・W・2・2・W・2・2 で同じ型を3段続けない）2026-09-19 第12回 */
.sf-s3__row--wide{flex-direction:column;gap:0.24rem;margin-top:0.7rem;}
.sf-s3__row--wide>.sf-s3__rowmedia{order:-1;}
.sf-s3__row--wide .sf-s3__rowmedia > img:first-child{height:2.2rem;object-fit:cover;}
@media screen and (min-width:768px){
  .sf-s3__row--wide{flex-direction:column;align-items:stretch;gap:0.3rem;margin-top:1.2rem;}
  .sf-s3__row--wide>.sf-s3__rowtext,.sf-s3__row--wide>.sf-s3__rowmedia{width:100%;}
  .sf-s3__row--wide>.sf-s3__rowtext{max-width:7.6rem;}
  .sf-s3__row--wide .sf-s3__rowmedia > img:first-child{height:4.4rem;}
}
.sf-s3__rowmedia{margin:0;position:relative;}
.sf-s3__rowmedia img{display:block;width:100%;height:auto;border-radius:0.15rem;}
/* 絵（水彩のイラスト。縁が白い透過 PNG）は写真に重ねない。白い帯（札）もやめ、生成り #FAF6EC の地にそのまま置く（生成りの上では白い縁がほとんど見えない）。全幅の行（768px 以上）は本文の右の空き（本文は最大 7.6rem・行は 11.08rem）に置き、写真の下に帯を作らない。2026-09-19 第14回・AD⑥「写真の下の白い帯の 91.7% が空」 */
.sf-s3__rowmedia--art{display:flex;flex-direction:column;align-items:flex-end;gap:0.08rem;}
.sf-s3__rowmedia--art>img:first-child{width:100%;border-radius:0.15rem;}
.sf-s3__artbox{display:block;line-height:0;}
.sf-s3__rowmedia img.sf-s3__rowart{display:block;width:0.9rem;height:auto;border-radius:0;margin:0;}
@media screen and (min-width:768px){.sf-s3__rowmedia img.sf-s3__rowart{width:1.1rem;}.sf-s3__row--wide .sf-s3__artbox{position:absolute;right:0;top:calc(100% + 0.3rem);}}

/* ── 動画（16:9・最大 8rem） ───────────── */
.sf-s3__movie{margin:0.3rem auto 0;width:100%;max-width:8rem;}
.sf-s3__movie iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:0.15rem;}
.sf-s3__movies{margin-top:0.3rem;display:grid;grid-template-columns:1fr;gap:0.2rem;}
@media screen and (min-width:768px){.sf-s3__movies{grid-template-columns:repeat(2,1fr);gap:0.3rem;}}
.sf-s3__movies iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:0.15rem;}

/* ── 1枚の写真・図 ───────────────────── */
.sf-s3__figure{margin:0.3rem 0 0;}
.sf-s3__figure img{display:block;width:100%;height:auto;border-radius:0.15rem;}
.sf-s3__figure figcaption{margin-top:0.08rem;font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));color:#604C38;text-align:center;}
.sf-s3__figure--narrow{max-width:5.2rem;margin-left:auto;margin-right:auto;}

/* ── 押すボタン（親の .q_button と同じ見た目・高さ 0.48rem＝48px） ── */
.sf-s3__btn{display:inline-flex;align-items:center;justify-content:center;min-height:max(0.48rem, 48px);min-width:48px;padding:0 0.32rem;border-radius:0.24rem;background:#A71527;color:#fff;text-decoration:none;font-size:calc(16*var(--sf-t));line-height:calc(26*var(--sf-t));font-weight:700;}
.sf-s3__btn:hover{background:#8b1120;}
.sf-s3__btns{margin-top:0.3rem;text-align:center;}

/* ── 漫画（右から左へ読む・1枚ずつ止まる） ── */
.sf-s3__manga .swiper-slide img{background:#fff;border-radius:0.1rem;}
.sf-s3__manganote{margin-top:0.1rem;font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));color:#604C38;text-align:center;}
/* 漫画の矢印はコマの上に乗せない。本文の外（左右の余白）に出す。dir="rtl" なので Swiper が .swiper-rtl を付け左右が入れ替わる＝その状態を名指しする */
@media screen and (min-width:1280px){
  .sf-s3__manga.swiper-rtl .swiper-button-prev{right:-0.66rem;left:auto;}
  .sf-s3__manga.swiper-rtl .swiper-button-next{left:-0.66rem;right:auto;}
}

/* ── スタッフ個別ページ ───────────────── */
.sf-s3__staff{margin-top:0.3rem;display:flex;flex-direction:column;gap:0.2rem;align-items:center;}
@media screen and (min-width:768px){.sf-s3__staff{margin-top:0.5rem;flex-direction:row;align-items:flex-start;gap:0.6rem;}
  .sf-s3__staffphoto{width:calc(40% - 0.3rem);}
  .sf-s3__staffbody{width:calc(60% - 0.3rem);}}
.sf-s3__staffphoto{margin:0;width:2.4rem;max-width:100%;}
.sf-s3__staffphoto img{display:block;width:100%;height:auto;}
.sf-s3__staffname{color:#A71527;font-size:calc(24*var(--sf-t));line-height:calc(36*var(--sf-t));font-weight:700;}
@media screen and (min-width:768px){.sf-s3__staffname{font-size:calc(30*var(--sf-t));line-height:calc(44*var(--sf-t));}}
.sf-s3__staffname small{display:block;font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));color:#604C38;font-weight:500;}
.sf-s3__stafflabel{margin-top:0.16rem;color:#604C38;font-size:calc(14*var(--sf-t));line-height:calc(22*var(--sf-t));letter-spacing:0.08em;font-weight:700;}
.sf-s3__stafftable{margin-top:0.12rem;width:100%;border-collapse:collapse;}
.sf-s3__stafftable th,.sf-s3__stafftable td{display:block;width:100%;text-align:left;padding:0;}
.sf-s3__stafftable th{color:#604C38;font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));font-weight:700;margin-top:0.14rem;}
.sf-s3__stafftable td{font-size:calc(16*var(--sf-t));line-height:calc(30*var(--sf-t));color:#1B1411;}
@media screen and (min-width:768px){
  .sf-s3__stafftable tr{display:flex;gap:0.2rem;align-items:flex-start;margin-top:0.14rem;}
  .sf-s3__stafftable th{width:1.1rem;flex:0 0 auto;margin-top:0.02rem;}
  .sf-s3__stafftable td{width:auto;flex:1 1 auto;}
}
/* ほかのスタッフ（親 staffList.php の ul/li をそのまま包む） */
.sf-s3__stafflist{margin-top:0.5rem;}
@media screen and (min-width:768px){.sf-s3__stafflist{margin-top:0.9rem;}}
.sf-s3__stafflist ul{list-style:none;margin:0.2rem 0 0;padding:0;}
.sf-s3__stafflist a{display:block;text-decoration:none;color:#1B1411;}
.sf-s3__stafflist figure{margin:0;}
.sf-s3__stafflist img{display:block;width:100%;height:auto;border-radius:0.12rem;background:#fff;}
.sf-s3__stafflist .text{margin-top:0.06rem;text-align:center;}
.sf-s3__stafflist .text p{font-size:calc(16*var(--sf-t));line-height:calc(26*var(--sf-t));font-weight:700;color:#A71527;}
.sf-s3__stafflist .text small{font-size:calc(14*var(--sf-t));line-height:calc(22*var(--sf-t));color:#604C38;}

/* ── /reservation/・/cheese/ のフォーム（第2段 /contact/ と同じ組み方） ── */
.sf-s3__form .wpcf7{background:#fff;border-radius:0.2rem;padding:0.24rem 0.2rem;}
@media screen and (min-width:768px){.sf-s3__form .wpcf7{padding:0.4rem;}}
.sf-s3__form .wpcf7 table{width:100%;border-collapse:collapse;}
.sf-s3__form .wpcf7 tr{display:block;margin-bottom:0.2rem;}
.sf-s3__form .wpcf7 th,.sf-s3__form .wpcf7 td{display:block;width:100%;padding:0;text-align:left;}
.sf-s3__form .wpcf7 th p{margin:0 0 0.06rem;font-size:calc(16*var(--sf-t));line-height:calc(24*var(--sf-t));font-weight:700;color:#604C38;}
.sf-s3__form .wpcf7 td p{margin:0;}
.sf-s3__form .wpcf7 .wpcf7-form-control-wrap{display:block;}
.sf-s3__form .wpcf7 input[type="text"],
.sf-s3__form .wpcf7 input[type="email"],
.sf-s3__form .wpcf7 input[type="tel"],
.sf-s3__form .wpcf7 input[type="date"],
.sf-s3__form .wpcf7 input[type="number"],
.sf-s3__form .wpcf7 select,
.sf-s3__form .wpcf7 textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;min-height:max(0.52rem, 48px);padding:0.12rem 0.14rem;border:0.01rem solid #898484;border-radius:0.08rem;background:#fff;font-family:inherit;font-size:calc(16*var(--sf-t));line-height:calc(26*var(--sf-t));color:#1B1411;}
.sf-s3__form .wpcf7 textarea{min-height:1.6rem;}
.sf-s3__form .wpcf7 input:focus,.sf-s3__form .wpcf7 select:focus,.sf-s3__form .wpcf7 textarea:focus{outline:0.02rem solid #5DA829;outline-offset:0.01rem;}
.sf-s3__form .wpcf7 input[type="submit"]{display:block;margin:0.1rem auto 0;min-width:2.4rem;min-height:max(0.52rem, 48px);padding:0 0.32rem;border:0;border-radius:0.26rem;background:#A71527;color:#fff;font-family:inherit;font-size:calc(17*var(--sf-t));font-weight:700;cursor:pointer;}
.sf-s3__form .wpcf7 input[type="submit"]:hover{background:#8b1120;}
.sf-s3__note{margin-top:0.2rem;font-size:calc(15*var(--sf-t));line-height:calc(28*var(--sf-t));color:#604C38;}
/* 地図とご案内（第2段 /contact/ と同じ組み方） */
.sf-s3__access{margin-top:0.5rem;display:flex;flex-direction:column;gap:0.2rem;}
@media screen and (min-width:768px){.sf-s3__access{margin-top:0.9rem;flex-direction:row;align-items:stretch;gap:0.4rem;}
  .sf-s3__gmap{width:calc(62% - 0.2rem);}
  .sf-s3__info{width:calc(38% - 0.2rem);}}
.sf-s3__gmap iframe{display:block;width:100%;height:2.4rem;border:0;border-radius:0.15rem;}
@media screen and (min-width:768px){.sf-s3__gmap iframe{height:3.2rem;}}
.sf-s3__info{background:#fff;border-radius:0.2rem;padding:0.24rem 0.2rem;}
.sf-s3__infotitle{color:#A71527;font-size:calc(20*var(--sf-t));line-height:calc(32*var(--sf-t));font-weight:700;}
.sf-s3__info p{margin-top:0.1rem;font-size:calc(16*var(--sf-t));line-height:calc(30*var(--sf-t));color:#1B1411;}

/* ── イラスト（絵は親テーマ suto-farm2025 にある物だけ。新しい絵は作っていない） ── */
.sf-s3 .c-char--farm,.sf-s3 .c-char--cook,.sf-s3 .c-char--akira,.sf-s3 .c-char--staff2,
.sf-s3 .c-char--milkman,.sf-s3 .c-char--music,.sf-s3 .c-char--flag,.sf-s3 .c-char--cowwalk,
.sf-s3 .c-char--post2,.sf-s3 .c-char--bellboy{background-size:contain;background-repeat:no-repeat;background-position:center bottom;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;}
.sf-s3 .c-char--farm{background-image:url("../../suto-farm2025/img/common/footer_farm.svg");aspect-ratio:257/171;}
.sf-s3 .c-char--cook{background-image:url("../../suto-farm2025/img/char/cook.svg");aspect-ratio:60/76;}
.sf-s3 .c-char--akira{background-image:url("../../suto-farm2025/img/char/akira.svg");aspect-ratio:66/76;}
.sf-s3 .c-char--staff2{background-image:url("../../suto-farm2025/img/char/staff.svg");aspect-ratio:51/76;}
.sf-s3 .c-char--milkman{background-image:url("../../suto-farm2025/img/top/button_char3.svg");aspect-ratio:146/62;}
.sf-s3 .c-char--music{background-image:url("../../suto-farm2025/img/top/fv_deco2.svg");aspect-ratio:120/78;}
.sf-s3 .c-char--flag{background-image:url("../../suto-farm2025/img/top/fv_deco3.svg");aspect-ratio:130/86;}
.sf-s3 .c-char--cowwalk{background-image:url("../../suto-farm2025/img/common/cow.svg");aspect-ratio:140/86;}
.sf-s3 .c-char--post2{background-image:url("../../suto-farm2025/img/char/post.svg");aspect-ratio:29.644/56.108;}
.sf-s3 .c-char--bellboy{background-image:url("../../suto-farm2025/img/top/facility_deco1.svg");aspect-ratio:56/76;}
/* 見出しの横（親 .p-page-header #header-bike と同じ置き方） */
.p-page-header #sf-char-farm{width:0.8rem;}
.p-page-header #sf-char-cook{width:0.4rem;}
.p-page-header #sf-char-akira{width:0.44rem;}
.p-page-header #sf-char-staff2{width:0.36rem;}
.p-page-header #sf-char-milkman{width:0.86rem;}
.p-page-header #sf-char-music{width:0.72rem;}
.p-page-header #sf-char-flag{width:0.6rem;}
.p-page-header #sf-char-cowwalk{width:0.72rem;}
.p-page-header #sf-char-post2{width:0.26rem;}
.p-page-header #sf-char-bellboy{width:0.4rem;}
@media screen and (min-width:768px){
  .p-page-header #sf-char-farm{margin-top:0.4rem;width:1.3rem;}
  .p-page-header #sf-char-cook{margin-top:0.4rem;width:0.66rem;}
  .p-page-header #sf-char-akira{margin-top:0.4rem;width:0.72rem;}
  .p-page-header #sf-char-staff2{margin-top:0.44rem;width:0.6rem;}
  .p-page-header #sf-char-milkman{margin-top:0.5rem;width:1.4rem;}
  .p-page-header #sf-char-music{margin-top:0.44rem;width:1.16rem;}
  .p-page-header #sf-char-flag{margin-top:0.4rem;width:0.98rem;}
  .p-page-header #sf-char-cowwalk{margin-top:0.46rem;width:1.1rem;}
  .p-page-header #sf-char-post2{margin-top:0.4rem;width:0.42rem;}
  .p-page-header #sf-char-bellboy{margin-top:0.42rem;width:0.66rem;}
}
/* 段の切れ目に置く絵（文字の場所を先に空けてから、その帯の中だけに置く） */
.sf-s3__band{position:relative;height:0.62rem;margin-top:0.5rem;}
@media screen and (min-width:768px){.sf-s3__band{height:0.88rem;margin-top:0.8rem;}}
/* 草の株（2026-09-23 追加10）：灰緑の草 footer_deco6.svg の繰り返し（repeat-x）をやめ、明るい黄緑の株 staff/weed.svg（40x12.903）を
   帯1本に4株だけ置く＝::before に2株（牛の後ろ足・前足の近く）・::after に1株と i.sf-b-weed に1株（子牛か牛乳缶の足元）。
   大きさ（PC 44/64/50/78px・SP 30/42/34/48px）・間・高さ（bottom 0〜0.08rem）をばらばらにして、等間隔・一列にしない。 */
.sf-s3__band::before,.sf-s3__band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0.3rem;background-image:url("../../suto-farm2025/img/staff/weed.svg");background-repeat:no-repeat;pointer-events:none;}
.sf-s3__band::before{background-image:url("../../suto-farm2025/img/staff/weed.svg"),url("../../suto-farm2025/img/staff/weed.svg");background-size:30px auto,42px auto;background-position:left calc(4% - 0.1rem) bottom 0.08rem,left calc(4% + 0.5rem) bottom 0;}
.sf-s3__band::after{background-size:48px auto;background-position:left calc(26% + 0.72rem) bottom 0.04rem;}
.sf-s3__band:has(.sf-b-milk)::after{background-position:right calc(8% + 0.28rem) bottom 0.05rem;}
.sf-s3__band i{position:absolute;bottom:0.1rem;display:block;background-repeat:no-repeat;background-size:contain;background-position:center bottom;pointer-events:none;}
.sf-s3__band i.sf-b-cow{left:4%;width:0.7rem;aspect-ratio:140/86;background-image:url("../../suto-farm2025/img/common/cow.svg");}
.sf-s3__band i.sf-b-calf{left:26%;width:0.46rem;aspect-ratio:1/1;background-image:url("../../suto-farm2025/img/common/footer_deco2.svg");}
.sf-s3__band i.sf-b-milk{right:8%;width:0.3rem;aspect-ratio:1/1.2;background-image:url("../../suto-farm2025/img/news/milk.png");}
.sf-s3__band i.sf-b-weed{left:calc(26% + 0.3rem);right:auto;bottom:0.02rem;width:34px;aspect-ratio:40/12.903;background-image:url("../../suto-farm2025/img/staff/weed.svg");}
.sf-s3__band:has(.sf-b-milk) i.sf-b-weed{left:auto;right:calc(8% - 0.22rem);bottom:0;}
@media screen and (min-width:768px){
  .sf-s3__band i.sf-b-cow{width:1rem;}
  .sf-s3__band i.sf-b-calf{width:0.66rem;}
  .sf-s3__band i.sf-b-milk{width:0.42rem;}
  .sf-s3__band i.sf-b-weed{left:calc(26% - 0.28rem);width:50px;bottom:0.03rem;}
  .sf-s3__band:has(.sf-b-milk) i.sf-b-weed{left:auto;right:calc(8% - 0.3rem);width:56px;bottom:0;}
  .sf-s3__band::before{background-size:44px auto,64px auto;background-position:left calc(4% - 0.2rem) bottom 0.08rem,left calc(4% + 0.72rem) bottom 0;}
  .sf-s3__band::after{background-size:78px auto;background-position:left calc(26% + 0.5rem) bottom 0.05rem;}
  .sf-s3__band:has(.sf-b-milk)::after{background-size:72px auto;background-position:right calc(8% + 0.36rem) bottom 0.06rem;}
}
/* 地の絵（白いカードの裏。文字の上には来ない） */
.sf-s3__deco{display:none;}
.sf-s3{position:relative;}
/* 本文の外（左右の余白）に置く。本文に重ならない幅（1280px 以上）でだけ出す */
@media screen and (min-width:1280px){
  .sf-s3__deco{position:absolute;display:block;background-repeat:no-repeat;background-size:contain;pointer-events:none;z-index:0;opacity:0.7;}
  .sf-s3__deco--milk{top:0.1rem;right:-0.72rem;width:0.5rem;aspect-ratio:1/1.2;background-image:url("../../suto-farm2025/img/news/milk.png");}
  .sf-s3__deco--cook{top:0.3rem;left:-1.05rem;width:0.9rem;aspect-ratio:1/0.8;background-image:url("../../suto-farm2025/img/news/cook.png");}
  .sf-s3__deco--cow{top:0.2rem;left:-0.98rem;width:0.8rem;aspect-ratio:140/86;background-image:url("../../suto-farm2025/img/common/cow.svg");}
  .sf-s3__deco--straw{top:0.2rem;right:-1.05rem;width:0.9rem;aspect-ratio:1/0.9;background-image:url("../../suto-farm2025/img/top/room_deco2.png");}
  .sf-s3__deco--flower{top:0.1rem;right:-1.15rem;width:1rem;aspect-ratio:1/0.55;background-image:url("../../suto-farm2025/img/top/news_char.svg");}
}
/* 出てくる時の動き（第2段と同じ控えめさ＝透明度と 8px の移動だけ・220ms・ease-out）。
   ホバーに頼らないのでタッチ端末でも同じように出る。動きを減らす設定では静止 */
.sf-s3__header figure[id^="sf-char-"]{opacity:0;transform:translateY(8px);animation:sf-appear 220ms ease-out 120ms forwards;}
.sf-s3__band i.sf-b-cow{opacity:0;transform:translateY(8px);animation:sf-appear 220ms ease-out 200ms forwards;}
.sf-s3__band i.sf-b-calf{opacity:0;transform:translateY(8px);animation:sf-appear 220ms ease-out 260ms forwards;}
@media (prefers-reduced-motion:reduce){
  .sf-s3__header figure[id^="sf-char-"],
  .sf-s3__band i.sf-b-cow,
  .sf-s3__band i.sf-b-calf{opacity:1;transform:none;animation:none;}
}
/* /sdgs-2/ IoT の段だけ写真を見出しの直下に出す（03〜06 で〈見出し→動画→文章〉が4段続く並びを1か所崩す。DOM は変えない）2026-09-19 第12回 */
.sf-s3--sdgs #sdgs-content05{display:flex;flex-direction:column;}
.sf-s3--sdgs #sdgs-content05>.sf-s3__h2{order:1;}
.sf-s3--sdgs #sdgs-content05>.sf-slider{order:2;}
.sf-s3--sdgs #sdgs-content05>.sf-s3__card{order:3;}
.sf-s3--sdgs #sdgs-content05>.sf-s3__movie{order:4;}
/* SP だけ：写真スライドの下に操作行（点と矢印・0.5rem）が入った高さのぶん、次の白い札との間を 0.3rem→0.15rem に詰める（写真の下端→札の見出しが 109px→93px・96px の物差しの内側）。PC は 0.5rem のまま。第28回 2026-09-21 */
@media screen and (max-width:767px){.sf-s3--sdgs #sdgs-content05>.sf-s3__card{margin-top:0.15rem;}}
/* /sdgs-2/ 農場HACCP の段の認証マーク（gtp-index-img05.png）は札の中で読める大きさ＝どの幅でも 96px 以上（2026-09-19 第15回。前は 768〜1100px で 58〜83px） */
.sf-s3--sdgs #sdgs-content03 .sf-s3__rowmedia img.sf-s3__rowart{width:max(1rem,96px);}
@media screen and (min-width:768px){.sf-s3--sdgs #sdgs-content03 .sf-s3__rowmedia img.sf-s3__rowart{width:max(1.2rem,96px);}}
/* /gtp/ だけ親の並びが「日本語 → 英字」。日本語を大きく・英字を小さく出す（文字は1字も変えない） */
.sf-s3__header--jpfirst .p-page-header__heading--main .sf-s3__jp{font-size:calc(20*var(--sf-t));line-height:calc(30*var(--sf-t));font-weight:700;margin-top:0;}
.sf-s3__header--jpfirst .p-page-header__heading--main strong{font-size:calc(30*var(--sf-t));line-height:calc(38*var(--sf-t));}
@media screen and (min-width:768px){
  .sf-s3__header--jpfirst .p-page-header__heading--main .sf-s3__jp{font-size:calc(26*var(--sf-t));line-height:calc(38*var(--sf-t));}
  .sf-s3__header--jpfirst .p-page-header__heading--main strong{font-size:calc(48*var(--sf-t));line-height:calc(60*var(--sf-t));}
}
/* 部屋の名前の横の英字（親 /rooms/ の <h2><span>日本語</span><small>英字</small></h2> と同じ組み合わせ） */
.sf-s3__h3 small{display:block;margin-top:0.02rem;font-family:"Lexend Deca",sans-serif;font-size:calc(14*var(--sf-t));line-height:calc(20*var(--sf-t));font-weight:500;color:#604C38;}
@media screen and (min-width:768px){.sf-s3__h3 small{font-size:calc(16*var(--sf-t));line-height:calc(24*var(--sf-t));}}
/* /cheese/ のご予約の見出し（ページの中の2つ目の帯） */
.sf-s3 .sf-s3__sec .p-page-header{padding-top:0;}
/* 同意のチェック（親サイトの追加CSSが本物の入力欄を隠して label の擬似要素で四角を描いている。押せる幅と高さを確保する。
   /contact/ の sf-stage2.css 61〜63行と同じ直し。48px 未満の押す物を作らない） */
.sf-s3__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0;}
.sf-s3__form .wpcf7 .wpcf7-acceptance label{display:flex;align-items:center;min-height:max(0.52rem, 48px);padding:0.06rem 0;cursor:pointer;}
.sf-s3__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label{font-size:calc(16*var(--sf-t));line-height:calc(24*var(--sf-t));font-weight:500;}
/* 本物のチェック欄は親サイトの追加CSSが透明にして重ねている。大きさは触らない（触ると二重に見える） */
/* 赤い注意・結果の帯（/contact/ と同じ見た目。白の上の赤 #A71527 は 7.55:1） */
.sf-s3__form .wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:0.04rem;font-size:calc(14*var(--sf-t));line-height:calc(22*var(--sf-t));color:#A71527;}
.sf-s3__form .wpcf7 .wpcf7-response-output{margin:0.16rem 0 0;padding:0.12rem 0.14rem;border:0.01rem solid #A71527;border-radius:0.08rem;font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));color:#A71527;}
/* フォームの中の注意書き（CF7 の中にある .attentionbox。読める大きさに） */
.sf-s3__form .wpcf7 .attentionbox{margin-top:0.16rem;font-size:calc(14*var(--sf-t));line-height:calc(26*var(--sf-t));color:#604C38;}
.sf-s3__form .wpcf7 #cf-tbl th .required{display:inline-block;margin-right:0.06rem;padding:0 0.06rem;border-radius:0.03rem;background:#A71527;color:#fff;font-size:calc(14*var(--sf-t));line-height:calc(22*var(--sf-t));}
.sf-s3__form .wpcf7 #cf-tbl th .optional{display:inline-block;margin-right:0.06rem;padding:0 0.06rem;border-radius:0.03rem;border:0.01rem solid #604C38;color:#604C38;font-size:calc(14*var(--sf-t));line-height:calc(22*var(--sf-t));}

/* サイト全体の追加CSS（Simple Custom CSS）に旧デザインの物差しで書かれた指定がある。
   旧デザインは 1rem≒16px、新デザインは 1rem≒100px なので、そのままだと字が6倍になる。
   .attentionbox p{font-size:1.03rem} が /reservation/ と /cheese/ で 103px になり、1行1文字で出ていた（2026-09-18 第8回に発見）。
   新デザインのページの中だけ、実測した大きさに戻す（追加CSSそのものは触らない＝他のページに影響しない）。 */
.sf-s3 .attentionbox{width:auto;max-width:none;margin:0.16rem 0 0;border:0;}
.sf-s3 .attentionbox p{padding:0;font-size:calc(16*var(--sf-t));line-height:calc(28*var(--sf-t));color:#604C38;text-align:left;}
.sf-s3 .hpbtn{font-size:calc(16*var(--sf-t));}
/* 見出しの折り返しを文節で（語の途中で折らない）。<wbr> を置いた所でだけ折り、入り切らない時だけ任意の位置で折る（はみ出さない）。第14回 2026-09-19 */
.sf-s3__jp,.sf-s3__h2--phrase{word-break:keep-all;overflow-wrap:anywhere;}
/* /mozzarella-cheese/（と旧 /cheese/ の区画 .sf-s3--cheese）の文字の大きさの段をそろえる：PC 19段→8段（13.8／15.8／17.8／23.7／27.7／31.6／39.6／53.4px）・SP 13段→7段。
   親 LP の近い段どうしを寄せ、当社が足した区画は LP の段に合わせる。文字・色・太さは変えない。先方の本文のインライン指定（14pt の強調1か所）は触らない。第14回 2026-09-19 AD② */
body #lp-line-up .l-container .l-wrapper .l-note{font-size:calc(14*var(--sf-t));line-height:calc(21*var(--sf-t));}
body #lp-detail .l-awards div h3{font-size:calc(24*var(--sf-t));line-height:calc(29*var(--sf-t));}
body #lp-restaurant .p-store__name strong{font-size:calc(24*var(--sf-t));line-height:calc(32*var(--sf-t));word-break:auto-phrase;overflow-wrap:anywhere;line-break:strict;}
body #lp-fv .l-catch{font-size:0.2rem;}
body #lp-line-up .l-heading{font-size:calc(30*var(--sf-t));line-height:calc(40*var(--sf-t));}
body #lp-about .l-button{min-height:max(0.8rem,48px);font-size:calc(18*var(--sf-t));line-height:calc(26*var(--sf-t));}
.sf-s3--cheese .sf-s3__h2{font-size:calc(24*var(--sf-t));line-height:calc(36*var(--sf-t));}
@media screen and (min-width:768px){
  body #lp-fv .l-catch{font-size:0.28rem;}
  body #lp-line-up .l-heading{font-size:calc(40*var(--sf-t));line-height:calc(55*var(--sf-t));}
  body #lp-line-up .l-container .l-wrapper .l-note{line-height:calc(20*var(--sf-t));}
  body #lp-detail .l-awards div h3{line-height:calc(34*var(--sf-t));}
  body #lp-detail .l-heading strong{font-size:0.54rem;}
  body #lp-about .l-container .l-wrapper .l-name{font-size:calc(24*var(--sf-t));line-height:calc(32*var(--sf-t));}
  body #lp-restaurant .p-store__title,body #lp-restaurant .p-store__name strong{font-size:calc(28*var(--sf-t));}
  body #lp-form .l-button span{font-size:calc(24*var(--sf-t));line-height:calc(32*var(--sf-t));}
  .sf-s3--cheese .sf-s3__text,.sf-s3--cheese .sf-s3__lead{font-size:calc(18*var(--sf-t));line-height:calc(36*var(--sf-t));}
  .sf-s3--cheese .sf-s3__h2{font-size:calc(32*var(--sf-t));line-height:calc(46*var(--sf-t));}
  .sf-s3--cheese .sf-s3__infotitle{font-size:calc(24*var(--sf-t));line-height:calc(36*var(--sf-t));}
  .sf-s3--cheese #contact-content01 .p-page-header__heading--main strong{font-size:calc(54*var(--sf-t));line-height:calc(68*var(--sf-t));}
}
/* 見出しの折り返し（第14回 A3 の対象に h3 を足す）。第17回 2026-09-19 */
.sf-s3__h3--phrase{word-break:keep-all;overflow-wrap:anywhere;}
/* 先方の本文のインライン指定 <span style="font-size: 14pt; color: #ff0000;">（/mozzarella-cheese/・/cheese-info/）は白の上で 4.00:1・生成りの上で 3.70:1＝18.7px の通常の太さでは 4.5:1 に届かない。インラインの色はこの1行でしか上書きできないので、子テーマで唯一の !important。色はサイトの赤 #A71527（白 7.6:1・生成り 6.9:1）。文字は1字も変えない。第17回 2026-09-19 */
.sf-s3 [style*="#ff0000"]{color:#A71527 !important;}
/* 語の途中で折らない短い語（括弧つきの読みなど）。第17回 2026-09-19 */
.sf-nobr{white-space:nowrap;}
/* /mozzarella-cheese/ の親 LP（#lp-*）と店舗一覧（.p-store）の文字。768〜1279px で 7〜10px になる親の規則を、同じ値のまま文字の物差し --sf-t に載せ替える（色・太さ・SP の値は変えない。fixed の高さは min-height で同じ単位に）。第17回 2026-09-19 */
body #lp-about .l-2column--text p{font-size:calc(16*var(--sf-t));line-height:calc(32*var(--sf-t));}
body #lp-detail .l-awards div p{font-size:calc(14*var(--sf-t));line-height:calc(28*var(--sf-t));}
body #lp-restaurant .p-store__name span{font-size:calc(14*var(--sf-t));line-height:calc(26*var(--sf-t));}
body #lp-line-up .l-container .l-wrapper .l-collabo{font-size:calc(18*var(--sf-t));line-height:calc(26*var(--sf-t));min-height:calc(41*var(--sf-t));}
body #lp-about .l-container .l-wrapper .l-material{font-size:calc(24*var(--sf-t));line-height:calc(35*var(--sf-t));min-height:calc(54*var(--sf-t));}
@media screen and (min-width:768px){
  body #lp-restaurant .p-store__desc,body #lp-restaurant .p-store__address{font-size:calc(18*var(--sf-t));line-height:calc(24*var(--sf-t));}
  body #lp-detail .l-content p{font-size:calc(18*var(--sf-t));line-height:calc(38*var(--sf-t));}
  body #lp-about .l-container .l-wrapper .l-desc{font-size:calc(18*var(--sf-t));line-height:calc(32*var(--sf-t));}
}
/* 親は 768px 以上で「カルシウム」の段落を white-space:nowrap（幅 4.21rem に <br> で行を決め打ち）。文字の下限が効く帯（768〜1455px）では折り返しを許す（1456px 以上は今までどおり・行の中身が入り切るので見た目は同じ）。第17回 2026-09-19 */
@media screen and (min-width:768px) and (max-width:1455px){body #lp-about .l-2column--text p{white-space:normal;}}
/* 第19回 2026-09-19：第17回で文字だけが下限で大きくなった所の器。
   ① 上の 303〜316 行（第14回 A2）に親と同じ値の line-height を足した（.l-note 21/20・.l-awards h3 29/34・.p-store__name strong 32・.l-heading 40/55・.l-name 32・.l-button span 32＝親 css/style.css の 0.21/0.2rem・0.29/0.34rem・0.32rem・0.4/0.55rem・0.32rem・0.32rem）。1456px 以上と SP390 は同じ値になるので見た目は変わらない。
   ② おすすめアレンジの札（.l-material・器 3.41rem＝768px で 180px）は、文字 24×0.95＝22.8px では「モッツァレラしょうゆ漬け」（12字）が 2 行に折れる（768「し｜ょ」・1024「ゆ｜漬け」）。器の幅は rem のまま、文字を〈器の幅÷12.8〉と〈24×--sf-t〉の小さい方に（768px 14.1px・834 15.3・1024 18.7・1280 22.8・1440 23.7＝今までどおり）。行送りと高さも文字に合わせて親の値（0.35rem・height 0.57rem）まで戻す（768px で 18.5px／30px。1440 は 34.6／56.4 で今までどおり）。SP（767px 以下）は 333 行目のまま。
   ③ 店名（.p-store__name strong・768〜1279px で 2 行になる物がある。文字は DB の値で <wbr> を置けない）：Chrome/Edge 119 以降は文節で折る（word-break:auto-phrase＝「SHIROIYA the BAR｜真茶亭」「粕川納豆｜前橋六供本店」「赤城ベジフルファー｜マーズまつぼっくり」）。auto-phrase を知らないブラウザ（Safari・Firefox）はこの1語だけ捨てて今までどおり（normal）。入り切らない語は入る所で折り（overflow-wrap:anywhere）、行頭の禁則（「ー」「ょ」を行頭に置かない）は line-break:strict。札（.l-material）にも strict。 */
@media screen and (min-width:768px){
  body #lp-about .l-container .l-wrapper .l-material{font-size:min(calc(24*var(--sf-t)),calc(3.41rem / 12.8));line-height:min(calc(35*var(--sf-t)),0.35rem);min-height:0;line-break:strict;}
}
/* /gtp/ の図版5枚の説明（.sf-s3__cap「酪農教育ファーム」8字＝13.3px×8＝106.4px）は、768〜779px でコマの幅（105.4〜107px）に 1〜2px 足りず「酪農教育ファー｜ム」に折れる。説明だけを左右 0.06rem（768px で 3.2px）ずつコマの外へ出す（768px で 111.7px。コマの間は 16px なので隣の説明とは 10px 離れる・写真は動かない・780px 以上は今までどおり収まる）。親 css/style.css 172行の max-width:100% が幅を止めるので none に。第19回 2026-09-19 */
@media screen and (min-width:768px) and (max-width:799px){.sf-s3--gtp .sf-s3__cap{max-width:none;margin-left:-0.06rem;margin-right:-0.06rem;}}
/* 第20回 2026-09-20：LINE UP のカード（#lp-line-up .l-container .l-wrapper）。親 css/style.css 2649〜2653行は 768px 以上で height:4.22rem（768px で 222.6px）の固定。第19回で注記 .l-note の行送りを親と同じ 19px にした結果、768〜869px で注記が4行（76px）になり、中身（上余白 17.4＋写真 120.8－引き上げ 10.6＋商品名 40.1＋間 2.1＋注記 76＝245.9px）がカードより 23.3px 高くなって、白いカードの下から緑の地へはみ出していた（本番は注記が 6.3px で2行＝収まる）。
   直し：高さを「中身に合わせて伸びる・最低 4.22rem」に（height:auto・min-height）、3枚は同じ高さにそろえる（親の align-items:center を stretch＝いちばん高い1枚目に2・3枚目がそろう。2・3枚目の中身は変わらない）。注記が3行以上になる 768〜1119px（1120px 以上は2行で下に 19.5px 以上空く＝実測）だけ、注記の下に 0.2rem（768px で 10.6px）の余白を置き、白い箱の絵を子テーマの img/lp/box.svg（親の box.svg の写しに preserveAspectRatio="none" を足した物）に替える。親の box.svg は viewBox 付きで縦横比を保つ（meet）ため、background-size:100% 100% でも箱が伸びた分（768px で 222.6→256.4px）は白にならず、注記の最後の行が緑の上に出たまま（設計係の実測 2026-09-20 00:5x）。
   伸びるのは中身が 4.22rem を超える 768〜1030px だけ（768px 256.4・900px 268.4・1024px 297.5px）。1120px 以上（1440 を含む）は規則が1つも当たらない（padding 0・箱の絵は親のまま・高さは min-height＝4.22rem で今までどおり）。SP（767px 以下）は親のまま（縦並び・3.74rem・収まっている）。 */
@media screen and (min-width:768px){
  body #lp-line-up .l-container{align-items:stretch;}
  body #lp-line-up .l-container .l-wrapper{height:auto;min-height:4.22rem;}
}
@media screen and (min-width:768px) and (max-width:1119px){
  body #lp-line-up .l-container .l-wrapper{padding-bottom:0.2rem;background-image:url("../img/lp/box.svg");}
}
/* 第23回 2026-09-20：LINE UP 1枚目の注記（#lp-line-up .l-note・36字）。親テンプレの固定の <br>（「…製造を｜“生モッツァレラチーズ”…」）だと、1行目（16字＝768〜1119px で約 202px）が器（3.39rem＝768px で 178.8px・834px で 194.2px）に入り切らず、810〜861px で末尾の「を」1字だけが2行目に落ち（768〜809px は「造を」2字）、1008〜1104px では最後の行が「ます」「す」だけになる（第19回 linetext19_前 9・29行・第20回 §3-2 ①・設計係の実測 2026-09-20 v23_前）。
   直し：768〜1119px（第20回の svg と同じ帯）だけ、固定の <br>（class sf-s3__br--wide）を display:none で消し、代わりに文節の <wbr> 3つ（※須藤牧場では｜2日目までの製造を｜“生モッツァレラチーズ”｜として扱っています）でだけ折る（word-break:keep-all。入り切らない時だけ overflow-wrap:anywhere＝第17回 C4・第19回 §2-2 の見出しと同じ型）。同じ帯で注記の左右に 0.12rem（768px で 6.3px・1119px で 9.2px）の余白を置き、文字が白い箱の縁に触れないようにする。
   1120px 以上と SP（767px 以下）は <br> が生きたまま＝行の中身・p の箱の幅・画素とも今までどおり（keep-all は当たるが <br> の2行はどちらも器に入る。SP 320px だけ2行目が入らず「“生モッツァレラチーズ”｜として扱っています」に折れる＝前の「…扱っていま｜す」より良い）。帯の中の行数：768〜932px で4行（1行目「※須藤牧場では2日目までの製造を」が余白込みの器に入らない）・933〜1119px で3行。第20回で 768〜863px だった4行の帯が 932px まで広がり、864〜932px でカードが 4行ぶん（19px）高くなる（3枚とも同じ高さ・白い箱は子テーマの box.svg が伸びる＝第20回の作りのまま）。1113〜1119px は 2→3 行（下の余白 19.9px・カードの高さは min-height のまま）。 */
.sf-s3__note--phrase{word-break:keep-all;overflow-wrap:anywhere;}
@media screen and (min-width:768px) and (max-width:1119px){
  body #lp-line-up .l-container .l-wrapper .sf-s3__note--phrase{padding-left:0.12rem;padding-right:0.12rem;}
  .sf-s3__note--phrase .sf-s3__br--wide{display:none;}
}