/* About Founder ページ専用。
   組み立ては yellowzebrasafaris.com/about-us/our-team/james-shortt/ の実測に合わせてある。
     ①暗いヒーロー（写真の上に名前）
     ②写真 左／文章 右   .wak-acf-block-standard-content
     ③文章だけの段（写真なし）
     ④写真 右／文章 左   同上の反転
     ⑤経歴            .wak-acf-block-wysiwyg（幅は本文より狭い）
     ⑥行き先カルーセル  .wak-acf-block-listing-carousel
     ⑦問い合わせ       .wak-acf-block-cta-expert-contact

   1200px 幅での実測値：
     セクションの左右padding 80px、画像508px ＋ 間24px ＋ 文章508px（＝50:50）
     画像の高さ400px（508×400 ＝ 1.27:1）
     経歴の文章ブロックは左80pxから920px（右に200px残す）

   SWELL の post_content（1250pxコンテナ）の中に置くので、
   段ごとに margin-inline:calc(50% - 50vw) で一度全幅に戻してから組み直す。 */

.jt-fd{
  --f: "Noto Sans JP", sans-serif;
  --f-disp: "Playfair Display", "Noto Serif JP", Georgia, serif;
  --ink:#1F1F1F; --sub:#6B6764; --accent:#CE1433; --accent-h:#A80F29;
  --soft:#F8DBDD; --paper:#FDFDFD; --line:#EBD9DA;
  --pad:80px;          /* YZS 実測 */
  --max:1200px;
  font-family:var(--f); color:var(--ink);
}
.jt-fd *{ box-sizing:border-box }

/* SWELL が post_content の見出しに付ける赤帯・下線・擬似要素を打ち消す */
.jt-fd h1, .jt-fd h2, .jt-fd h3,
.jt-fd h1::before, .jt-fd h2::before, .jt-fd h3::before,
.jt-fd h1::after,  .jt-fd h2::after,  .jt-fd h3::after{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; content:none !important;
}
.jt-fd h2, .jt-fd h3{ color:var(--ink) !important; margin:0 !important }
.jt-fd p{ margin:0 }

/* 段はいったん画面全幅に戻し、中で YZS と同じ幅に組み直す */
.jt-fd__bleed{ margin-inline:calc(50% - 50vw); width:100vw }
.jt-fd__wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }


/* ---- ページ上端 -------------------------------------------------------- */
/* ヒーローをヘッダーの直下に付ける。SWELL は #content と .l-mainContent に
   上の余白を持っているので、このページだけ 0 にする。
   （パンくずは HTML 側から外してある） */
body .l-content{ padding-top:0 !important; margin-top:0 !important }
body .l-mainContent{ padding-top:0 !important; margin-top:0 !important }
body .l-mainContent__inner{ padding-top:0 !important; margin-top:0 !important }
.jt-fd > :first-child{ margin-top:0 }

