:root{--red:#e60012;--black:#111}.iv-page{color:#222}.iv-page main{overflow:hidden}.iv-page .logo .logo-title{display:flex;align-items:center}.iv-page .logo img{max-height:45px;width:auto}.iv-page .logo img:first-child{margin-right:-10px}.iv-container{width:min(1120px,calc(100% - 80px));margin:auto}.iv-label{font:900 12px Inter,sans-serif;color:var(--red);letter-spacing:.16em}.iv-hero{display:grid;grid-template-columns:43% 57%;min-height:640px;background:#f6f6f6;border-left:70px solid var(--red)}.iv-hero__copy{padding:100px 45px;display:flex;flex-direction:column;justify-content:center}.iv-hero h1{font-size:clamp(34px,3vw,56px);line-height:1.45;margin:25px 0 45px;font-weight:700}.iv-hero h1 span{color:var(--red)}.iv-hero>figure{height:640px;clip-path:polygon(7% 0,100% 0,100% 100%,0 100%)}.iv-hero>figure img{width:100%;height:100%;object-fit:cover}.iv-person{border-top:1px solid #ccc;padding-top:20px}.iv-person b{background:#111;color:#fff;border-radius:50px;padding:6px 14px;font-size:12px}.iv-person p{font-size:24px;font-weight:800;margin-top:15px}.iv-person small{font-size:12px;color:#777;margin-left:12px}.iv-breadcrumb{width:min(1120px,calc(100% - 80px));margin:24px auto;display:flex;gap:12px;justify-content:flex-end;font-size:11px;color:#888}.iv-breadcrumb a{color:#555}.iv-breadcrumb strong{font-weight:700}.iv-profile{margin-top:65px;padding:45px 55px;background:#f7f7f7;border-left:7px solid var(--red);display:grid;grid-template-columns:160px 1fr;gap:35px;box-shadow:0 15px 40px #0000000b}.iv-profile h2{font-size:min(26px,3.4vw);margin-bottom:15px}.iv-profile p,.iv-goal p,.iv-message p{line-height:2}.iv-profile small{display:block;color:#888;margin-top:12px}.iv-story{padding:120px 0 40px}.iv-qa{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:95px}.iv-qa--wide{display:block;width:76%;margin-left:auto;margin-right:auto}.iv-qa--reverse{grid-template-columns:.9fr 1.1fr}.iv-qa--reverse h2{font-size:28px;letter-spacing:-.02em}.iv-qa figure{height:410px;overflow:hidden;position:relative;border-radius:12px}.iv-qa figure:after{display:none}.iv-qa img{width:100%;height:100%;object-fit:cover}.iv-qa h2{font-size:30px;line-height:1.5;margin:14px 0 28px}.iv-qa h2:after{content:"";display:block;width:45px;height:3px;background:var(--red);margin-top:20px}.iv-qa div>p:not(.iv-label){font-size:15px;line-height:2.15;margin-top:15px}.iv-goal{position:relative;background:#f3f4f5;padding:78px 0 118px;overflow:hidden}.iv-goal:before{content:'NEXT';position:absolute;left:calc(50% - 575px);top:78px;font:900 88px/1 Inter,sans-serif;letter-spacing:-.055em;color:#dfe1e3;white-space:nowrap;font-style:italic}.iv-goal:after{content:'GOAL';position:absolute;left:calc(50% - 345px);top:78px;font:700 88px/1 Inter,sans-serif;letter-spacing:-.035em;color:var(--red);white-space:nowrap;font-style:italic}.iv-goal>.iv-container{position:relative;z-index:2;display:grid;grid-template-columns:48% 52%;gap:0;align-items:center;padding-top:72px}.iv-goal>.iv-container>div{position:relative;z-index:2;background:#fff;border-radius:10px;padding:44px 50px;margin-right:-70px;box-shadow:0 16px 42px #1111110d}.iv-goal .iv-label{display:none}.iv-goal h2,.iv-message h2{font-size:34px;line-height:1.5;margin:15px 0 25px}.iv-goal h2{font-size:36px;letter-spacing:.015em}.iv-goal figure{height:420px;border-radius:12px;overflow:hidden;box-shadow:0 20px 48px #11111114}.iv-goal img{width:100%;height:100%;object-fit:cover;object-position:44% center}.iv-message{width:min(1120px,calc(100% - 80px));margin:120px auto;display:grid;grid-template-columns:48% 52%;background:#111;color:#fff;border-radius:12px;overflow:hidden}.iv-message figure{min-height:450px}.iv-message img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.7}.iv-message>div{padding:70px}.iv-message h2{color:#fff}.iv-entry{text-align:center;background:#111;color:#fff;padding:100px 20px}.iv-entry h2{font-size:40px;color:#fff;line-height:1.45;margin:20px}.iv-entry a{display:inline-block;background:var(--red);color:#fff;text-decoration:none;border-radius:50px;padding:17px 30px;margin-top:35px;font-weight:800}.iv-page .footer-logo-box{background:#fff;padding:10px 20px;border-radius:8px;display:inline-block;margin-bottom:20px}.iv-page .footer-logo-box img{max-height:40px;width:auto}.iv-page .footer-btns{display:flex;flex-direction:column;gap:8px}
@media(max-width:900px){.iv-hero{grid-template-columns:1fr;border-left-width:12px;min-height:0}.iv-hero>figure{height:430px;clip-path:none}.iv-container,.iv-breadcrumb,.iv-message{width:min(100% - 40px,1120px)}.iv-profile,.iv-goal>.iv-container{padding:45px 25px}.iv-goal>.iv-container{grid-template-columns:1fr;gap:35px;padding-top:60px}.iv-goal>.iv-container>div{margin-right:0;padding:40px}.iv-goal figure{height:380px;box-shadow:0 16px 40px #0000001a}.iv-goal:before{left:20px;top:58px;font-size:58px}.iv-goal:after{left:170px;top:58px;font-size:58px}.iv-qa{gap:30px}.iv-qa--wide{width:100%}.iv-message{grid-template-columns:1fr}.iv-message>div{padding:45px 30px}}@media(max-width:640px){.iv-qa{grid-template-columns:1fr}.iv-qa--reverse figure{order:2}.iv-profile{grid-template-columns:1fr;padding:30px}}@media(max-width:900px){}@media(max-width:640px){}@media(max-width:900px){}.iv-related{padding:90px 0 105px}.iv-related__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:38px}.iv-related__head h2{font-size:34px;margin-top:12px}.iv-related__head>a{color:#111;text-decoration:none;border:1px solid #bbb;border-radius:50px;padding:12px 22px;font-size:13px;font-weight:700;transition:.25s}.iv-related__head>a:hover{border-color:var(--red);color:var(--red)}.iv-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.iv-related__card{display:block;color:#111;text-decoration:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;box-shadow:0 12px 32px #1111110a;transition:transform .25s,box-shadow .25s}.iv-related__card:hover{transform:translateY(-5px);box-shadow:0 18px 40px #11111116}.iv-related__card>img{display:block;width:100%;height:210px;object-fit:cover}.iv-related__card>div{position:relative;padding:20px 66px 22px 20px}.iv-related__card small{display:inline-block;background:#111;color:#fff;border-radius:50px;padding:4px 10px;font-size:10px}.iv-related__card h3{font-size:22px;margin-top:11px}.iv-related__card i{position:absolute;right:18px;top:50%;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;transform:translateY(-50%)}@media(max-width:900px){.iv-related__grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.iv-related{padding:65px 0 75px}.iv-related__head{align-items:flex-start;gap:25px;flex-direction:column}.iv-related__head h2{font-size:28px}.iv-related__grid{grid-template-columns:1fr}.iv-related__card{display:grid;grid-template-columns:110px 1fr}.iv-related__card>img{height:130px}.iv-related__card>div{padding-top:20px}.iv-related__head>a{align-self:center}}
.iv-related__grid{grid-template-columns:repeat(3,1fr);max-width:980px;margin:0 auto}@media(max-width:900px){.iv-related__grid{grid-template-columns:repeat(2,1fr);max-width:none}}@media(max-width:640px){.iv-related__grid{grid-template-columns:1fr}}
.iv-page--sn .iv-hero__copy{position:relative;z-index:2;padding-right:0}.iv-page--sn .iv-hero h1{width:calc(100% + 110px);white-space:nowrap;font-size:clamp(34px,2.8vw,54px)}.iv-page--sn .iv-hero>figure{position:relative;z-index:1}@media(max-width:900px){.iv-page--sn .iv-hero__copy{padding-right:45px}.iv-page--sn .iv-hero h1{width:auto;white-space:normal}}
.iv-page--ki .iv-hero__copy{position:relative;z-index:2;padding-right:0}.iv-page--ki .iv-hero h1{width:calc(100% + 160px);white-space:nowrap;font-size:clamp(34px,2.7vw,52px)}.iv-page--ki .iv-hero>figure{position:relative;z-index:1}@media(max-width:900px){.iv-page--ki .iv-hero__copy{padding-right:45px}.iv-page--ki .iv-hero h1{width:auto;white-space:normal}}
.iv-page--hy .iv-hero__copy{position:relative;z-index:2;padding-right:0}.iv-page--hy .iv-hero h1{width:calc(100% + 110px);white-space:nowrap;font-size:clamp(34px,2.8vw,54px)}.iv-page--hy .iv-hero>figure{position:relative;z-index:1}@media(max-width:900px){.iv-page--hy .iv-hero__copy{padding-right:45px}.iv-page--hy .iv-hero h1{width:auto;white-space:normal}}

/* Interview detail breadcrumb */
.iv-breadcrumb{
  width:min(1120px,calc(100% - 80px));
  min-height:54px;
  margin:16px auto 0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  color:#888;
  font:700 10px Inter,sans-serif;
  letter-spacing:.12em;
}
.iv-breadcrumb a{
  color:#555;
  text-decoration:none;
  transition:color .2s;
}
.iv-breadcrumb a:hover{color:var(--red)}
.iv-breadcrumb>span{
  display:block;
  width:1px;
  height:16px;
  background:#d8d8d8;
  transform:skewX(-24deg);
}
.iv-breadcrumb strong{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 12px;
  border-radius:50px;
  background:#111;
  color:#fff;
  font-size:10px;
  letter-spacing:.08em;
}
@media(max-width:640px){
  .iv-breadcrumb{
    width:calc(100% - 30px);
    min-height:54px;
    margin:12px auto 0;
    padding:0;
    gap:10px;
    overflow-x:auto;
    white-space:nowrap;
  }
}

/* ===== 代表インタビュー（interview-nakamura.html）=====
   写真が3枚しかないため、Q&Aの多くを iv-qa--wide（文章のみ）で構成する。
   関連記事は社員4名を並べるので、既定の3列指定を4列に上書きする。 */
/* 関連記事は社員3名＋代表の4枚。既定の3列指定を4列に上書きする。
   2026-08-29に社員ページにも代表カードを足したため、全ページ共通にした。 */
.iv-related__grid{
  grid-template-columns:repeat(4,1fr);
  max-width:none;
}
@media(max-width:900px){
  .iv-related__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .iv-related__grid{grid-template-columns:1fr}
}

/* ===== 詳細ページのFVをモバイルで1画面に収める（2026-08-29）=====
   中村様よりトップページで「スマホだと写真がスクロールしないと見えない」
   との指摘があったため、インタビュー詳細でも同じ状態にしない。
   修正前: ヘッダー68 + コピー581 + 写真430 = 1079px（画面は812px） */
@media (max-width: 640px) {
  .iv-hero__copy {
    padding: 50px 28px 34px;
  }

  /* SN・KI・HYはPCで見出しを写真に食い込ませるため padding-right:0 にし、
     900px以下で45pxに戻している。その指定のほうが詳細度が高いため、
     640px以下でここを28pxに変えたあとも45pxが勝ち続けていた。
     見出しの箱がこの3ページだけ275px（他は292px）と狭かった。 */
  .iv-page--sn .iv-hero__copy,
  .iv-page--ki .iv-hero__copy,
  .iv-page--hy .iv-hero__copy {
    padding-right: 28px;
  }

  /* ページ個別の指定（.iv-page--ki .iv-hero h1 など）のほうが詳細度が高く、
     .iv-hero h1 だけでは上書きできないため、同じ形で並べる */
  /* 359px以下では箱が280pxを切り、HYの「努力は、人生を変える。」が
     入らなくなる。自動折り返しだと「人生を変え／る。」のように割れるので、
     文字のほうを幅に追従させる。360px以上では25.5pxのまま。 */
  .iv-hero h1,
  .iv-page--ki .iv-hero h1,
  .iv-page--sn .iv-hero h1,
  .iv-page--hy .iv-hero h1 {
    /* PCの900のままだと25.5pxでは「経験」「変」など画数の多い字が潰れる。
       同じ画面のセクション見出し（21.6px/700）に太さを揃える。
       サイトの基準は「見出し700／本文400〜500」。 */
    font-weight: 700;
    font-size: min(25.5px, 7.1vw);
    margin: 16px 0 24px;
  }

  .iv-hero > figure {
    height: 300px;
  }

                                         
                                           
                                                   
                                   
                                  
  .iv-profile h2,
  .iv-qa h2,
  .iv-goal h2,
  .iv-message h2,
  .iv-related__head h2 {
    font-size: 21.6px;
    line-height: 1.6;
    margin: 12px 0 18px;
  }

  /* FV見出しと締めのCTAは他ページのFV（25.5px）と同格にする */
  .iv-entry h2 {
    font-size: 25.5px;
    line-height: 1.55;
  }

  .iv-person small {
    font-size: 12px;
  }

  /* --- 本文の写真を横長（4:3）に統一する（2026-08-29）---
     .iv-qa figure は 410px、.iv-message figure は 450px、
     .iv-goal figure は 380px の固定高で、モバイルでも解除されていなかった。
     元が横長（2000x1500 比1.33）の写真が 335x410（比0.82）の縦長に
     切り取られ、左右が大きく削られていた。
     素材に縦長・横長が混在するが、読み物として縦のリズムを揃えたいので
     4:3に統一する。縦長素材は上下が切れるため、顔が残るよう上寄せで切る。 */
  .iv-qa figure,
  .iv-message figure,
  .iv-goal figure {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .iv-qa figure img,
  .iv-message figure img,
  .iv-goal figure img {
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
  }

  /* --- セクション間の余白を他ページに揃える（2026-08-29）---
     career.html は全セクション 40px + 40px。
     インタビューは 65〜120px のままで、PCの値がモバイルに出ていた。 */
  .iv-profile {
    margin-top: 40px;
  }

  .iv-story {
    padding: 40px 0;
  }

  .iv-goal {
    padding: 40px 0;
  }

  /* カードの外側（コンテナ25px）と内側（カード40px）で二重に余白を取り、
     335pxのうち本文に使えるのが205pxしかなかった。
     外側の余白をやめ、内側も詰めて本文幅を確保する。 */
  .iv-goal > .iv-container {
    padding: 86px 0 0;
  }

  .iv-goal > .iv-container > div {
    padding: 30px 26px;
  }

  /* MESSAGEが「画像 → 本文」の順なので、NEXT GOALも揃える。
     PCは左にカード・右に写真の横並びなので、順序はモバイルだけ入れ替える。 */
  .iv-goal > .iv-container > figure {
    order: -1;
  }

  /* 装飾の「NEXT GOAL」。58pxのままだとGOALの右端が画面外に出るため44pxに。
     PCでは左にカード・右に写真の横並びで、その奥行きを作るために文字を重ねている。
     モバイルは縦積みで作る奥行きがないため重ねない。隠して得るものがなく、
     薄いグレーの NEXT が写真に溶けて読みにくくなるだけ。 */
  .iv-goal::before,
  .iv-goal::after {
    top: 40px;
    font-size: 50px;
  }

  .iv-goal::before { left: 20px; }
  .iv-goal::after  { left: 142px; }

  .iv-message {
    margin: 40px auto;
  }

  .iv-related {
    padding: 40px 0;
  }

  .iv-entry {
    padding: 40px 0;
  }

  /* 段落の切れ目が見えるようにする。
     行の高さ32.25pxに対して段落間が15px（半行ぶん）しかなく、
     行間のほうが広いため段落が繋がって「文字の壁」に見えていた。
     中村様の会社概要でのご要望は「色付けで読みやすく」だったが、
     ここは色ではなく余白で構造を見せる（赤は応募導線に温存する）。 */
  .iv-qa div > p:not(.iv-label),
  .iv-goal p + p,
  .iv-message p + p {
    margin-top: 26px;
  }

  /* 本文を両端揃えにする。狭い幅では行末のガタつきが目立つため。
     日本語は文字単位で折り返せるので、隙間が不自然に広がることはない。 */
  .iv-profile p,
  .iv-qa div > p:not(.iv-label),
  .iv-goal p,
  .iv-message p {
    text-align: justify;
  }

  /* 関連記事のサムネイルは、横長（比1.33）を110x130（比0.85）の縦長で
     切り取っていた。4:3にすると110x82.5になり、カード（115〜130px）の
     下に白が残ってしまう（横並びのカードなので高さはテキスト側で決まる）。
     画像の列を広げれば4:3に近づくが、320pxではテキスト側の使える幅が
     82pxしかなくバッジが既に2行になっているため広げられない。
     高さを埋める方を優先し、切り取りは object-position で顔を残す。
     110x115 で比0.96。130pxのときの0.85よりは横が残る。 */
  .iv-related__card > img {
    height: 100%;
    object-position: center 22%;
  }

  /* 質問と質問の間。セクション間より狭く、かつ塊が分かる程度に */
  .iv-qa {
    margin-bottom: 48px;
  }
}


/* 見出しの改行をPC幅でだけ外す（2026-08-29）。
   .iv-qa の列幅は (コンテナ - gap) / 2 なので、1行に収めるには
   480px 必要 → ビューポート1200px以上でしか成立しない。
   それ未満で <br> を消すと「立ち上げたの／か？」のように
   機械的な位置で折れるため、狭い画面では意図した位置の改行を残す。
   MESSAGE の見出しは1行に100px足りないので、PCでも改行したまま。 */
@media (min-width: 1200px) {
  br.br-narrow { display: none; }
}


/* FVのロゴ透かし（2026-08-29）。
   縦積みにすると見出しの右が広く空く。見出しの長さはページごとに違い、
   HYは1行目の右に40pxしか残らないので、文字を避けて置くのではなく
   背面に薄く敷く。位置はコピー枠に対して固定なので5ページとも同じ見え方になる。
   グレーにするのは、7〜9%まで落とした赤が薄いピンクとして残り、
   見出しの赤（アクセント）と競合するため。
   右に12px出るが .iv-page main の overflow:hidden で収まる。 */
@media (max-width: 900px) {
  .iv-hero__copy {
    position: relative;
  }

  .iv-hero__copy::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 96px;
    right: -12px;
    /* タブレットはコピー枠が2倍近く広く、150px固定では小さすぎた。
       360pxで150px、660pxで211px、900pxで280px。 */
    width: clamp(150px, 36vw, 280px);
    aspect-ratio: 1;
    background: url(../image/00-common/rogo02.webp) no-repeat center / contain;
    opacity: .09;
    filter: grayscale(1);
    pointer-events: none;
  }

  .iv-hero__copy > * {
    position: relative;
    z-index: 1;
  }
}


/* 見出しの改行を幅で出し分ける（2026-08-29）。境目は440pxひとつに統一。
   br-xs は440px以下だけ出す改行。広い画面では1行に収まるので不要になる。
   br-narrow（1200px以上で隠す）と組み合わせると、
   「PCは1行 / 中間幅は2行 / 狭い画面は3行」を1つの見出しで作れる。 */
@media (min-width: 441px) {
  br.br-xs { display: none; }
}