@charset "UTF-8";
/* =========================================================
   社員インタビュー（詳細）… 01_in/KSL_社員インタビュー_*.html（10/8 支給のモック）の見た目
   - モックの CSS を main.iv の中だけに効くようにして取り込み（ヘッダー・フッター・パンくずはサイト共通）
   - PC は 1120px 固定のため、モックの中間幅（1100px・850px 以下）の指定は使わない。SP（767px 以下）はモックどおり
   - アクセント色は全員共通（モックの平野さんだけの赤への上書きは使わない）
   - 写真の切り抜き位置は HTML の data-pos を js/main.js が --pos に入れる（インライン CSS を書かないため）
   ========================================================= */
.iv{font-weight:400;line-height:1.8;--text:#333333;--sub:#666666;--line:#cccccc;--gray:#f1f1f1;--paper:#ffffff;--accent-bg:#FA7479;--message-bg:#FA7479;--cyan:#08ccf9;--coral:#fa5951;--blue:#0095ba;--canvas:1120px;--reading:760px;--font:'KSL Latin','KSL JP','Noto Sans JP','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif;--en:'KSL Latin','Helvetica Now Text','Helvetica Neue',Arial,sans-serif;--cut:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 20px) 100%,0 100%);--cut-sm:polygon(0 0,100% 0,100% calc(100% - 17px),calc(100% - 10px) 100%,0 100%);--section:104px;--gap:64px}
.iv img{width:100%;height:auto}
.iv .shell{width:min(var(--canvas),calc(100% - 96px));margin-inline:auto;position:relative}
.iv .article-width{max-width:1040px}
.iv .circle-arrow{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid currentColor;border-radius:50%;font-size:13px;line-height:1;font-family:var(--en);font-style:normal;transition:transform .2s}
.iv .text-link:hover .circle-arrow{transform:translateX(3px)}
.iv .eyebrow{font-family:var(--en);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.22em;display:flex;align-items:center;gap:12px}
.iv .eyebrow::before{content:'';width:22px;height:2px;background:var(--cyan);flex:none}
.iv .eyebrow.coral::before{background:var(--coral)}
.iv .hero{padding-top:38px;padding-bottom:80px;overflow:hidden}
.iv .hero-watermark{position:absolute;right:0;top:1px;font:700 100px/1 var(--en);color:var(--gray);letter-spacing:.025em;pointer-events:none;z-index:0}
.iv .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-top:44px}
.iv .hero-figure{position:relative;padding:0 0 24px 0}
.iv .hero-figure::after{content:'';position:absolute;inset:64px -18px 0 30px;background:var(--gray);z-index:-1}
.iv .hero-photo{height:auto;aspect-ratio:1/1.02;object-fit:cover;object-position:var(--pos,50%);clip-path:var(--cut)}
.iv .photo-meta{font-family:var(--en);font-size:10px;letter-spacing:.16em;position:absolute;right:0;bottom:2px;color:var(--sub)}
.iv .hero-copy{padding-top:34px}
.iv .headline{font-size:clamp(28px,2.55vw,36px);font-weight:700;line-height:1.62;letter-spacing:.01em;margin-top:29px;overflow-wrap:break-word}
.iv .headline .line{display:block}
.iv .identity{margin-top:36px;padding-top:27px;border-top:1px solid var(--line)}
.iv .identity .department{font-size:13px;line-height:1.85;color:var(--sub)}
.iv .identity .role{font-size:12px;color:var(--sub);margin-top:5px}
.iv .person-name{font-size:27px;font-weight:500;line-height:1.55;letter-spacing:.12em;margin-top:12px}
.iv .person-name small{font-size:13px;letter-spacing:0;margin-left:7px;color:var(--sub)}
.iv .profile-intro{max-width:1040px;display:grid;grid-template-columns:172px minmax(0,1fr);gap:64px;margin:72px auto 0}
.iv .profile-intro .eyebrow{font-size:10px;padding-top:7px}
.iv .profile-lead{font-size:15px;line-height:2.15;max-width:var(--reading);font-weight:400;overflow-wrap:anywhere}
.iv .section-block{padding:var(--section) 0}
.iv .section-accent{background:var(--accent-bg)}
.iv .interview-layout{display:grid;grid-template-columns:172px minmax(0,1fr);gap:64px}
.iv .section-rail .eyebrow{font-size:11px}
.iv .section-rail h2{font-size:21px;line-height:1.8;font-weight:500;margin-top:19px;letter-spacing:.035em}
.iv .rail-range{margin-top:22px;font-family:var(--en);font-size:32px;font-weight:700;color:var(--sub);letter-spacing:.035em;line-height:1.2}
.iv .qa-content{max-width:var(--reading);min-width:0}
.iv .qa{scroll-margin-top:35px}
.iv .qa+.qa{margin-top:56px;padding-top:52px;border-top:1px solid var(--line)}
.iv .qa-heading{display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start}
.iv .q-number{background:var(--cyan);font-family:var(--en);font-weight:700;font-size:11px;line-height:26px;height:26px;text-align:center;letter-spacing:.03em;margin-top:5px;clip-path:var(--cut-sm)}
.iv .qa h3{font-size:21px;font-weight:700;line-height:1.75;letter-spacing:.025em;overflow-wrap:break-word}
.iv .answer{padding-left:52px;margin-top:21px;font-size:15px;line-height:2.18;font-weight:400;color:var(--text);line-break:strict;overflow-wrap:anywhere}
.iv .answer p+p{margin-top:19px}
.iv .photo-band{padding-block:80px 0}
.iv .photo-band figure{margin:0}
.iv .photo-band img{width:100%;aspect-ratio:2.18/1;object-fit:cover;object-position:center 44%;clip-path:var(--cut)}
.iv .photo-band figcaption{margin-top:15px;text-align:right;font:10px/1.6 var(--en);letter-spacing:.18em;color:var(--sub)}
.iv .photo-inset{margin:0 auto;padding:0 0 8px}
.iv .photo-inset .photo-pair{display:grid;grid-template-columns:1.12fr 1fr;gap:24px;align-items:end}
.iv .photo-inset img{aspect-ratio:4/3;object-fit:cover;clip-path:var(--cut)}
.iv .photo-inset .photo-pair figure:last-child img{aspect-ratio:4/3.6}
.iv .photo-inset.single{max-width:760px}
.iv .photo-inset.single img{aspect-ratio:1.8/1;object-position:center 43%}
.iv .photo-inset figcaption{margin-top:12px;font:10px/1.8 var(--en);color:var(--sub);letter-spacing:.12em}
.iv .continued{padding-top:80px}
.iv .message{background:var(--message-bg);padding:88px 0 96px;position:relative;overflow:hidden}
.iv .message .interview-layout{position:relative;z-index:1}
.iv .message .section-rail h2{font-size:30px;line-height:1.65;font-weight:700;letter-spacing:.02em;margin-top:22px}
.iv .message .qa-heading{grid-template-columns:1fr}
.iv .message .qa h3{font-size:22px}
.iv .message .answer{padding-left:0;margin-top:25px;font-size:16px;line-height:2.15}
.iv .message-graphic{position:absolute;right:0;bottom:-5px;font:700 116px/1 var(--en);color:var(--text);opacity:.045;white-space:nowrap;pointer-events:none}
.iv .related{background:var(--gray);padding:82px 0 88px}
.iv .related .heading-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
.iv .related h2{font-size:30px;font-weight:700;line-height:1.6;letter-spacing:.015em;margin-top:15px}
.iv .text-link{font-size:12px;display:inline-flex;align-items:center;gap:15px;line-height:1.7}
.iv .related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.iv .person-card{display:block;min-width:0}
.iv .card-photo{aspect-ratio:4/3.15;object-fit:cover;object-position:var(--pos,center);clip-path:var(--cut-sm);transition:opacity .2s}
.iv .person-card:hover .card-photo{opacity:.86}
.iv .card-body{padding:20px 0 0}
.iv .card-num{font:700 10px/1.4 var(--en);letter-spacing:.14em;color:var(--sub)}
.iv .card-name{font-size:19px;font-weight:500;letter-spacing:.07em;margin-top:9px;display:flex;align-items:center;justify-content:space-between}
.iv .card-name .circle-arrow{width:22px;height:22px;font-size:11px}
.iv .card-dept{font-size:11px;line-height:1.8;color:var(--sub);margin-top:11px}
.iv .card-title{font-size:14px;line-height:1.9;font-weight:700;margin-top:16px}
.iv .list-back{text-align:center;margin-top:43px}
.iv .button-cut{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;padding:20px 24px;font-size:13px;line-height:1.6;background:var(--paper);border:0;clip-path:var(--cut-sm);font-weight:500;min-width:260px}
.iv .button-cut:hover{background:var(--accent-bg)}
@media(max-width:767px){
  .iv{--section:58px}
  .iv .shell{width:calc(100% - 40px)}
  .iv .hero{padding-top:15px;padding-bottom:48px}
  .iv .hero-watermark{font-size:51px;top:5px}
  .iv .hero-grid{display:flex;flex-direction:column;gap:0;padding-top:39px;align-items:stretch}
  .iv .hero-figure{margin-right:9px;padding-bottom:21px}
  .iv .hero-figure::after{inset:40px -9px 0 17px}
  .iv .hero-photo{aspect-ratio:4/3.8;object-position:var(--pos)}
  .iv .photo-meta{font-size:9px;bottom:0}
  .iv .hero-copy{padding-top:30px}
  .iv .eyebrow{font-size:11px}
  .iv .headline{font-size:26px;line-height:1.65;margin-top:20px;letter-spacing:0}
  .iv .identity{margin-top:24px;padding-top:21px}
  .iv .identity .department{font-size:12px;line-height:1.9}
  .iv .person-name{font-size:25px;margin-top:12px}
  .iv .identity .role{font-size:11px}
  .iv .profile-intro{display:block;margin-top:35px}
  .iv .profile-intro .eyebrow{margin-bottom:16px;font-size:10px}
  .iv .profile-lead{font-size:14px;line-height:2}
  .iv .interview-layout{display:block}
  .iv .section-rail{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 15px;padding-bottom:28px;margin-bottom:27px;border-bottom:1px solid var(--line)}
  .iv .section-rail .eyebrow{font-size:10px}
  .iv .section-rail h2{font-size:15px;line-height:1.6;margin-top:0;font-weight:500}
  .iv .section-rail h2 br{display:none}
  .iv .rail-range{font-size:18px;margin:0;display:none}
  .iv .qa-heading{grid-template-columns:32px minmax(0,1fr);gap:12px}
  .iv .q-number{font-size:10px;line-height:24px;height:24px;margin-top:3px}
  .iv .qa h3{font-size:18px;line-height:1.75;letter-spacing:.01em}
  .iv .answer{padding-left:0;margin-top:21px;font-size:14px;line-height:2.05;letter-spacing:.005em}
  .iv .answer p+p{margin-top:17px}
  .iv .qa+.qa{margin-top:35px;padding-top:34px}
  .iv .photo-band{padding-block:43px 0}
  .iv .photo-band img{aspect-ratio:4/3;object-position:50% 45%}
  .iv .photo-band figcaption{font-size:9px;margin-top:12px}
  .iv .photo-inset .photo-pair{gap:12px;grid-template-columns:1fr 1fr;align-items:start}
  .iv .photo-inset .photo-pair figure img,.iv .photo-inset .photo-pair figure:last-child img{aspect-ratio:3/3.5}
  .iv .photo-inset.single img{aspect-ratio:4/3}
  .iv .photo-inset figcaption{font-size:8px;letter-spacing:.04em}
  .iv .continued{padding-top:52px}
  .iv .message{padding:54px 0 61px}
  .iv .message .section-rail{display:block}
  .iv .message .section-rail h2{font-size:27px;margin-top:14px;line-height:1.5}
  .iv .message .section-rail h2 br{display:none}
  .iv .message .qa h3{font-size:18px;line-height:1.75}
  .iv .message .answer{font-size:14px;line-height:2.05;margin-top:22px}
  .iv .message-graphic{font-size:65px;bottom:5px;right:-45px}
  .iv .related{padding:49px 0 52px}
  .iv .related .heading-row{display:block;margin-bottom:27px}
  .iv .related h2{font-size:26px;margin-top:13px}
  .iv .related .heading-row .text-link{margin-top:18px}
  .iv .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:31px 16px}
  .iv .card-body{padding-top:15px}
  .iv .card-photo{aspect-ratio:3/3.2}
  .iv .card-name{font-size:16px;line-height:1.5;letter-spacing:.02em;gap:5px}
  .iv .card-name .circle-arrow{width:18px;height:18px;font-size:10px}
  .iv .card-num{font-size:8px}
  .iv .card-dept{font-size:10px;line-height:1.8;margin-top:10px}
  .iv .card-title{font-size:12px;line-height:1.9;margin-top:11px}
  .iv .list-back{margin-top:34px}
  .iv .button-cut{min-width:0;width:100%;font-size:12px;padding:18px 23px}
}
@media(max-width:359px){
  .iv .headline{font-size:23px}
  .iv .shell{width:calc(100% - 32px)}
  .iv .qa h3{font-size:17px}
  .iv .hero-grid{padding-top:30px}
  .iv .card-name{font-size:15px}
}

