@charset "UTF-8";
/* 社員インタビュー専用 */
.interview{width:100%}
body{overflow-x:hidden}
.interview{--green:#47aa4f;--green-dark:#2f7d37;--green-l:#f1f7f1;--green-l2:#e2eee5;--text:#1a1a1a;--gray:rgba(26,26,26,.5);--line:#e6e6e6;--container:1280px;--pad:64px;--font:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;}
.interview *{box-sizing:border-box;margin:0;padding:0}
.interview{font-family:var(--font);color:var(--text);background:#fff;line-height:1.9;-webkit-font-smoothing:antialiased}
.interview a{color:inherit;text-decoration:none}
.interview img{max-width:100%;display:block}
.interview ul{list-style:none}
.interview .wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.interview .wide{max-width:1000px;margin:0 auto;padding:0 24px}
.interview .ph{background:linear-gradient(135deg,#e8efe6,#d7e4d3);display:flex;align-items:center;justify-content:center;color:#8aa287;font-size:13px}
.interview .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff;font-weight:700;border-radius:30px;padding:10px 22px;font-size:14px}
.interview .btn:hover{background:var(--green-dark)}
.interview .btn.lg{padding:16px 44px;font-size:17px}
.interview .btn.gh{background:#fff;color:var(--green);border:1.5px solid var(--green)}
.interview .note{background:#fffbe6;border-bottom:1px solid #f0e0a0;color:#7a5c00;font-size:12px;text-align:center;padding:8px 16px}
.interview /* ===== 実サイト共通：ヘッダー ===== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.interview .site-header .inner{display:flex;align-items:center;justify-content:space-between;height:88px;width:100%;padding:0 40px}
.interview .brand{display:flex;align-items:center}
.interview .brand img{height:38px;width:auto}
.interview .site-nav{display:flex;align-items:center;gap:32px}
.interview .site-nav .menu{display:flex;gap:32px}
.interview .site-nav .menu>li{position:relative;display:flex;align-items:center}
.interview .site-nav .menu>li>a{font-size:16px;color:var(--text);height:88px;display:inline-flex;align-items:center;position:relative}
.interview .site-nav .menu>li>a::after{content:"";position:absolute;left:0;bottom:28px;width:100%;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
.interview .site-nav .menu>li:hover>a::after{transform:scaleX(1)}
.interview .site-nav .dropdown{position:absolute;top:100%;left:0;min-width:240px;background:var(--green);padding:32px 96px 32px 24px;display:flex;flex-direction:column;gap:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:50}
.interview .site-nav .has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.interview .site-nav .dropdown a{color:#fff;font-size:16px;white-space:nowrap}
.interview .site-nav .dropdown a:hover{opacity:.8}
.interview .header-cta{background:var(--green);color:#fff;height:40px;display:inline-flex;align-items:center;padding:0 40px;font-size:16px}
.interview .header-cta:hover{background:var(--green-dark)}
.interview /* ===== 実サイト共通：パンくず ===== */
.breadcrumb{border-bottom:1px solid var(--line)}
.interview .breadcrumb__inner{max-width:var(--container);margin:0 auto;padding:24px var(--pad);font-size:16px;color:rgba(0,0,0,.55);display:flex;align-items:center;flex-wrap:wrap}
.interview .breadcrumb a{color:rgba(0,0,0,.55)}
.interview .breadcrumb a:hover{color:var(--green)}
.interview .breadcrumb .sep{margin:0 10px;color:rgba(0,0,0,.35)}
.interview /* ===== 実サイト共通：フッター ===== */
.site-footer{background:#fff;color:var(--text);border-top:1px solid rgba(0,0,0,.1)}
.interview .site-footer .inner{max-width:var(--container);margin:0 auto;padding:0 64px}
.interview .site-footer .footer__wrap{padding:72px 0}
.interview .footer__top{display:flex;flex-wrap:wrap;gap:120px;justify-content:space-between}
.interview .footer__brand{max-width:392px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.interview .footer__addr{font-size:16px;line-height:1.8;color:rgba(0,0,0,.55)}
.interview .footer__brand img{height:38px}
.interview .footer__nav{display:flex;gap:40px;flex-wrap:wrap}
.interview .footer__col h4{font-size:16px;font-weight:500;color:var(--green);margin-bottom:16px}
.interview .footer__col h4 a{color:var(--green)}
.interview .footer__col a{display:block;font-size:16px;color:rgba(0,0,0,.55);margin-bottom:8px}
.interview .footer__col a:hover{color:var(--green)}
.interview .footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:56px;font-size:16px;color:rgba(0,0,0,.55)}
.interview .footer__bottom a:hover{color:var(--green)}
.interview /* ===== インタビュー本体 ===== */
.phero{background:var(--green-l);padding:44px 0 40px}
.interview .pgrid{display:flex;gap:34px;align-items:center}
.interview .pgrid .ph{width:230px;height:280px;border-radius:16px;flex:none}
.interview .pcat{display:inline-block;background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:14px;letter-spacing:.08em}
.interview .phero h1{font-size:34px;font-weight:700;line-height:1.4;margin-bottom:10px}
.interview .phero .name{font-size:15px;color:#3d443e}
.interview .phero .name b{font-size:18px}
.interview .ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.interview .ptags span{font-size:12px;background:#fff;border:1px solid var(--green-l2);color:var(--green-dark);padding:4px 11px;border-radius:20px}
@media(max-width:720px){.interview .ptags{justify-content:center}}
.interview .pf-sec{padding:34px 0 0}
.interview .profile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 34px;box-shadow:0 8px 22px rgba(30,60,40,.05)}
.interview .pf-intro{font-size:14.5px;color:#3d443e}
.interview .pf-grid{display:grid;grid-template-columns:auto auto auto 1fr;gap:18px 44px;margin-top:20px;border-top:1px solid var(--line);padding-top:20px}
.interview .pf-grid .k{display:block;font-size:11px;color:var(--gray);font-weight:700;margin-bottom:2px}
.interview .pf-grid .v{font-size:14px;font-weight:700}
.interview .cat{margin-top:52px}
.interview .cat-h{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.interview .cat-h .no{background:var(--green);color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:6px}
.interview .cat-h h2{font-size:20px;font-weight:700}
.interview .cat-line{height:2px;background:var(--green-l2);margin-bottom:10px}
.interview .qa{padding:34px 0;border-bottom:1px solid var(--line)}
.interview .qa .q{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.interview .qa .q .qm{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.interview .qa .q h3{font-size:17px;font-weight:700;color:var(--green-dark);padding-top:3px}
.interview .qa .a{display:flex;gap:12px;align-items:flex-start}
.interview .qa .a .am{width:30px;height:30px;border-radius:50%;background:#e7ece8;color:var(--gray);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.interview .qa .a .body{font-size:14.5px;color:#3d443e}
.interview .qa .a .body p{margin-bottom:12px}
.interview .qa .a .body p:last-child{margin-bottom:0}
.interview .sched{margin:6px 0 2px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.interview .sched .it{background:var(--green-l);border-radius:10px;padding:12px 14px}
.interview .sched .it .t{font-weight:700;color:var(--green-dark);font-size:13px}
.interview .sched .it .x{font-size:12.5px;color:#4a514b}
.interview .pull{background:var(--green);color:#fff;border-radius:18px;padding:36px 34px;margin:48px 0;text-align:center}
.interview .pull p{font-size:21px;font-weight:700;line-height:1.7}
.interview .others{background:var(--green-l);margin-top:60px;padding:44px 0}
/* 見出しは職種ページ「主な仕事内容」と同じ体裁（緑の左罫＋英字ラベル＋太字）に統一 2026-08-26。
下の余白は .relx h2 と同値にする（リード文を削除したぶんをここで持つ） */
.interview .others h2{text-align:left;font-size:18px;font-weight:800;color:#1c241f;border-left:5px solid var(--green);padding-left:12px;margin:0 0 22px}
.interview .others h2 .en{display:block;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.14em;color:var(--green);font-weight:700;margin-bottom:1px}
.interview .ocards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.interview .oc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;transition:.15s}
.interview .oc:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(30,60,40,.1)}
.interview .oc .ph{width:72px;height:72px;border-radius:50%;margin:0 auto 10px}
.interview .oc .q{font-size:13px;font-weight:700;color:var(--green-dark);margin-bottom:8px}
.interview .oc .nm{font-size:13px;font-weight:700}
.interview .oc .role{font-size:11px;color:var(--gray)}
.interview .rel{padding:44px 0}
.interview .rel h2{text-align:center;font-size:20px;font-weight:700;margin-bottom:6px}
.interview .rel p.l{text-align:center;font-size:13px;color:var(--gray);margin-bottom:24px}
.interview .relcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.interview .rc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
.interview .rc .t{font-weight:700;font-size:14px;margin-bottom:6px}
.interview .rc.hot{border-color:var(--green);box-shadow:0 6px 16px rgba(71,170,79,.14)}
.interview .rc .b{font-size:11px;color:var(--gray)}
.interview .rc .go{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--green);font-weight:700}
.interview .cta{background:var(--green);color:#fff;text-align:center;padding:60px 24px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.interview .cta h2{font-size:28px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
.interview .cta .cta-l{opacity:.92;font-size:15px;margin-bottom:22px}
.interview .cta h2{color:#fff;font-size:26px;font-weight:700;margin-bottom:26px}
@media(max-width:960px){.interview .site-nav{display:none}}
@media(max-width:720px){.interview .pgrid{flex-direction:column;text-align:center}
.interview .phero h1{font-size:26px}
.interview .pf-grid{grid-template-columns:1fr 1fr}
.interview .sched{grid-template-columns:1fr 1fr}
.interview .ocards{grid-template-columns:1fr 1fr}
.interview .relcards{grid-template-columns:1fr}
.interview .pull p{font-size:18px}
.interview .footer__top{gap:40px}}
.interview /* ===== 装飾・アニメーション ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.interview .reveal.in{opacity:1;transform:none}
.interview .cat{position:relative}
.interview .cat-h, .interview .cat-line, .interview .cat .qa{position:relative;z-index:1}
.interview .pull{position:relative;overflow:hidden;background:linear-gradient(135deg,#4fb457,#2f7d37)!important;padding:44px 40px}
.interview .pull p{position:relative;z-index:1}
.interview .oc{transition:transform .2s,box-shadow .2s,border-color .2s}
.interview .oc:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(30,60,40,.14);border-color:var(--green-l2)}
.interview .rc{transition:transform .2s,box-shadow .2s}
.interview .rc:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(30,60,40,.12)}
.interview .rc .go{transition:.2s;display:inline-block}
.interview .rc:hover .go{transform:translateX(4px)}
.interview .ptags span{transition:.2s}
@media(prefers-reduced-motion:reduce){.interview .reveal{opacity:1;transform:none;transition:none}}
.interview .tl2{margin:8px 0 2px}
.interview .tl2 .row{display:grid;grid-template-columns:78px 1fr;gap:18px}
.interview .tl2 .time{text-align:right;line-height:1.25;padding-top:1px}
.interview .tl2 .ts{display:block;font-weight:700;font-size:15px;color:var(--text)}
.interview .tl2 .te{display:block;font-size:11.5px;color:var(--gray);margin-top:1px}
.interview .tl2 .main{border-left:2px solid var(--green-l2);padding:0 0 26px 24px;position:relative}
.interview .tl2 .row:last-child .main{padding-bottom:2px}
.interview .tl2 .node{position:absolute;left:-7px;top:4px;width:12px;height:12px;background:var(--green);border-radius:3px}
.interview .tl2 .t{font-weight:700;font-size:17px;line-height:1.4}
.interview .tl2 .d{font-size:14px;color:var(--gray);margin-top:2px}
@media(max-width:600px){.interview .tl2 .row{grid-template-columns:70px 1fr;gap:12px}}
.interview .tl2 .d2{font-size:14.5px;color:#3d443e;line-height:1.8}
.interview .tl-note{font-size:14.5px;color:#3d443e;margin-top:14px}
.interview-slider{position:relative;display:flex;align-items:center;gap:12px;margin-top:8px;padding-bottom:36px}
.interview .iv-viewport{overflow:hidden;flex:1}
.interview .iv-track{display:flex;gap:26px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
/* カード幅は parts.css の .iv-track>.person-card に一本化した 2026-08-30。
ここに同値コピーを戻さないこと */
.interview .iv-nav{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--green);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.interview .iv-nav:hover{background:var(--green);color:#fff;border-color:var(--green)}
.interview .iv-dots{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:8px}
.interview .iv-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}
.interview .iv-dots button.on{background:var(--green);width:22px;border-radius:5px}
/* 1枚表示の境目は parts.css（767px）に一本化 2026-08-30。
ここだけ720pxになっていたため、721〜767pxで「CSSは3枚・JSは1枚」とズレていた */
.interview .wide.rel{max-width:var(--container);padding:0 clamp(20px,5vw,64px)}
.interview .others{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* 「他の先輩社員の声」の左端を「この社員が関わる仕事」（.relx＝1000px・左右padding無し）
に合わせる 2026-08-26（ユーザー指示）。値を同じにすることで両見出しの縦のラインが揃う */
.interview .others .wide{max-width:1000px;padding:0}
.interview .rel{margin-top:76px}
.interview .jobreq{margin-top:76px}
.interview .jobreq h2{text-align:center;font-size:20px;font-weight:700;margin-bottom:6px}
.interview .jobreq p.l{text-align:center;font-size:13px;color:var(--gray);margin-bottom:26px}
.interview .jobreq-cards{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.interview .jobreq-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.interview .jobreq-cards{grid-template-columns:1fr}}
/* ===== 案B：目次ナビ＋本文（H.I） ===== */
.interview--b .ivb{padding:14px 0 0}
.interview .ivb-grid{display:grid;grid-template-columns:250px 1fr;gap:46px;align-items:start}
.interview .ivb-side{position:sticky;top:104px}
.interview .ivb-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(30,60,40,.06)}
.interview .ivb-mini{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.interview .ivb-ph{width:60px;height:60px;border-radius:50%;flex:none;font-size:11px}
.interview .ivb-nm b{font-size:16px;display:block}
.interview .ivb-nm small{font-size:12px;color:var(--gray)}
.interview .ivb-pf{border-top:1px solid var(--line);padding-top:12px;margin-bottom:12px}
.interview .ivb-pf .r{display:flex;flex-direction:column;margin:8px 0}
.interview .ivb-pf .k{font-size:11px;color:var(--green);font-weight:700}
.interview .ivb-pf .v{font-size:13px;font-weight:700}
.interview .ivb-nav{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:12px;margin-bottom:14px}
.interview .ivb-navh{font-size:11px;letter-spacing:.14em;color:var(--green);font-weight:700;margin-bottom:8px}
.interview .ivb-nav a{padding:9px 10px;border-radius:8px;font-size:13px;font-weight:700;color:#3d443e;transition:.15s}
.interview .ivb-nav a:hover,.interview .ivb-nav a.on{background:var(--green-l);color:var(--green-dark)}
.interview .ivb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.interview .ivb-btn{display:block;text-align:center;border-radius:8px;padding:12px;width:100%}
.interview .ivb-main .cat{margin-top:0;scroll-margin-top:104px}
.interview .ivb-main .cat+.cat{margin-top:40px}
.interview .ivb-main .qa:first-of-type{padding-top:22px}
@media(max-width:860px){.interview .ivb-grid{grid-template-columns:1fr;gap:24px}.interview .ivb-side{position:static}}
/* ===== 案C：プロフィールヘッダー＋Q&A 2カラム（K.H） ===== */
.interview--c .ivc{padding:34px 0 0}
.interview .ivc-head{display:grid;grid-template-columns:230px 1fr;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(30,60,40,.05);margin-bottom:26px}
.interview .ivc-photo{min-height:230px;font-size:12px}
.interview .ivc-hb{padding:24px 28px}
.interview .ivc-hb .pcat{margin-bottom:8px}
.interview .ivc-hb b{font-size:22px;display:block;line-height:1.3}
.interview .ivc-hb small{font-size:13px;color:var(--gray)}
.interview .ivc-pf{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.interview .ivc-pf .r{display:flex;flex-direction:column;margin:4px 0}
.interview .ivc-pf .k{font-size:11px;color:var(--green);font-weight:700}
.interview .ivc-pf .v{font-size:13px;font-weight:700}
.interview .ivc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.interview .ivc-cards{columns:2;column-gap:24px}
.interview .ivc-card{-webkit-column-break-inside:avoid;break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:24px;box-shadow:0 6px 18px rgba(30,60,40,.04)}
.interview .ivc-card .qa{padding:0;border-bottom:none}
.interview .ivc-tag{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--green-dark);border-radius:12px;padding:3px 12px;margin-bottom:12px}
@media(max-width:860px){.interview .ivc-head{grid-template-columns:1fr}.interview .ivc-cards{columns:1}}
/* ===== インタビュー 2カラム（iv2） 2026-08-15 ===== */
.iv2{--i2deep:#3f8256;--i2deep2:#316847}
.iv2 .iv2page{max-width:1180px;margin:0 auto 60px;display:grid;grid-template-columns:266px 1fr;background:#fff;box-shadow:0 10px 30px rgba(11,61,39,.08)}
.iv2 .iv2side{background:linear-gradient(180deg,var(--i2deep) 0%,var(--i2deep2) 100%);color:#fff;position:sticky;top:0;align-self:start;min-height:100vh}
.iv2 .iv2ph{height:392px;background:linear-gradient(180deg,#5b937048,#43795520);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.14)}
.iv2 .iv2ph span{color:rgba(255,255,255,.6);font-size:13px;letter-spacing:.22em}
.iv2 .iv2body{padding:26px 26px 34px}
.iv2 .iv2nm b{display:block;font-size:23px;letter-spacing:.02em;padding-bottom:2px}
.iv2 .iv2prof{margin:22px 0 26px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px}
.iv2 .iv2prof .r{display:flex;gap:10px;padding:7px 0;font-size:12.5px;line-height:1.65}
.iv2 .iv2prof .k{flex:0 0 84px;color:rgba(255,255,255,.68)}
.iv2 .iv2prof .v{flex:1;color:#fff}
.iv2 .iv2navh{font-size:13px;font-weight:700;letter-spacing:.06em;padding:12px 0;border-top:1px solid rgba(255,255,255,.2)}
.iv2 .iv2nav{display:flex;flex-direction:column;gap:2px}
.iv2 .iv2nav a{display:flex;gap:10px;align-items:center;padding:11px 14px;margin:0 -14px;color:rgba(255,255,255,.88);text-decoration:none;font-size:13px;border-radius:4px;transition:.18s}
.iv2 .iv2nav a span{font-family:"Jost",sans-serif;font-weight:700;color:rgba(255,255,255,.55);font-size:12px}
.iv2 .iv2nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.iv2 .iv2nav a.on{background:rgba(255,255,255,.17);color:#fff;font-weight:700}
.iv2 .iv2nav a.on span{color:#d3f0da}
.iv2 .iv2main{min-width:0}
.iv2 .iv2hero{position:relative;height:392px;background:#f3f7f3;padding:0 56px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.iv2 .iv2lab{font-family:"Jost",sans-serif;font-size:12px;letter-spacing:.24em;color:var(--green);font-weight:700}
/* 「断らない」見出しの横の人物写真：SPのみ表示（2026-08-26・ユーザー指示・プレビュー中）。
PC版は左カラムに写真があるためここでは常に非表示のまま。 */
.iv2 .iv2hero-ph{display:none}
.iv2 .iv2hero h1{font-size:29px;line-height:1.62;margin:14px 0 20px;letter-spacing:.01em}
/* 見出しの各行。以前は
で改行していたが、
があると text-wrap:balance が
効かず（行の長さを揃えてくれず）、SPで「た。」だけが次行に残っていた。
1行ずつブロックにすることで、行ごとに均等な折り返しができる 2026-08-26。
PCでは
のときと同じ見た目（各行が独立した行）になる。 */
.iv2 .iv2hero h1 .ln{display:block}
/* .lnb ＝ 1行が長すぎる見出しの「予備の改行位置」。
PC・タブレットでは inline のまま（＝親の .ln と1行に並ぶ）で見た目は変わらない。
900px以下（＝PC以外のレイアウト）では見出しの幅が足りず、text-wrap:balance が働いて
「任される仕事が広／がっていきました。」のように語の途中で割れる。
そこで 900px以下では block にして、意図した位置で改行させる。
区切り位置は採用トップのスライダー引用・募集要項の引用文と同じ 2026-08-30 */
.iv2 .iv2hero h1 .lnb{display:inline}
@media(max-width:900px){ .iv2 .iv2hero h1 .lnb{display:block} }
.iv2 .iv2nm2{margin:0;font-size:15px;font-weight:700}
.iv2 .iv2role{margin:6px 0 18px;font-size:13px;color:#5d6a61}
.iv2 .iv2tags{display:flex;flex-wrap:wrap;gap:8px}
.iv2 .iv2tags span{font-size:12px;color:var(--gd,#2f7d37);border:1px solid #bcdcc3;background:#fff;border-radius:16px;padding:5px 13px}
/* flow-root：記事の最後のイラストが白い枠の外へはみ出さないための受け皿。
回り込み自体は各回答をまたいで続き、ここ（記事の末尾）でだけ収める 2026-08-25 */
.iv2 .iv2cont{padding:44px 56px 10px;display:flow-root}
.iv2 .iv2sec{margin-bottom:48px}
.iv2 .iv2h{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.iv2 .iv2n{font-family:"Jost",sans-serif;font-size:26px;font-weight:700;color:var(--g,#47aa4f);min-width:16px}
.iv2 .iv2h h2{font-size:20px;margin:0;letter-spacing:.02em}
.iv2 .iv2qa{margin-bottom:26px}
.iv2 .iv2q{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px}
.iv2 .iv2qb{flex:0 0 22px;height:22px;border-radius:50%;background:var(--g,#47aa4f);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.iv2 .iv2q h3{font-size:14.5px;margin:0;color:var(--gd,#2f7d37);line-height:1.6}
.iv2 .iv2a{padding-left:33px}
.iv2 .iv2a p{margin:0 0 9px;font-size:13.2px;line-height:1.95;color:#46524a}
.iv2 .iv2tl{border-left:2px solid #d8e6db;margin:4px 0 0}
.iv2 .iv2tr{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:10px 0 10px 18px;position:relative}
/* 丸と縦線の中心を合わせる。擬似要素には .interview *{box-sizing:border-box} が効かないため
実寸は 10+2+2=14px。left:-8px で中心が縦線（border-left 2px）の中心と一致する 2026-08-20 */
.iv2 .iv2tr::before{content:"";position:absolute;left:-8px;top:17px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--g,#47aa4f)}
.iv2 .iv2tm{font-family:"Jost",sans-serif;font-weight:700;font-size:14px;color:var(--gd,#2f7d37);white-space:nowrap}
.iv2 .iv2tm em{font-style:normal;font-size:11.5px;color:#5d6a61;margin-left:3px}
.iv2 .iv2td{font-size:13px;line-height:1.9;color:#46524a}
.iv2 .iv2note{margin:12px 0 0;font-size:12px;color:#5d6a61}
@media(max-width:900px){
.iv2 .iv2page{grid-template-columns:1fr}
.iv2 .iv2side{position:static;min-height:0}
.iv2 .iv2ph{height:260px}
.iv2 .iv2hero{height:auto;padding:40px 24px}
.iv2 .iv2cont{padding-left:24px;padding-right:24px}
/* SPのみ表示順を「断らない…」の見出し（薄い緑）→写真＋名前＋目次（濃い緑）→本文 に入れ替え
（2026-08-26・ユーザー指示）。.iv2main を display:contents にして箱を消し、
中の .iv2hero と .iv2cont を .iv2page の直下グリッドアイテムとして扱えるようにしてから
order で並べ替える。PC版のマークアップ・表示順は一切変更しない。 */
.iv2 .iv2main{display:contents}
.iv2 .iv2hero{order:1}
.iv2 .iv2side{order:2}
.iv2 .iv2cont{order:3}
}
/* ===== iv2 追従サイド 2026-08-20 =====================================
要件
・プロフィール項目はヒーローへ（.iv2hprof）。サイドは 写真＋名前＋目次 に絞る
・左カラムの色は記事の一番下まで伸ばす → .iv2side は align-self:stretch（sticky は内側の .iv2stick）
・写真の上端は絶対に見切れない → .iv2ph を .iv2stick 内で sticky top:0
・目次は白背景で可視性を上げる
・グラデーションは px 指定。文字が乗る 392px 以降が #2f7d37 以下（白文字コントラスト 5.2:1）になるようにしている
------------------------------------------------------------------ */
.iv2 .iv2hprof{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:3px 44px;margin:2px 0 16px;justify-content:start}
.iv2 .iv2hprof .r{display:flex;gap:12px;font-size:12.5px;line-height:1.75;align-items:baseline}
.iv2 .iv2hprof .k{color:#7a867e;white-space:nowrap;flex:0 0 auto;font-size:11.5px;letter-spacing:.04em}
.iv2 .iv2hprof .v{color:#2b352e;font-weight:500;white-space:nowrap}
.iv2 .iv2hero h1{margin:12px 0 16px}
.iv2 .iv2role{margin:5px 0 12px}
/* 左カラム：色は下まで、中身だけ追従 */
.iv2 .iv2side{position:static;align-self:stretch;min-height:0;overflow:visible;
background:var(--i2green,#2f7d37)} /* 2026-08-20 濃い緑に確定（白文字 5.11:1） */
.iv2{--ivhead:88px;
/* 写真の高さ。ヒーローも同じ値を使うので、両者は常に同じ高さになる。
画面が低いときだけ少し縮めて、写真＋名前＋目次が1画面に収まるようにする。 */
--ivph:clamp(360px,calc(100vh - var(--ivhead) - 368px),392px)}
.admin-bar .iv2{--ivhead:120px} /* WP管理バー32px分 */
/* 内部スクロールは持たせない（スクロールバーを出さない）。
収まりは --ivph（写真の高さ）を画面高に応じて縮めることで担保する。 */
.iv2 .iv2stick{position:sticky;top:var(--ivhead);background:var(--i2green,#2f7d37)}
/* 写真：ダミーイラスト。上端は常に固定して見切れないようにする */
.iv2 .iv2ph{position:static;flex:none;
background:#eef7f0;box-shadow:inset 0 0 0 1px rgba(71,170,79,.18)}
.iv2 .iv2ph span{display:block;color:#7ba585;font-size:13px;letter-spacing:.22em}
/* 名前も写真の直下で固定する。サイドが単色なので背景を合わせれば継ぎ目が出ない。
これで、目次が画面に収まらない環境でも 写真＋名前 は常に見えたままになる。 */
.iv2 .iv2ph{height:var(--ivph)}
.iv2 .iv2hero{height:var(--ivph)}
.iv2 .iv2nm{background:var(--i2green,#2f7d37);padding-bottom:8px}
.iv2 .iv2body{padding:18px 26px 22px}
.iv2 .iv2nm b{font-size:21px}
.iv2 .iv2navh{padding:9px 0 7px}
.iv2 .iv2nav{gap:4px}
/* 名前の下の所属・役職・入社年 */
.iv2 .iv2nmr{display:block;margin-top:6px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.92);font-weight:500}
.iv2 .iv2navh{color:#fff;letter-spacing:.06em;border-top-color:rgba(255,255,255,.34)}
.iv2 .iv2prof,.iv2 .iv2navh{border-top-color:rgba(255,255,255,.34)}
/* 目次：番号を丸で見せるステップ型（案5）2026-08-20
背景が濃い緑 #2F7D37 になり白文字で 5.11:1 を確保できたため、白ボタンをやめて
テキスト＋番号の丸に変更。現在地は丸を白で塗りつぶす。 */
.iv2 .iv2navh{margin-top:2px}
.iv2 .iv2nav{gap:4px}
.iv2 .iv2nav a{margin:0;padding:8px 0;gap:12px;background:transparent;box-shadow:none;border-radius:0;
color:rgba(255,255,255,.85);font-weight:500}
.iv2 .iv2nav a span{flex:0 0 22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(255,255,255,.42);color:rgba(255,255,255,.8);font-size:11px;transition:.18s}
.iv2 .iv2nav a:hover{background:transparent;color:#fff}
.iv2 .iv2nav a:hover span{border-color:#fff;color:#fff}
.iv2 .iv2nav a.on{background:transparent;box-shadow:none;color:#fff;font-weight:700}
.iv2 .iv2nav a.on span{background:#fff;border-color:#fff;color:var(--i2green,#2f7d37);font-weight:700}
@media(max-width:900px){
.iv2 .iv2hprof{grid-template-columns:1fr;gap:2px}
.iv2 .iv2hprof .v{white-space:normal}
.iv2 .iv2side{align-self:auto;background:var(--i2green,#2f7d37)}
.iv2 .iv2stick{position:static}
.iv2 .iv2nm{padding-bottom:0}
/* バグ修正（2026-08-26）：.iv2hero{height:var(--ivph)}（PC用・写真と高さを合わせる指定）が
ここより前の行にあり、SP用の height:auto を上書きしてしまっていた。
結果、タグ（通信設備／電気設備…）がヒーロー枠の下端からはみ出し、次のブロックに隠れていた。
ここで改めて height:auto にして、SPでは中身の高さぶんだけ枠が伸びるようにする。 */
/* SPのヒーロー：見出しは全幅のまま、人物は見出しの下に中央配置（案D・2026-08-26ユーザー確定）。
文字を写真の横に回り込ませると見出しが1行3〜4文字になって読みにくいため、
縦積み（grid）にして横幅はすべて全幅で使う。高さは中身なり（PC用の height:var(--ivph) を打ち消す）。 */
.iv2 .iv2hero{height:auto;display:grid;
grid-template-areas:"lab" "ttl" "ph" "nm" "prof" "tags"}
.iv2 .iv2lab{grid-area:lab}
/* 見出しが「を、」のように1〜2文字だけ次の行に送られるのを防ぐ（2026-08-26・ユーザー指示）。
・text-wrap:balance … 折り返すときに各行の長さを揃えるので、最後の行だけ極端に短くならない
・font-size を画面幅に追従（clamp）… そもそも折り返し自体を減らす
29px固定のままだと、機種によって1行に収まったり溢れたりして端数が出ていた。 */
.iv2 .iv2hero h1{grid-area:ttl;font-size:clamp(20px,5.6vw,29px);text-wrap:balance}
/* ★display は none が既定。背景画像を持つ人だけ下の一覧で block に戻す。
block を既定にすると、切り抜き写真がまだ無い人（Y.W・R.M）のページで
230pxの「空っぽの枠」だけが残ってしまうため（2026-08-30 修正）。
写真を追加するときは ①background-image のコメントを外す ②下の block 一覧に
そのクラスを足す、の2か所を直すこと。 */
.iv2 .iv2hero-ph{grid-area:ph;display:none;width:100%;height:230px;
background-repeat:no-repeat;background-position:center center;background-size:contain;
margin:6px 0 12px}
.iv2 .iv2hero-ph--hi,
.iv2 .iv2hero-ph--kh,
.iv2 .iv2hero-ph--as{display:block}
/* ★クラス名は緑ボックス用の .iv2ph--XX と必ず分ける（2026-08-26 修正）。
.iv2ph--hi 等は「background: … /cover」の一括指定なので、ヒーロー側で
流用すると cover が効いて人物の上下が切れてしまう。専用クラスにして
上の contain（＝縮小して全体を見せる）が効くようにしている。 */
.iv2 .iv2hero-ph--hi{background-image:url(images/recruit/interview-hi-cutout.webp)}
.iv2 .iv2hero-ph--kh{background-image:url(images/recruit/interview-kh-cutout.webp)}
/* ★A.S さんだけ SP専用の別ファイルを使う（2026-09-06・案D2）。
共有の interview-as-cutout.webp は腰まで写っていて、頭の大きさが
H.I（99.0px）・K.H（98.3px）に対して 84.4px しかなく「引きすぎ」に見えていた。
下を280px・右の余白を230px切って 848×1150 にし、頭を105pxに寄せて中央に置いたもの。
★共有ファイルは書き換えない。あちらは先輩カード（.iv3__photo）が6か所で使っている。 */
.iv2 .iv2hero-ph--as{background-image:url(images/recruit/interview-as-cutout-sp-2026-09-06.webp)}
/* Y.W・R.M は切り抜き写真がまだ無い。あとで差し替えるので場所だけ確保しておく
（2026-08-26・ユーザー指示）。画像を images/recruit/ に置いて、下の
background-image のコメントを外せばそのまま表示される。 */
/* .iv2 .iv2hero-ph--yw{background-image:url(images/recruit/interview-yw-cutout.webp)} */
/* .iv2 .iv2hero-ph--rm{background-image:url(images/recruit/interview-rm-cutout.webp)} */
/* 名前は区切り線の下に置く（2026-08-26・ユーザー指示）。
区切り線はもともと .iv2hprof の border-top だったため、名前が線の上にあった。
線を .iv2nm2 側へ移して「写真 → 線 → 名前 → プロフィール」の並びにする。 */
.iv2 .iv2nm2{grid-area:nm;border-top:1px solid #dbe6de;padding-top:13px;margin-top:2px}
.iv2 .iv2hprof{grid-area:prof} /* 線を外す指定はファイル末尾（後方の指定に負けるため） */
/* タグは画面幅にかかわらず2行までに収める（2026-08-26・ユーザー指示）。
最大8個あり、12px固定では狭い機種で3〜4行に溢れていた。
文字・余白・間隔を画面幅に追従させて、行数が増えないようにする。 */
.iv2 .iv2tags{grid-area:tags;gap:clamp(4px,1.3vw,8px)}
.iv2 .iv2tags span{font-size:clamp(9px,2.5vw,12px);
padding:clamp(3px,0.9vw,5px) clamp(6px,2vw,13px)}
/* 濃い緑のボックスは目次だけにする（2026-08-26・ユーザー指示）。
人物写真はヒーローへ移したので、ここに残すと同じ人が続けて2回出てしまう。
名前・所属もヒーローに出ているため重複。 */
.iv2 .iv2side .iv2ph{display:none}
.iv2 .iv2nm{display:none}
}
/* ===== SP：目次を「現在地バー」として上部に固定（案4）2026-08-26 =====
閉じている間は今読んでいる章だけを1行（約50px）で出す。占有を小さくして
本文の可読面積を確保しつつ、現在地とページ内移動の両方を満たす。
開閉の制御は js/interview-toc.js（is-open クラスの付け外し）。 */
/* 固定位置の基準＝ヘッダーの高さ。768px以下はヘッダーが position:fixed で72px、
769〜900px は sticky で88px（style.css / interview.css の指定に合わせる）。
WPの管理バーが出ているときはその分を足す。 */
@media(max-width:900px){ .iv2{--spivhead:88px} }
@media(max-width:768px){ .iv2{--spivhead:72px} }
@media screen and (max-width:782px){ .admin-bar .iv2{--spivhead:118px} }
@media screen and (min-width:783px) and (max-width:900px){ .admin-bar .iv2{--spivhead:120px} }
.iv2toc-toggle{display:none}
@media(max-width:900px){
.iv2 .iv2side{position:sticky;top:var(--spivhead);z-index:20;
box-shadow:0 6px 16px rgba(9,45,31,.18)}
.iv2 .iv2body{padding:0 20px}
.iv2 .iv2navh{display:none}
/* 1行目（2026-08-26・ユーザー指示）
閉じているとき＝いま読んでいる章（番号の丸＋章名）／開いているとき＝「インタビュー目次」。
開いているときは番号の丸を出さない（.is-menu）。 */
.iv2toc-toggle{display:flex;align-items:center;gap:12px;width:100%;
background:transparent;border:0;padding:13px 0;cursor:pointer;
font:inherit;font-size:13.5px;font-weight:700;color:#fff;text-align:left}
.iv2toc-n{flex:0 0 22px;height:22px;border-radius:50%;background:#fff;
color:var(--i2green,#2f7d37);font-size:11px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center}
.iv2toc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv2toc-toggle.is-menu .iv2toc-n{display:none}
.iv2toc-toggle.is-menu{font-size:13px;letter-spacing:.06em}
.iv2toc-toggle::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;
border-right:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(45deg);transform-origin:60% 60%;transition:transform .2s ease}
.iv2 .iv2side.is-open .iv2toc-toggle::after{transform:rotate(-135deg)}
.iv2 .iv2nav{display:none;padding:4px 0 12px;
border-top:1px solid rgba(255,255,255,.34)}
.iv2 .iv2side.is-open .iv2nav{display:flex}
/* 目次から飛んだとき、見出しがヘッダー＋固定バーの下に隠れないようにする */
.iv2 .iv2sec{scroll-margin-top:calc(var(--spivhead) + 62px)}
}
/* 「この先輩が関わる仕事」が1職種だけのときのカード配置 2026-08-20
求人原稿（職種紹介ページ）で、その先輩の声が掲載されている職種だけを出すため。 */
.interview .relcards--solo{grid-template-columns:minmax(0,380px);justify-content:center}
@media(max-width:820px){.interview .relcards--solo{grid-template-columns:1fr}}
/* H.I さんの写真 2026-08-20（実写真が揃うまでの暫定。ほかの4名はプレースホルダのまま） */
.iv2 .iv2ph--hi{background:#eef7f0 url(images/recruit/interview-hi.jpg) center 18%/cover no-repeat;box-shadow:none}
.iv2 .iv2ph--kh{background:#eef7f0 url(images/recruit/interview-kh.jpg) center 22%/cover no-repeat;box-shadow:none}
/* ★2026-09-06：ファイル名を変えている。中身を差し替えても同じ名前だと
ブラウザが古い画像をキャッシュから出してしまい「直っていない」ように見えるため。
旧 interview-as.jpg は削除せず残してある（未使用）。 */
.iv2 .iv2ph--as{background:#eef7f0 url(images/recruit/interview-as-2026-09-06.jpg) center 20%/cover no-repeat;box-shadow:none}
/* 写真が入った人は「写真」のプレースホルダ文字を消す */
.iv2 .iv2ph--hi span,.iv2 .iv2ph--kh span,.iv2 .iv2ph--as span{display:none}
/* Q と Q の間隔を広げる 2026-08-20 */
.iv2 .iv2qa{margin-bottom:40px}
.iv2 .iv2qa:last-child{margin-bottom:0}
/* 目次のリンクで飛んだとき、見出しが追従ヘッダーの下に隠れないようにする 2026-08-20 */
.iv2 .iv2sec{scroll-margin-top:calc(var(--ivhead, 88px) + 20px)}
/* 番号付きの大見出し（1 仕事内容とキャリア 等）だけは、イラストの横に入らず
必ずイラストの下・ページの左端から始める（2026-08-25・ユーザー指示）。
章の区切りなので、本文と同じ列に収まっていると節の変わり目が分かりにくい。
※質問（.iv2q）と本文は今までどおりイラストの横に並ぶ。ここだけ clear する。 */
.iv2 .iv2h{clear:both}
@media(max-width:640px){.iv2 .iv2h{clear:none}}
/* 1日のスケジュール：終了時刻は開始時刻の下段に、他の時刻と同じ体裁で（案C）2026-08-20
重複する終了時刻（次の行の開始時刻と同じもの）はマークアップ側で省略している */
.iv2 .iv2tr{grid-template-columns:86px 1fr}
/* 終了時刻は開始時刻の下に置くが、行の高さを増やさないため絶対配置にする。
行間（上下パディング 10px+10px＝20px）の中に収める。 */
/* align-self:start が必須（2026-08-26 修正）。
時刻セルはグリッドの子なので、既定（stretch）だと説明文が2行に折り返した行では
セル自体が行の高さまで伸びる。終了時刻は top:100% で置いているため、
伸びた分だけ下にずれてしまう（SPのK.H「5:30 〜6:00」で発生）。
高さを中身だけにして、どの行でも開始時刻のすぐ下に来るようにする。 */
.iv2 .iv2tm{position:relative;display:block;align-self:start}
.iv2 .iv2tm em{position:absolute;left:0;top:calc(100% + 1px);display:block;margin-left:0;
font-size:13px;font-weight:700;color:var(--gd,#2f7d37);line-height:1.3;white-space:nowrap}
/* ===== ヒーローのプロフィール：他ページ上部と同じ体裁（案5）＋
名前の下の「所属・役職・入社年」は重複のため非表示（案A） 2026-08-20 ===== */
.iv2 .iv2hprof{display:grid;grid-template-columns:1fr 1fr;gap:2px 34px;border-top:1px solid #dbe6de;
margin:8px 0 12px;padding-top:11px;justify-content:stretch}
.iv2 .iv2hprof .r{display:flex;flex-direction:column;gap:1px;margin:3px 0}
.iv2 .iv2hprof .k{font-size:11px;color:var(--green,#47aa4f);font-weight:700;letter-spacing:.02em;flex:none}
.iv2 .iv2hprof .v{font-size:13px;font-weight:700;color:#1a1a1a;white-space:normal;line-height:1.5}
.iv2 .iv2hero h1{margin:10px 0 12px}
/* 「18:00 以降」の「以降」は時刻ではないので、説明文と同じ文字サイズにする。
終了時刻（〜8:00）と違って下段ではなく時刻の横に置く。
inline なので行の高さは変わらず、項目の余白は移動前のまま 2026-08-22 */
.iv2 .iv2tm em.suf{position:static;display:inline;margin-left:4px;
font-size:12px;font-weight:500;color:#5d6a61;line-height:1}
/* ===== ページ下部：担当職種を先に出し、募集要項はリストに（下部案B）2026-08-20 =====
見出しは「この先輩が関わる仕事」としてカードの外に出し、カードは
採用トップ（JOBS）の職種カードと同じ斜めエッジ＋写真の意匠を使う。 2026-08-22 */
.interview .relx{padding:52px 0 8px}
/* 見出しは職種ページ「主な仕事内容」と同じ体裁（緑の左罫＋英字ラベル＋太字）に統一 2026-08-26 */
.interview .relx h2{text-align:left;font-size:18px;font-weight:800;color:#1c241f;border-left:5px solid var(--green);padding-left:12px;margin:0 0 22px}
.interview .relx h2 .en{display:block;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.14em;color:var(--green);font-weight:700;margin-bottom:1px}
/* カードは斜めカットをやめて矩形に。下の先輩カードと同じ角丸＋やわらかい影に揃える。
★カード全体のホバー演出は付けない 2026-08-26（ユーザー指示）。
このカード自体はリンクではないため、動くと押せるように見えてしまう。
動かすのは中の2つのボタン（.jp-pill）だけ。 */
/* 影は付けず、角は落とさず、薄いグレーの枠で背景と切り分ける
（2026-08-26・ユーザー指示／PC・SP共通）。
影を消したら白いカードが白い背景と同化したため枠を足した。緑の枠は主張が強すぎたので、
背景色になじむ緑みのごく薄いグレーにして、写真の見切り線（緑）だけを差し色として残す。 */
.interview .relx-card{display:grid;grid-template-columns:44% 1fr;background:#fff;overflow:hidden;
border-radius:0;border:1px solid #dde3de}
/* 先輩カードの写真下の緑ライン（border-bottom）に相当する見切り線 */
.interview .relx-thumb{width:100%;height:100%;min-height:210px;background:#e7ede7 center/cover no-repeat;
border-right:3px solid var(--green)}
.interview .relx-thumb.jc-comm{background-image:url(images/recruit/job-tsushin.jpg)}
.interview .relx-thumb.jc-elec{background-image:url(images/recruit/job-denki.jpg)}
.interview .relx-thumb.jc-kanri{background-image:url(images/recruit/job-kanri-photo.jpg)}
.interview .relx-body{padding:26px 52px 26px 46px;display:flex;flex-direction:column;justify-content:center}
/* タグは囲いなし（塗りも枠もなし） 2026-08-22 */
.interview .relx-tag{font-size:12px;font-weight:800;color:var(--green);
background:transparent;border:0;padding:0;letter-spacing:.06em;margin-bottom:10px}
.interview .relx-card h3{font-size:22px;margin:0 0 8px}
.interview .relx-card p{font-size:14px;color:var(--gray);margin:0;max-width:92%}
/* 「職種を見る／募集要項を見る」は本文の下に横並びで配置 2026-08-26（ユーザー指示）
採用トップと共通の .jp-pill をそのまま使うので、大きさ・塗りつぶし演出とも変更しない
（720px以下で全幅になるのも他ページの.jp-pillと同じ挙動のまま＝タップしやすい）。 */
.interview .relx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
/* この2つのボタンだけ .jp-pill の配色を反転：通常時=緑塗り／白文字、ホバー時=白抜き／緑文字 2026-08-26（ユーザー指示）
.jp-pill 自体（採用トップ・職種ページ）は変更しない。塗りつぶしアニメーションの仕組みはそのまま流用。 */
.interview .relx-cta .jp-pill{background:var(--green);color:#fff;border-color:var(--green)}
.interview .relx-cta .jp-pill::after{background:#fff}
.interview .relx-cta .jp-pill:hover{color:var(--green)}
@media(max-width:820px){
.interview .relx-card{grid-template-columns:1fr}
.interview .relx-thumb{min-height:180px;border-right:0;border-bottom:3px solid var(--green)}
.interview .relx-body{padding:24px 30px}
}
.interview .jobreqx{padding:52px 0 8px}
.interview .jobreqx h2{text-align:center;font-size:20px;font-weight:700;margin-bottom:6px}
.interview .jobreqx p.l{text-align:center;font-size:13px;color:var(--gray);margin-bottom:22px}
.interview .jrx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.interview .jrx li{border-bottom:1px solid var(--line)}
.interview .jrx a{display:grid;grid-template-columns:250px 1fr 24px;align-items:center;gap:18px;padding:16px 6px;transition:.18s}
.interview .jrx a:hover{background:#f4f9f5;padding-left:14px}
.interview .jrx b{font-size:15px}
.interview .jrx span{font-size:13px;color:var(--gray)}
.interview .jrx em{font-style:normal;color:var(--green);font-weight:700;text-align:right}
@media(max-width:720px){.interview .jrx a{grid-template-columns:1fr 20px;gap:4px 10px}.interview .jrx span{grid-column:1/-1}}
/* ===== セクション見出し＋アイソメトリックのイラスト 2026-08-20 =====
1〜5の各章に対応した挿絵を、見出しの右に配置する。
画像は白背景を透過にしてあるので、背景色が変わっても浮かない。 */
.iv2 .iv2h{display:grid;grid-template-columns:1fr;align-items:center;gap:20px;margin-bottom:22px}
.iv2 .iv2ht{display:flex;align-items:baseline;gap:14px;min-width:0}
/* イラストは章の最初の回答に回り込ませる（案C）。
文章の塊の中に絵が入るので、ページ全体の文字の密度が下がる。 */
/* イラストは回答ごとに置く。文章に回り込ませるが、次の2点で端を揃える 2026-08-22
・shape-outside を使わない（円形に回り込ませると行頭・行末がガタつくため、
長方形のまま回り込ませて縦のラインをまっすぐにする）
・段落を両端揃え（text-align:justify）にして、行末もそろえる
iv2ill--wide は3コマなど横長のもの。回り込ませず本文の間に置く */
/* ★イラストは質問ブロック(.iv2qa)の直下・見出しより前に置く（2026-08-25）
以前は回答(.iv2a)の中＝見出しより後ろに置いていたため、見出しの位置にはまだ
float が無く、見出しだけが本文と違う列（左端）に出ていた。
見出しより前に移したことで、見出しも本文も同じ列に揃う。
左右は画像自身のクラス（--right / --left）で決める。 */
.iv2 .iv2qa > .iv2ill{display:block;width:300px;height:auto;shape-outside:none;clear:both}
/* clear:both …「左のイラストと右のイラストが本文を挟んで潰す」のを防ぐ 2026-08-25
回り込みを回答ごとに打ち切らないため、前の回答の左寄せイラストが残っているところへ
次の回答の右寄せイラストが入ると、本文が両側から挟まれて8文字幅まで細くなっていた。
イラスト自身に clear を掛けると、前のイラストの下端より下から始まるので挟まれない。 */
.iv2 .iv2qa > .iv2ill--right{float:right;margin:var(--ivy,0px) 0 0 30px}
.iv2 .iv2qa > .iv2ill--left{float:left;margin:var(--ivy,0px) 30px 0 0}
.iv2 .iv2a > p{text-align:justify;text-justify:inter-ideograph}
/* ★回答ブロックで float を打ち切らない（2026-08-25・ユーザー指示）
打ち切ると、本文がイラストより短いときブロックがイラストの高さまで伸びて
下に白い空きが残る。打ち切るのは記事全体の末尾だけ（.iv2cont の flow-root）。 */
.iv2 .iv2qa > .iv2ill--wide{float:none;width:100%;max-width:620px;margin:16px auto 20px}
/* ★文字の回り込みをやめて「画像／文章の2カラム」に見せる（2026-08-25・ユーザー指示・お試し）
本文の段落に独立した書式コンテキスト（flow-root）を持たせると、段落の箱が
float と重ならないように自動で細くなり、イラストの下へ潜り込まなくなる。
＝イラストが効いている間は、質問やセクションをまたいでも文章が同じ列に揃う。
イラスト自身は float のままなので、またがる範囲は今までどおり。
見出し（.iv2h＝grid／.iv2q＝flex）は元から float を避ける性質があり指定不要。
▲元の回り込みに戻すときは、このブロックを削除するだけでよい。 */
.iv2 .iv2a > p,
.iv2 .iv2a > .iv2tl{display:flow-root}
/* 質問ブロックが途中で列をまたがないようにする。
イラストの下端をまたぐ質問だと「見出しはイラストの横／本文はイラストの下」と
列が割れて見えていた。イラストを含まない質問ブロックごと書式コンテキストにすると、
ブロック単位で横に並ぶ（入りきらなければブロックごと下へ回る）ので列が揃う。
イラストを含むブロック（.iv2qa--ill）は対象外。ここを囲うとイラストが
その質問の中だけで終わってしまい、質問をまたげなくなるため。 */
.iv2 .iv2qa:not(.iv2qa--ill){display:flow-root}
@media(max-width:640px){
/* SPはイラストが回り込まない（本文の上に置く）ので、この指定は不要 */
.iv2 .iv2a > p,
.iv2 .iv2a > .iv2tl,
.iv2 .iv2qa:not(.iv2qa--ill){display:block}
}
@media(max-width:900px){
.iv2 .iv2qa > .iv2ill{width:220px}
.iv2 .iv2qa > .iv2ill--right{margin-left:22px}
.iv2 .iv2qa > .iv2ill--left{margin-right:22px}
}
@media(max-width:640px){
/* 狭い画面では回り込みをやめて、イラストを対応する質問・本文の下に置く（2026-08-26・ユーザー指示）
以前は本文の上に置いていたが、項目の下に表示するよう変更。
.iv2qa--ill を縦並びのflexにして、質問(.iv2q)→回答(.iv2a)→イラストの順にorderで並べ替える。 */
.iv2 .iv2qa--ill{display:flex;flex-direction:column}
.iv2 .iv2qa--ill > .iv2q{order:1}
.iv2 .iv2qa--ill > .iv2a{order:2}
.iv2 .iv2qa--ill > .iv2ill{order:3;float:none;width:100%;max-width:320px;margin:14px auto 0}
.iv2 .iv2qa > .iv2ill--wide{max-width:none}
}
/* 「職場の雰囲気・社風」の車内イラストだけ少し大きく（ユーザー指示・2026-08-25） */
.iv2 .iv2qa > .iv2ill--big{width:380px}
@media(max-width:900px){.iv2 .iv2qa > .iv2ill--big{width:260px}}
@media(max-width:640px){.iv2 .iv2qa > .iv2ill--big{max-width:360px;margin-top:14px;margin-bottom:0}}
/* イラストが無いページ（H.I 以外）は見出しを1カラムに戻す */
.iv2 .iv2h--noill{grid-template-columns:1fr}
/* SP：「この社員が関わる仕事」「他の先輩社員の声」が画面幅いっぱいで
左右に余白が無かったので、本文と同じ24pxを入れる 2026-08-26（ユーザー指示）。
.relx は padding:52px 0 8px、.others .wide は padding:0 が効いていたのが原因。
PC（901px以上）は従来どおりなので見た目は変わらない。
※ .interview .relx{padding:52px 0 8px} がファイル後方にあるため、
打ち消せるようこのブロックは必ずファイル末尾に置くこと。 */
@media(max-width:900px){
.interview .relx{padding-left:24px;padding-right:24px}
.interview .others .wide{padding-left:24px;padding-right:24px}
/* 名前を区切り線の下に置くための打ち消し（2026-08-26・ユーザー指示）。
線は .iv2nm2 側へ移してあるので、こちらの border-top は外す。
※ .iv2 .iv2hprof{…border-top…} がファイル後方にあるため、ここに置かないと効かない。 */
.iv2 .iv2hprof{border-top:0;padding-top:0;margin:10px 0 12px}
}
/* ===== タブレット幅（641〜900px）のヒーロー：見出しと写真を2カラムに 2026-08-30 =====
経緯：641〜900pxでは縦積み（SPと同じ）になっていたが、
写真の枠は「横幅100%・高さ230px固定・background-size:contain」なので、
縦長の切り抜き写真は高さ230pxで頭打ちになり、横は214pxしか使わない。
820pxでは枠664pxに対して写真214px＝左右に225pxずつ空きができ、スカスカに見えていた。
→ タブレットだけ「左：見出し・名前・プロフィール／右：写真」の2カラムにして空きを埋める。
PC（901px〜）とSP（〜640px）のレイアウトはこの指定の範囲外なので一切変わらない。
※右カラムは auto なので、写真が無い人（Y.W・R.M＝.iv2hero-ph が display:none）のときは
幅0になり、自動的に1カラムと同じ見た目になる。 */
@media (min-width:641px) and (max-width:900px){
.iv2 .iv2hero{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"lab ph"
"ttl ph"
"nm ph"
"prof ph"
"tags tags";
column-gap:32px;
align-content:start;
}
.iv2 .iv2hero-ph{
width:clamp(190px,26vw,250px);
height:auto;
min-height:300px;
margin:0;
background-position:center bottom;
}
.iv2 .iv2tags{margin-top:18px}
}
/* ===== 2026-09-06 Mさん指示の3点（追記は末尾・スコープ付き。ハマりどころ1） ===== */
/* ① 写真の下端に出ていた薄い線を消す（K.Hさんで「枠」に見えていたもの）。
原因は .iv2ph の border-bottom:1px solid rgba(255,255,255,.14)。
background-origin の既定が padding-box なので、cover の背景画像が border の1px を覆わず、
そこに background-color(#eef7f0) が出て「枠」に見えていた。
★H.I・K.H・A.S の3人とも同じ状態だった（K.Hは服が濃色なので一番目立っていただけ）。
下は緑の名前ボックスが続くので、この区切り線は無くてよい。 */
@media(min-width:901px){
.iv2 .iv2ph--hi,.iv2 .iv2ph--kh,.iv2 .iv2ph--as{border-bottom:0}
}
/* ② 写真が無い人（Y.W・R.M）の枠に出ていた「写真」の文字を出さない */
.iv2 .iv2ph span{display:none}
/* ③ 画面幅が狭くなってタグ（.iv2tags）が2行に折り返すと、ヒーローの下の余白が消えていた。
原因は .iv2hero が height 固定（var(--ivph)）＋ overflow:hidden で、
中身が増えると justify-content:center のまま上下がはみ出して切られるため。
高さを min-height にして伸びられるようにし、上下に余白を持たせる。
★PC幅だけに効かせる（タブレット・SPは別レイアウトなので触らない）。 */
@media(min-width:901px){
.iv2 .iv2hero{height:auto;min-height:var(--ivph);padding-top:32px;padding-bottom:32px}
}