@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
/* =====================================================================
   /GCDF/interview/interview.css
   インタビュー記事(.iv)・一覧(.iv-list) 専用スタイル。
   サイト共通CSSと衝突しないよう、全セレクタを .iv / .iv-list 配下に限定。
   ---------------------------------------------------------------------
   MTへの登録:
     インデックステンプレートとして新規作成
     テンプレート名   : interview.css
     出力ファイル名   : interview/interview.css
                        （親サイトGCDF-JapanのサイトURL …/GCDF/ からの相対。
                          GCDF/ は付けない）
     → 公開URL       : https://www.career-npo.org/GCDF/interview/interview.css
     本文             : このファイルの中身を全文貼り付け
   共通ヘッダの </head> 直前に次の1行を追加:
     link rel="stylesheet" href="/GCDF/interview/interview.css"
   ---------------------------------------------------------------------
   注意: このファイルにはMTタグを一切書かないこと。
         MTはCSSのコメントも解釈せずタグを実行しようとするため、
         コメント内であってもMTタグを書くと再構築エラーになる。
         記事本文のHTMLは変換ツール(converter.html)が出力する。
         一覧のマークアップは mt_template_list.html を参照。
   ===================================================================== */
.iv, .iv-list{
 --teal:#009999;      /* チップ・罫線・ボタン地 */
 --teal-text:#00706F; /* 白地の文字 5.9:1 */
 --teal-deep:#005757; /* 見出し 8.4:1 */
 --teal-tint:#EAF6F6; /* 面 */
 --teal-line:#B8DEDE; /* 境界・区切り */
 --marker:#FBE58F;    /* 蛍光ペン帯（核となる1〜2文） */
 --ink:#22292b; --sub:#535f5f; --faint:#8a9494;
 --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
 --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
 font-family:var(--sans);color:var(--ink);line-break:strict;
 -webkit-font-smoothing:antialiased;
}
.iv *, .iv *::before, .iv *::after,
.iv-list *, .iv-list *::before, .iv-list *::after{box-sizing:border-box}
.iv img, .iv-list img{max-width:100%;height:auto;display:block;border:0}
.iv figure, .iv-list figure{margin:0}
.iv a:focus-visible, .iv-list a:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
.iv ::selection, .iv-list ::selection{background:var(--teal-line)}


/* ================= ページ枠まわり =================
   サイト標準の帯（page_tit_box）はそのまま使い、一切上書きしない。
   ここで足すのはパンくずと、一覧の切替タブだけ。
   このCSSはインタビューのページでのみ読み込まれるため、
   .iv 外のセレクタでも他ページには影響しない。 */