/* ---- ①ヒーロー -------------------------------------------------------- */
.jt-fd__hero{
  position:relative; min-height:560px; display:flex; align-items:flex-end;
  overflow:hidden; background:#191815;
}
.jt-fd__hero img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
.jt-fd__hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(25,24,21,.80) 0%, rgba(25,24,21,.62) 34%,
    rgba(25,24,21,.42) 64%, rgba(25,24,21,.28) 100%);
}
.jt-fd__hero .jt-fd__wrap{ position:relative; z-index:1; width:100%; padding-bottom:44px; color:var(--paper) }
.jt-fd__eyebrow{
  display:inline-block; margin:0 0 14px; padding:5px 26px 5px 14px;
  background:var(--accent); color:var(--paper);
  font-size:13px; font-weight:700; line-height:1.6; letter-spacing:.14em;
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.jt-fd__name{
  font-family:var(--f-disp); font-weight:500; letter-spacing:normal;
  font-size:clamp(34px, 4.6vw, 49px); line-height:1.1; color:var(--paper) !important;
}
.jt-fd__role{ margin-top:10px; font-size:15px; line-height:1.7; opacity:.9 }

/* ---- ②④写真と文章の2段組み（YZS: standard-content） ------------------ */
.jt-fd__row{ margin-top:80px }
.jt-fd__row .jt-fd__wrap{ display:flex; gap:24px; align-items:center }
.jt-fd__row--flip .jt-fd__wrap{ flex-direction:row-reverse }
.jt-fd__media{ flex:1 1 0; min-width:0 }
.jt-fd__media img{
  display:block; width:100%; height:auto; aspect-ratio:508/400;
  object-fit:cover; border-radius:16px;
}
.jt-fd__copy{ flex:1 1 0; min-width:0 }
.jt-fd__copy h2{
  font-family:var(--f-disp); font-weight:500; letter-spacing:normal;
  font-size:clamp(26px, 2.4vw, 34px); line-height:1.25;
}
.jt-fd__copy p{ margin-top:18px; font-size:16px; line-height:1.95 }
/* 冒頭の段落。大きさは本文と同じ16pxに揃え、太さだけで区別する
   （18pxにしていたため本文の大きさが2種類になっていた） */
.jt-fd__lead{ font-weight:500 }

/* ---- ③文章だけの段（写真を使わない） ---------------------------------- */
/* YZS の wysiwyg ブロックと同じで、本文は左寄せ・右に余白を残す */
.jt-fd__prose{ margin-top:80px }
.jt-fd__prose .jt-fd__wrap > *{ max-width:920px }
.jt-fd__prose h2{
  font-family:var(--f-disp); font-weight:500; letter-spacing:normal;
  font-size:clamp(26px, 2.4vw, 34px); line-height:1.25;
}
.jt-fd__prose p{ margin-top:18px; font-size:16px; line-height:1.95 }

/* ---- ⑤経歴 ------------------------------------------------------------ */
.jt-fd__bio{ margin-top:80px }
.jt-fd__bio .jt-fd__wrap{ padding-top:40px; border-top:1px solid var(--line) }
.jt-fd__bio .jt-fd__wrap > *{ max-width:920px }
.jt-fd__bio h3{
  font-family:var(--f-disp); font-weight:500; letter-spacing:normal;
  font-size:26px; line-height:1.3;
}
.jt-fd__bio p{ margin-top:16px; font-size:16px; line-height:1.95 }
.jt-fd__bio a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }

/* ---- ⑥行き先（YZS: listing-carousel） --------------------------------- */
/* 1512px での YZS 実測：入れ物1280px・カード302px・間24px。
   302×4 ＋ 24×3 ＝ 1280 でちょうど4枚が収まり、左右どちらも見切れない。
   本文の段（1040px）より広い入れ物を使うのも YZS と同じ。 */
.jt-fd__dest{ margin-top:88px }
/* 左右の余白を入れると窓が1232pxになり4枚目が切れる。
   1280px 確保できる画面では余白を0にして、302×4＋24×3＝1280 をちょうど収める。 */
.jt-fd__dest .jt-fd__wrap{ max-width:1280px; padding-inline:0 }
@media (max-width:1327px){ .jt-fd__dest .jt-fd__wrap{ padding-inline:24px } }
.jt-fd__dest-head{ display:flex; align-items:center; justify-content:space-between; gap:24px }
.jt-fd__dest-head h2{
  font-family:var(--f-disp); font-weight:500; letter-spacing:normal;
  font-size:clamp(26px, 2.4vw, 34px); line-height:1.25;
}
.jt-fd__more{
  flex:0 0 auto; padding:10px 24px; border:1px solid var(--ink); border-radius:200px;
  color:var(--ink) !important; font-size:14px; font-weight:700; text-decoration:none !important;
  white-space:nowrap; transition:background-color .2s, color .2s;
}
.jt-fd__more:hover{ background:var(--ink); color:var(--paper) !important }

.jt-fd__carousel{ position:relative; margin-top:28px }
.jt-fd__viewport{ overflow:hidden }
.jt-fd__track{
  display:flex; gap:24px; will-change:transform;
  /* トップページのカルーセルと同じ動き（YZS 実測 1500ms easeOutQuint） */
  transition:transform 1.5s cubic-bezier(.25,1,.5,1);
}
.jt-fd__card{ flex:0 0 302px; width:302px; text-decoration:none !important; color:inherit !important }
.jt-fd__card img{ display:block; width:302px; height:302px; object-fit:cover; border-radius:16px }
.jt-fd__card-name{
  margin-top:12px; font-family:var(--f-disp); font-weight:500; letter-spacing:normal;
  font-size:20px; line-height:1.2;
}
.jt-fd__card-meta{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--sub) }
.jt-fd__card-price{ margin-top:6px; font-size:16px; font-weight:700; line-height:1.4 }

