/* 須藤牧場 子テーマ：第2段（旧テンプレ19ページ）の共通配置。まずは /contact/・/voice/ と、3ページのイラスト。
   親 css/style.css の汎用部品（.u-width .p-page-header .c-char）に足りない配置だけ。
   物差しは親と同じ 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-stage2{padding-top:0.3rem;padding-bottom:0.9rem;font-family:"Zen Kaku Gothic New","Noto Sans JP","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;color:#1B1411;position:relative;z-index:1;}
@media screen and (min-width:768px){.sf-stage2{padding-top:0.5rem;padding-bottom:1.7rem;}}
.sf-stage2__lead{margin-top:0.3rem;font-size:calc(20*var(--sf-t));line-height:calc(32*var(--sf-t));font-weight:700;color:#A71527;text-align:center;}
@media screen and (min-width:768px){.sf-stage2__lead{margin-top:0.5rem;font-size:calc(28*var(--sf-t));line-height:calc(42*var(--sf-t));}}

/* ── イラスト（親 .c-char の作りに合わせた追加の絵柄。絵は親テーマにある物だけを使う） ── */
.c-char--post,.c-char--cow{background-size:contain;background-repeat:no-repeat;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;}
.c-char--post{background-image:url("../../suto-farm2025/img/char/post.svg");aspect-ratio:29.644/56.108;}
.c-char--cow{background-image:url("../../suto-farm2025/img/common/cow.svg");aspect-ratio:140/86;}
/* 見出しの横に置く絵（親 .p-page-header #header-bike と同じ置き方） */
.p-page-header #sf-char-bike{width:0.69rem;}
.p-page-header #sf-char-staff{width:0.51rem;}
.p-page-header #sf-char-cow{width:0.72rem;}
@media screen and (min-width:768px){
  .p-page-header #sf-char-bike{margin-top:0.52rem;width:1.17rem;margin-left:-0.57rem;}
  .p-page-header #sf-char-staff{margin-top:0.49rem;width:0.79rem;margin-left:-0.21rem;}
  .p-page-header #sf-char-cow{margin-top:0.46rem;width:1.1rem;margin-left:-0.3rem;}
}
/* 出てくる時の動き（トップと同じ控えめさ＝透明度と 8px の移動だけ・220ms・ease-out）。
   ホバーに頼らないのでタッチ端末でも同じように動く。動きを減らす設定では静止 */
.p-page-header #sf-char-bike,
.p-page-header #sf-char-staff,
.sf-contact__aside #sf-char-post,
.sf-review__header .p-page-header__heading::before{opacity:0;transform:translateY(8px);animation:sf-appear 220ms ease-out 120ms forwards;}
@keyframes sf-appear{to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .p-page-header #sf-char-bike,
  .p-page-header #sf-char-staff,
  .sf-contact__aside #sf-char-post,
  .sf-review__header .p-page-header__heading::before{opacity:1;transform:none;animation:none;}
}

/* ── /contact/ ─────────────────────────── */
.sf-contact__columns{margin-top:0.3rem;display:flex;flex-direction:column;gap:0.3rem;}
@media screen and (min-width:768px){.sf-contact__columns{flex-direction:row;align-items:flex-start;gap:0.6rem;margin-top:0.5rem;}
  .sf-contact__form{width:calc(64% - 0.3rem);}
  .sf-contact__aside{width:calc(36% - 0.3rem);}}