/* 1日のスケジュール（任意） */
.iv .daily-schedule{background:var(--gray)}
.iv .daily-schedule .schedule-list{position:relative;margin:0;padding:0;list-style:none}
.iv .daily-schedule .schedule-list:before{content:'';position:absolute;left:89px;top:30px;bottom:30px;width:2px;background:#FA7479}
.iv .daily-schedule .schedule-row{position:relative;display:grid;grid-template-columns:64px 1fr;gap:52px;align-items:start;padding:21px 0;border-bottom:1px solid var(--line)}
.iv .daily-schedule .schedule-row:last-child{border-bottom:0}
.iv .daily-schedule .schedule-row:before{content:'';position:absolute;left:84px;top:28px;width:12px;height:12px;border:3px solid #FA7479;border-radius:50%;background:white}
.iv .daily-schedule time{font-family:var(--en);font-size:20px;font-weight:700;line-height:1.6;font-variant-numeric:tabular-nums}
.iv .daily-schedule .schedule-task{font-size:16px;line-height:2;overflow-wrap:anywhere}
@media(max-width:767px){
  .iv .daily-schedule .section-rail{display:block}
  .iv .daily-schedule .section-rail h2{font-size:23px;margin-top:14px}
  .iv .daily-schedule .schedule-row{grid-template-columns:53px minmax(0,1fr);gap:34px;padding:18px 0}
  .iv .daily-schedule .schedule-list:before{left:69px;top:27px;bottom:27px}
  .iv .daily-schedule .schedule-row:before{left:64px;top:24px}
  .iv .daily-schedule time{font-size:17px}
  .iv .daily-schedule .schedule-task{font-size:14px;line-height:1.95}
}
.iv .photo-band img{object-position:var(--pos,center 44%)}
.iv .nw{display:inline-block}

/* 見出しのないブロック（Q03〜Q06。「インタビューの続き」は 10/9 に削除）：SP でも番号を右に出す */
@media (max-width:767px){
  .iv .section-rail.no-title .rail-range{display:block}
}