/* 左右ボタン。写真の上下中央（302の半分）に置く */
.jt-fd__arrow{
  position:absolute; top:151px; transform:translateY(-50%); z-index:2;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--paper); box-shadow:0 2px 10px rgba(31,31,31,.18);
  transition:opacity .2s;
}
.jt-fd__arrow svg{ width:20px; height:20px; fill:none; stroke:#6B6764; stroke-width:2 }
/* カードの外側に半分はみ出して置く（全幅の帯なので切れない） */
.jt-fd__arrow--prev{ left:-22px }
.jt-fd__arrow--next{ right:-22px }
.jt-fd__arrow[disabled]{ opacity:.35; cursor:default }

/* ---- ⑦問い合わせ（YZS: cta-expert-contact） --------------------------- */
/* 左に文章とボタン、右に写真 */
/* 地は白のまま。その上にピンクの刷毛を敷く。
   画像は色を持ち込まずアルファだけをマスクに使い、柄の色はこちらで指定する
   （トップページの最終CTAと同じやり方）。

   margin は必ず margin-block で書くこと。
   margin ショートハンドにすると .jt-fd__bleed の margin-inline:calc(50% - 50vw) が
   打ち消され、この段だけ右へ147pxずれて左に余白ができる。 */
.jt-fd__cta{ position:relative; margin-block:88px 8px; background:var(--paper); overflow:hidden }
.jt-fd__cta::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--soft);
  /* 860px 固定で下にはみ出させていたら、一筆の下半分が段の外に出て欠けて見えた。
     contain にして画像全体を段の高さに収める（引用セクションと同じ直し方）。 */
  -webkit-mask:url(sumi-brush.webp) no-repeat right center / contain;
          mask:url(sumi-brush.webp) no-repeat right center / contain;
}
.jt-fd__cta .jt-fd__wrap{ position:relative; z-index:1 }
.jt-fd__cta .jt-fd__wrap{
  display:flex; gap:48px; align-items:center; padding-block:56px;
}
.jt-fd__cta-copy{ flex:1 1 0; min-width:0 }
.jt-fd__cta h2{
  font-family:var(--f-disp); font-weight:500; letter-spacing:normal;
  font-size:clamp(26px, 2.6vw, 38px); line-height:1.2;
}
.jt-fd__cta p{ margin-top:18px; font-size:16px; line-height:1.95; color:var(--ink); max-width:56ch }
.jt-fd__cta-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:28px }
.jt-fd__btn{
  display:inline-block; padding:16px 40px; border-radius:200px;
  background:var(--accent); color:var(--paper) !important;
  font-size:16px; font-weight:700; line-height:1.4; text-decoration:none !important;
  transition:background-color .2s;
}
.jt-fd__btn:hover{ background:var(--accent-h) }
.jt-fd__tel{
  font-size:20px; font-weight:700; color:var(--ink) !important;
  text-decoration:none !important; white-space:nowrap;
}
.jt-fd__tel:hover{ color:var(--accent) !important }
.jt-fd__cta-media{ flex:0 0 340px }
.jt-fd__cta-media img{
  display:block; width:100%; height:auto; aspect-ratio:3/4;
  object-fit:cover; border-radius:16px;
}

@media (max-width:1023px){
  .jt-fd{ --pad:24px }
  .jt-fd__hero{ min-height:340px }
  .jt-fd__hero .jt-fd__wrap{ padding-bottom:32px }
  .jt-fd__row .jt-fd__wrap,
  .jt-fd__row--flip .jt-fd__wrap{ flex-direction:column; gap:24px; align-items:stretch }
  .jt-fd__row, .jt-fd__prose, .jt-fd__bio{ margin-top:56px }
  .jt-fd__dest{ margin-top:64px }
  .jt-fd__dest-head{ flex-direction:column; align-items:flex-start; gap:14px }
  .jt-fd__card{ flex:0 0 240px; width:240px }
  .jt-fd__card img{ width:240px; height:240px }
  .jt-fd__arrow{ top:120px; width:38px; height:38px }
  .jt-fd__arrow--prev{ left:2px }
  .jt-fd__arrow--next{ right:2px }
  .jt-fd__cta{ margin-top:64px }
  .jt-fd__cta .jt-fd__wrap{ flex-direction:column; gap:28px; padding-block:40px }
  .jt-fd__cta-media{ flex:0 0 auto; width:100%; max-width:340px }
}

/* 指ではらって送れるようにする。縦はページのスクロールに譲る */
.jt-fd__viewport{ touch-action:pan-y }
.jt-fd__card img{ -webkit-user-drag:none; user-select:none }