/* フォーム（CF7 588 の table をそのまま行に組み替える。CF7 の中身は触らない） */
.sf-contact__form .wpcf7{background:#fff;border-radius:0.2rem;padding:0.24rem 0.2rem;}
@media screen and (min-width:768px){.sf-contact__form .wpcf7{padding:0.4rem;}}
.sf-contact__form .wpcf7 table{width:100%;border-collapse:collapse;}
.sf-contact__form .wpcf7 tr{display:block;margin-bottom:0.2rem;}
.sf-contact__form .wpcf7 th,.sf-contact__form .wpcf7 td{display:block;width:100%;padding:0;text-align:left;}
.sf-contact__form .wpcf7 th p{margin:0 0 0.06rem;font-size:calc(15*var(--sf-t));line-height:calc(24*var(--sf-t));font-weight:700;color:#604C38;}
.sf-contact__form .wpcf7 td p{margin:0;}
.sf-contact__form .wpcf7 .wpcf7-form-control-wrap{display:block;}
.sf-contact__form .wpcf7 input[type="text"],
.sf-contact__form .wpcf7 input[type="email"],
.sf-contact__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-contact__form .wpcf7 textarea{min-height:1.6rem;}
.sf-contact__form .wpcf7 input[type="text"]:focus,
.sf-contact__form .wpcf7 input[type="email"]:focus,
.sf-contact__form .wpcf7 textarea:focus{outline:0.02rem solid #5DA829;outline-offset:0.01rem;}
/* 同意のチェック（親サイトの追加CSSが本物の入力欄を隠して label の擬似要素で四角を描いている。押せる幅と高さを確保する） */
.sf-contact__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0;}
.sf-contact__form .wpcf7 .wpcf7-acceptance label{display:flex;align-items:center;min-height:max(0.52rem, 48px);padding:0.06rem 0;cursor:pointer;}
.sf-contact__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label{font-size:calc(15*var(--sf-t));line-height:calc(24*var(--sf-t));font-weight:500;}
/* 個人情報の取り扱い（長文は中でだけ巻き取る） */
.sf-contact__form .wpcf7 .policy{max-height:2.4rem;overflow-y:auto;margin-top:0.1rem;padding:0.16rem;background:#FAF6EC;border-radius:0.1rem;font-size:calc(15*var(--sf-t));line-height:calc(26*var(--sf-t));color:#604C38;}
.sf-contact__form .wpcf7 .policy p{margin-bottom:0.12rem;}
.sf-contact__form .wpcf7 .submit-btn{margin-top:0.24rem;text-align:center;}
.sf-contact__form .wpcf7 .submit-btn p{margin:0;}
.sf-contact__form .wpcf7 .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;max-width:2.8rem;min-height:max(0.56rem, 48px);padding:0 0.3rem;border:0;border-radius:0.28rem;background-color:#5DA829;color:#fff;font-family:inherit;font-size:calc(17*var(--sf-t));line-height:calc(26*var(--sf-t));font-weight:700;letter-spacing:0.05em;cursor:pointer;}
.sf-contact__form .wpcf7 .wpcf7-submit:hover,.sf-contact__form .wpcf7 .wpcf7-submit:focus{background-color:#4c8c21;}
.sf-contact__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-contact__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;}
.sf-contact__form .wpcf7 .p-form__error{font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));color:#A71527;}
/* 電話・注意書き */
.sf-contact__aside{position:relative;padding:0.24rem 0.2rem;background:#fff;border-radius:0.2rem;}
@media screen and (min-width:768px){.sf-contact__aside{padding:0.4rem 0.3rem;}}
.sf-contact__aside-title,.sf-contact__info-title{font-size:calc(18*var(--sf-t));line-height:calc(28*var(--sf-t));font-weight:700;color:#A71527;}
.sf-contact__tel{margin-top:0.12rem;font-family:"Lexend Deca","Zen Kaku Gothic New",sans-serif;font-size:calc(24*var(--sf-t));line-height:calc(36*var(--sf-t));font-weight:600;color:#604C38;}
.sf-contact__note{margin-top:0.16rem;font-size:calc(14*var(--sf-t));line-height:calc(26*var(--sf-t));color:#1B1411;}
.sf-contact__aside #sf-char-post{width:0.44rem;margin:0.16rem 0 0 auto;}
@media screen and (min-width:768px){.sf-contact__aside #sf-char-post{width:0.56rem;}}
/* 地図 */
.sf-contact__access{margin-top:0.4rem;display:flex;flex-direction:column;gap:0.2rem;}
@media screen and (min-width:768px){.sf-contact__access{flex-direction:row;align-items:stretch;gap:0.4rem;margin-top:0.8rem;}
  .sf-contact__gmap{width:calc(62% - 0.2rem);}
  .sf-contact__info{width:calc(38% - 0.2rem);}}
.sf-contact__gmap{border-radius:0.15rem;overflow:hidden;}
.sf-contact__gmap iframe{display:block;width:100%;height:2.2rem;border:0;}
@media screen and (min-width:768px){.sf-contact__gmap iframe{height:3.2rem;}}
.sf-contact__info{padding:0.24rem 0.2rem;background:#fff;border-radius:0.2rem;}
@media screen and (min-width:768px){.sf-contact__info{padding:0.4rem 0.3rem;}}
.sf-contact__info p{margin-top:0.12rem;font-size:calc(15*var(--sf-t));line-height:calc(28*var(--sf-t));}
.sf-contact__map{margin-top:0.3rem;border-radius:0.15rem;overflow:hidden;}
.sf-contact__map img{display:block;width:100%;height:auto;}

/* ── /voice/ ──────────────────────────── */
.sf-voice__group{margin-top:0.4rem;}
@media screen and (min-width:768px){.sf-voice__group{margin-top:0.8rem;}}
.sf-voice__group-title{font-size:calc(20*var(--sf-t));line-height:calc(32*var(--sf-t));font-weight:700;color:#A71527;text-align:center;}
@media screen and (min-width:768px){.sf-voice__group-title{font-size:calc(28*var(--sf-t));line-height:calc(42*var(--sf-t));}}
.sf-voice__list{margin:0.24rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:0 0.16rem;}
@media screen and (min-width:768px){.sf-voice__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 0.3rem;}.sf-voice__list--n2,.sf-voice__list--n4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media screen and (min-width:1024px){.sf-voice__list--n4{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* 会社名の一覧は白い箱を19個並べず、罫線1本と余白で組む（下の「協力企業の声」5枚だけが白い箱になる＝箱の役が1つになる）2026-09-19 第12回 */
.sf-voice__card{display:flex;flex-direction:column;justify-content:center;gap:0.04rem;box-sizing:border-box;min-height:max(0.64rem, 48px);height:100%;padding:0.12rem 0.06rem 0.12rem 0.18rem;border-bottom:0.01rem solid #898484;color:#1B1411;text-decoration:none;}
/* 第23回 2026-09-20：左の縦罫（第14回にリンクの印として入れた緑 #5DA829・リンクの無い会社は透明）をやめた。SP390 でこの一覧は1列（19行・全部 x=26・幅338）になり、左端の緑が1本の線に見えるので、リンクの無い4社（関東防災・Sunset films・特別支援学校・農業高校 大学校と連携）で線が切れ、その行だけ沈んで見えた（井埜さん 2026-09-20 iPhone・当方の実測 実測/第23回/検査3_罫の途切れ_36ページ_直す前.csv＝2つの一覧×3幅の6件）。罫をやめて全行を同じ見え方にし、押せる印は下の行の「会社名の下線」に移す。左の余白は 0.14rem＋罫 4px＝18.6px を 0.18rem（SP390 で 18.7px）にまとめたので、文字の左端は SP390 で 45px のまま・PC1440 で 183→184px（1px）。列の数・行の左端・ページの高さは4幅とも変わらない（実測/第23回/sim23v.json） */
a.sf-voice__card .sf-voice__name{text-decoration:underline;text-decoration-thickness:0.01rem;text-underline-offset:0.03rem;}
a.sf-voice__card:hover,a.sf-voice__card:focus,a.sf-voice__card:active{background:#fff;}
.sf-voice__name{font-size:calc(16*var(--sf-t));line-height:calc(24*var(--sf-t));font-weight:700;}
.sf-voice__job{font-size:calc(14*var(--sf-t));line-height:calc(22*var(--sf-t));color:#666666;}
.sf-voice__interviews{margin-top:0.5rem;}
@media screen and (min-width:768px){.sf-voice__interviews{margin-top:1rem;}}
.sf-voice__interview{margin-top:0.24rem;padding:0.2rem;background:#fff;border-radius:0.2rem;}
@media screen and (min-width:768px){.sf-voice__interview{margin-top:0.4rem;padding:0.3rem;}}
.sf-voice__movie{display:flex;flex-direction:column;gap:0.16rem;color:#1B1411;text-decoration:none;}
@media screen and (min-width:768px){.sf-voice__movie{flex-direction:row;align-items:flex-start;gap:0.4rem;}
  .sf-voice__movie-thumb{width:calc(50% - 0.2rem);flex:0 0 auto;}
  .sf-voice__interview-body{width:calc(50% - 0.2rem);}}
.sf-voice__movie-thumb{position:relative;margin:0;border-radius:0.15rem;overflow:hidden;}
.sf-voice__movie-thumb img{display:block;width:100%;height:auto;}
.sf-voice__movie-thumb::after{content:"";position:absolute;top:50%;left:50%;width:0.62rem;height:0.44rem;transform:translate(-50%,-50%);border-radius:0.1rem;background-color:rgba(167,21,39,0.85);}
.sf-voice__movie-thumb::before{content:"";position:absolute;top:50%;left:50%;z-index:1;width:0;height:0;transform:translate(-35%,-50%);border-style:solid;border-width:0.08rem 0 0.08rem 0.14rem;border-color:transparent transparent transparent #fff;}
.sf-voice__movie:hover .sf-voice__movie-thumb::after,.sf-voice__movie:focus .sf-voice__movie-thumb::after,.sf-voice__movie:active .sf-voice__movie-thumb::after{background-color:#A71527;}
.sf-voice__interview-name{font-size:calc(18*var(--sf-t));line-height:calc(28*var(--sf-t));font-weight:700;color:#A71527;}
@media screen and (min-width:768px){.sf-voice__interview-name{font-size:calc(22*var(--sf-t));line-height:calc(34*var(--sf-t));}}
.sf-voice__interview-person{margin-top:0.1rem;font-size:calc(15*var(--sf-t));line-height:calc(26*var(--sf-t));}
.sf-voice__interview-person strong{font-weight:700;color:#604C38;}
.sf-voice__interview-desc{margin-top:0.16rem;padding-top:0.14rem;border-top:0.01rem solid #FAF6EC;font-size:calc(14*var(--sf-t));line-height:calc(24*var(--sf-t));}
.sf-voice__interview-desc dt{font-weight:700;color:#604C38;}  /* 2026-09-18 検証員第2回 ×1：緑は白の上で 2.96:1（14px 太字は大きい文字ではない）→ 茶 8.11:1。文字色に緑を使わない */
.sf-voice__interview-desc dd{margin:0 0 0.1rem;color:#1B1411;}
.sf-voice__interview-hp{margin-top:0.16rem;text-align:right;}
.sf-voice__interview-hp a{display:inline-flex;align-items:center;justify-content:center;min-height:max(0.48rem, 48px);padding:0 0.24rem;border-radius:0.24rem;background:#604C38;color:#fff;font-size:calc(15*var(--sf-t));line-height:calc(24*var(--sf-t));font-weight:500;text-decoration:none;}
.sf-voice__interview-hp a:hover,.sf-voice__interview-hp a:focus{background:#4b3a2a;}

/* ── /review/ の見出しに牛の絵（page-review.php・sf-review.css は設計係の完成形のまま触らない） ── */
.sf-review__header .p-page-header__heading{display:flex;align-items:center;gap:0.06rem;}
@media screen and (min-width:768px){.sf-review__header .p-page-header__heading{align-items:flex-end;gap:0.159rem;}}
.sf-review__header .p-page-header__heading::before{content:"";display:block;flex:0 0 auto;width:0.72rem;aspect-ratio:140/86;background-image:url("../../suto-farm2025/img/common/cow.svg");background-size:contain;background-repeat:no-repeat;}
@media screen and (min-width:768px){.sf-review__header .p-page-header__heading::before{width:1.1rem;margin-bottom:0.08rem;}}
/* 見出し帯の説明文（親 .p-page-header__sub p）と英字の下の日本語（親 .p-page-header__heading--main span・768px 以上 0.18rem）を、同じ値のまま --sf-t に載せ替える（/contact/・/voice/・/review/・第3段のページ。第1段は sf-page.css の同じ行）。第17回 2026-09-19 */
body .p-page-header__sub p{font-size:calc(16*var(--sf-t));line-height:calc(24*var(--sf-t));}
@media screen and (min-width:768px){body .p-page-header__heading--main span{font-size:calc(18*var(--sf-t));line-height:calc(26*var(--sf-t));}}
/* 見出しを語の途中で折らない（<wbr> を置いた所でだけ折る。第17回 C4 の型＝クラスを付けた見出しだけ）。/contact/「お電話での｜お問い合わせ」・/voice/「農業組合法人｜元気ファーム20」（768〜779px）。第19回 2026-09-19 */
.sf-contact__aside-title,.sf-voice__interview-name{word-break:keep-all;overflow-wrap:anywhere;}