.iv-bread{position:relative;z-index:5;max-width:880px;margin:18px auto -34px;padding:0 24px;font-size:11.5px;color:#8a9494;
 letter-spacing:.03em;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
.iv-bread a{position:relative;z-index:5;display:inline-block;color:#00706F;text-decoration:none}
.iv-bread a:hover{border-bottom:1px solid #B8DEDE}
.iv-bread span{margin:0 8px;color:#c2cccc}
.iv-bread em{font-style:normal;color:#535f5f}

/* ================= 記事（舞台880px／本文組み720px） ================= */
.iv{max-width:880px;margin:0 auto;padding:56px 24px 96px;position:relative}
.iv .iv-lead,.iv .iv-q,.iv .iv-a,.iv h2,.iv .iv-bio,.iv .iv-credits,.iv .iv-cta,.iv .iv-back{
 max-width:720px;margin-left:auto;margin-right:auto}

.iv .iv-prog{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--teal);
 transform:scaleX(0);transform-origin:0 50%;z-index:100}

.iv .iv-chiprow{margin:0}
.iv-chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.34em;text-indent:.34em;
 padding:8px 18px 8px;border-radius:2px;font-family:var(--sans)}
.iv-chip.t{background:var(--teal);color:#fff}
.iv-chip.o{background:#fff;color:var(--teal-text);border:1px solid var(--teal)}

.iv .iv-who{margin:40px 0 0;font-family:var(--mincho);font-weight:600;
 font-size:clamp(28px,5vw,38px);letter-spacing:.14em;line-height:1.3;color:#182322;font-feature-settings:"palt"}
.iv .iv-who rt{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.5em;
 color:var(--teal-text);padding-bottom:8px}
.iv .iv-aff{margin:14px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.22em;color:var(--sub)}
.iv .iv-aff::before{content:"";display:inline-block;width:26px;height:1px;background:var(--teal);
 vertical-align:middle;margin-right:14px}

/* サイト既存CSSの見出し装飾（緑の棒・下線・背景など）を遮断 */
.iv h1,.iv h2,.iv-list .head h1,.iv-list .head .iv-catch{
 background:none!important;border:0!important;padding:0!important}
.iv h1::before,.iv h1::after,.iv h2::before,.iv h2::after,
.iv-list .head h1::before,.iv-list .head h1::after,
.iv-list .head .iv-catch::before,.iv-list .head .iv-catch::after{
 content:none!important;background:none!important}

.iv h1{margin:48px 0 0;font-family:var(--mincho);font-weight:600;font-size:clamp(40px,9vw,76px);
 line-height:1.32;letter-spacing:-.01em;color:#141f1e;font-feature-settings:"palt";
 word-break:auto-phrase;line-break:strict;overflow-wrap:normal;text-wrap:pretty}
/* 長い表題は自動で一段小さく（1行あたりの文字数を増やして不自然な改行を防ぐ） */
.iv h1.t-long{font-size:clamp(34px,7.4vw,60px);line-height:1.38}
.iv h1.t-xlong{font-size:clamp(30px,6.1vw,48px);line-height:1.44}
.iv h1 .brk{color:var(--teal);font-weight:500}
/* 『…』などのまとまりは、行末で分断せず丸ごと次行へ送る
   （1行に収まらない長さの場合のみ、内部で改行される） */
.iv h1 .nb,.iv .iv-tsub .nb,.iv-list .c-title .nb{display:inline-block}
.iv .iv-tsub{margin:26px 0 0;font-family:var(--mincho);font-weight:600;
 font-size:clamp(15px,2.9vw,21px);line-height:1.9;letter-spacing:.16em;color:var(--teal-deep);word-break:auto-phrase}

.iv .iv-ph{margin:64px auto}
.iv .iv-ph img{border-radius:6px;width:100%}
.iv .iv-ph.hero{margin:56px auto 0}

.iv .iv-lead{margin-top:56px;margin-bottom:0;font-size:16px;line-height:2.15;letter-spacing:.02em;text-align:justify}
.iv .iv-lead + .iv-lead{margin-top:1.55em}

.iv h2{margin-top:124px;margin-bottom:0;font-family:var(--mincho);font-weight:600;
 font-size:clamp(25px,4.9vw,36px);line-height:1.72;letter-spacing:.03em;color:#141f1e;
 font-feature-settings:"palt";word-break:auto-phrase}

.iv .iv-q{display:grid;grid-template-columns:34px 1fr;gap:16px;margin-top:60px;margin-bottom:28px;
 border-bottom:1px solid var(--teal-line);padding-bottom:18px}
.iv .iv-q::before{content:"";width:34px;height:2px;background:var(--teal);margin-top:16px}
.iv .iv-q p{margin:0;font-weight:600;font-size:16px;line-height:2.15;letter-spacing:.02em;color:var(--teal-deep)}

.iv .iv-a{margin-bottom:48px}
.iv .iv-a p{margin:0 0 1.55em;font-size:16px;line-height:2.15;letter-spacing:.02em;text-align:justify}
.iv .iv-a p:last-child{margin-bottom:0}
.iv .iv-a strong{font-weight:600;
 background:linear-gradient(transparent 52%,var(--marker) 52%,var(--marker) 96%,transparent 96%);
 padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.iv .iv-bio{margin-top:110px;border-top:1px solid var(--teal-line);padding-top:40px;display:flow-root}
.iv .iv-bio-hl{margin:0 0 18px;font-family:var(--mincho);font-size:13px;letter-spacing:.5em;color:var(--teal-deep)}
.iv .iv-bio-h{margin:0;font-size:14px;font-weight:700;letter-spacing:.06em}
.iv .iv-bio-t{margin:14px 0 0;font-size:13px;line-height:2.1;color:var(--sub);text-align:justify}
.iv .iv-bio-ch{margin:30px 0 12px;font-family:var(--mincho);font-size:13px;font-weight:600;letter-spacing:.4em;color:var(--teal-deep)}
.iv .iv-crow{display:flex;gap:20px;font-size:12.5px;line-height:2.05;margin:6px 0}
.iv .iv-cy{flex:none;width:66px;font-family:var(--mincho);font-weight:600;letter-spacing:.06em;color:var(--teal-deep)}
.iv .iv-ct{color:var(--sub)}
.iv .iv-credits{margin-top:34px;font-size:11.5px;color:var(--faint);line-height:2.1}
.iv .iv-credits p{margin:2px 0}
.iv .iv-credits b{font-weight:700;color:#6d7a7a}

/* CTA: サイト標準の赤系ピル(hoverで一度だけぷるぷる)に準拠 */
.iv .iv-cta,.iv-list .iv-cta{margin-top:72px;border-top:1px solid var(--teal-line);border-bottom:1px solid var(--teal-line);
 text-align:center;padding:44px 20px}
.iv-cta .iv-cta-h{margin:0;font-size:15px;font-weight:800;letter-spacing:.06em;color:#182322}
.iv-cta .iv-cta-b{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 36px;margin-top:8px}
.iv-cta .iv-cta-b p{margin:16px 0 0;font-size:13px;font-weight:700;color:#444;line-height:1.9}
.iv-cta a.btn{display:inline-block;padding:.9em 1.4em;margin-top:.35em;border-radius:999px;
 background:linear-gradient(180deg,#ff5c5c 0%,#e60000 100%);color:#fff;font-weight:800;text-decoration:none;
 box-shadow:0 4px 8px rgba(0,0,0,.15);line-height:1;transform-origin:center center;
 transition:filter .2s,box-shadow .2s}
.iv-cta a.btn:hover{filter:brightness(1.1);box-shadow:0 8px 14px rgba(0,0,0,.18);
 animation:ivJellyOnce .8s cubic-bezier(.2,.8,.2,1) 1}
@keyframes ivJellyOnce{0%{transform:scale(1,1) rotate(0)}10%{transform:scale(1.2,.85) rotate(-1deg)}
 20%{transform:scale(.88,1.2) rotate(1deg)}30%{transform:scale(1.1,.9) rotate(-.6deg)}
 40%{transform:scale(.92,1.12) rotate(.6deg)}50%{transform:scale(1.05,.96) rotate(-.3deg)}
 60%{transform:scale(.97,1.04) rotate(.3deg)}80%{transform:scale(1.02,.98)}100%{transform:scale(1,1) rotate(0)}}
.iv .iv-back{text-align:center;margin-top:40px;margin-bottom:0;display:flex;gap:32px;
 justify-content:center;flex-wrap:wrap}
.iv .iv-back a{color:var(--teal-text);font-size:13px;letter-spacing:.1em;font-weight:600;
 text-decoration:none;border-bottom:1px solid var(--teal-line);padding-bottom:3px}
.iv .iv-back a:hover{border-bottom-color:var(--teal)}

/* ---------- 演出（JS無効時は全表示のまま） ---------- */
@keyframes iv-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes iv-riseblur{from{opacity:0;transform:translateY(26px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes iv-track{from{opacity:0;letter-spacing:.4em}to{opacity:1;letter-spacing:.16em}}
@keyframes iv-settle{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
.iv .in0,.iv .in1,.iv .in4{animation:iv-rise .9s cubic-bezier(.22,.6,.2,1) both}
.iv .in1{animation-delay:.14s}
.iv h1.in2{animation:iv-riseblur 1.15s cubic-bezier(.22,.6,.2,1) both;animation-delay:.3s}
.iv .iv-tsub.in3{animation:iv-track 1.2s cubic-bezier(.22,.6,.2,1) both;animation-delay:.62s}
.iv .iv-ph.hero.in4{animation-delay:.85s;overflow:hidden;border-radius:6px}
.iv .iv-ph.hero img{animation:iv-settle 1.7s cubic-bezier(.2,.55,.2,1) both;animation-delay:.85s}
.iv.js .rv{opacity:0;transform:translateY(18px);
 transition:opacity .8s cubic-bezier(.22,.6,.2,1),transform .8s cubic-bezier(.22,.6,.2,1)}
.iv.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .iv.js .rv{opacity:1;transform:none;transition:none}
 .iv .in0,.iv .in1,.iv h1.in2,.iv .iv-tsub.in3,.iv .in4,.iv .iv-ph.hero img{animation:none}
 .iv .iv-prog{display:none}
}
@media print{.iv .iv-prog{display:none}.iv.js .rv{opacity:1;transform:none}}


/* ---------- v2追加: キャプション・注釈・略歴写真 ---------- */
.iv .iv-ph figcaption{margin-top:12px;font-size:11px;letter-spacing:.04em;color:var(--faint);line-height:1.9}
.iv .iv-a p.iv-note,.iv .iv-note{font-size:12px;color:var(--sub);line-height:1.95;background:none;
 border-left:2px solid var(--teal-line);padding:0 0 0 14px;margin:8px 0 0;text-align:left}
.iv .iv-a p.iv-note+p.iv-note{margin-top:2px}
/* 写真未挿入時のプレースホルダ（制作中プレビュー用） */
.iv .iv-ph-blank{aspect-ratio:3/2;border-radius:6px;display:grid;place-items:center;
 color:#8FAAAA;font-size:13px;letter-spacing:.3em;text-indent:.3em;
 background:repeating-linear-gradient(45deg,#F2F7F7,#F2F7F7 14px,#EAF2F2 14px,#EAF2F2 28px)}
.iv .iv-bio-note{margin:14px 0 0;font-size:11px;color:var(--faint);line-height:2}
.iv .iv-career{margin-top:8px;clear:left}
/* 紹介欄の顔写真: プロフィール見出し直下の小さな正方形（枠なし） */
.iv .iv-ph.bio{float:left;width:clamp(96px,18vw,128px);margin:2px 26px 16px 0}
.iv .iv-ph.bio img{aspect-ratio:1/1;object-fit:cover;border-radius:8px;width:100%}
.iv .iv-ph.bio figcaption{display:none}

/* ================= 一覧（カテゴリアーカイブ） ================= */
.iv-list{max-width:880px;margin:0 auto;padding:56px 24px 96px}
.iv-list .head .iv-catch{margin:0 0 26px;font-family:var(--mincho);font-weight:600;
 font-size:clamp(28px,5.6vw,46px);line-height:1.5;letter-spacing:.04em;color:#141f1e;
 font-feature-settings:"palt";word-break:auto-phrase}
.iv-list .head h1{margin:0;font-family:var(--mincho);font-weight:600;
 font-size:clamp(30px,5.6vw,44px);letter-spacing:.06em;line-height:1.5;color:#141f1e;font-feature-settings:"palt"}
.iv-list .head .lede{margin:22px 0 0;font-size:14.5px;line-height:2.05;color:var(--sub);max-width:680px;text-align:justify}
.iv-list .rule{height:1px;background:var(--teal-line);margin:52px 0 0}
.iv-list .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 44px;margin-top:56px}
.iv-list .card{display:block;text-decoration:none;color:inherit}
.iv-list .card figure{overflow:hidden;border-radius:6px;aspect-ratio:3/2;background:var(--teal-tint)}
.iv-list .card img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.55,.2,1)}
.iv-list .card:hover img{transform:scale(1.045)}
.iv-list .c-meta{display:flex;align-items:center;gap:14px;margin:20px 0 0}
.iv-list .c-meta .iv-chip{font-size:11px;letter-spacing:.3em;text-indent:.3em;padding:6px 14px 6px}
.iv-list .c-date{font-family:var(--mincho);font-size:12px;letter-spacing:.14em;color:var(--faint)}
.iv-list .c-name{margin:16px 0 0;font-family:var(--mincho);font-weight:600;font-size:19px;
 letter-spacing:.1em;color:#182322;font-feature-settings:"palt"}
.iv-list .c-name small{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--sub);margin-left:12px}
.iv-list .c-title{margin:10px 0 0;font-family:var(--mincho);font-weight:600;
 font-size:clamp(19px,2.6vw,22px);line-height:1.75;letter-spacing:.02em;color:#141f1e;
 font-feature-settings:"palt";transition:color .35s;word-break:auto-phrase}
.iv-list .c-title .brk{color:var(--teal);font-weight:500}
.iv-list .card:hover .c-title{color:var(--teal-deep)}
.iv-list .c-more{margin:14px 0 0;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--teal-text);
 opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.iv-list .card:hover .c-more{opacity:1;transform:none}
@media(max-width:680px){.iv-list .grid{grid-template-columns:1fr;gap:56px}.iv-list .c-more{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.iv-list .card img,.iv-list .c-title,.iv-list .c-more{transition:none}}