/* =========================================================
   article.css ─ 「一覧＋詳細」型4ページ専用
     /recruit/interview/         社員インタビュー（一覧）
     /recruit/interview/detail/  社員インタビュー詳細（テンプレート）
     /news/                      お知らせ・ブログ（一覧）
     /news/detail/               お知らせ詳細（テンプレート）

   ★クラスは全て ar- 接頭辞。common.css / page.css の部品
     （.wrap .s .s-head .eyebrow .title .lead .btn .pill-btn
      .rec-more .ph-in .note）で足りないものだけをここに置く。
   ★common.css の後 → page.css の後 に読む（メタ css: page.css, article.css）
     ＝ .page-hero 系の上書きはこのファイル側が勝つ。
   ========================================================= */

/* ---------- 版面 ----------
   ★記事本文は1カラム＝720px前後に制限する（.wrap は1440＝本文には広すぎる）*/
.ar-narrow{max-width:720px;margin:0 auto;}
.ar-mid{max-width:940px;margin:0 auto;}

/* ---------- ページヘッダーの巨大英字 ----------
   ★下限38pxは「文字列が短いとき」の値。長い英字はその instance だけ下げる。
     News & Blog＝11文字＝TOPの #news（News & Topics）と同じく SP390 で版面を超える */
#hero-news .eyebrow.lg{font-size:clamp(26px,6.95vw,100px);}

/* ---------- 詳細ページのヘッダー ----------
   ★一覧＝英字が主役（.eyebrow.lg に見出しを重ねる型）／
     詳細＝記事タイトルが主役。巨大英字は使わず、カテゴリ・日付・タイトルを見せる。
     → .page-hero .title の「巨大英字への重ね上げ」を打ち消す必要がある */
.ar-hero .title{margin-top:0;font-size:clamp(24px,2.6vw,36px);max-width:860px;margin-left:auto;margin-right:auto;}
.ar-hero-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin-bottom:clamp(14px,1.6vw,20px);}
.ar-hero .eyebrow{margin-bottom:12px;}
/* ★font-size は指定しない＝.note（page.css・11px）のまま。about.html の注記と揃える
   （11px は12px下限を割るが、page.css 側の共通事象。ここで上書きすると本ページだけ字が違う） */
.ar-note{max-width:620px;margin-left:auto;margin-right:auto;}

/* ---------- 小物（タグ／カテゴリ／日付） ---------- */
/* .ar-tag は「白カードの上」でも「--paper-2 の地の上」でも成立するよう白地＋罫 */
.ar-tag{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:var(--ink-2);}
.ar-cat{display:inline-flex;align-items:center;flex:none;border:1px solid var(--accent);border-radius:999px;
  padding:3px 13px;font-size:12px;font-weight:500;line-height:1.6;color:var(--accent);}
.ar-date{font-family:var(--lt);font-size:13px;letter-spacing:.04em;color:var(--ink-2);}

/* =========================================================
   社員インタビュー（一覧）
   ========================================================= */
/* ★このページは .s-head を持たず、セクションの padding 直下に list が来る＝ margin-top は付けない */
.ar-iv-list{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);}
.ar-iv-row{display:grid;grid-template-columns:clamp(104px,17vw,240px) minmax(0,1fr);gap:clamp(14px,2vw,32px);
  align-items:center;background:#fff;border-radius:clamp(14px,1.5vw,20px);padding:clamp(12px,1.3vw,18px);
  transition:transform .3s,box-shadow .3s;}
.ar-iv-row:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(60,40,20,.5);}
.ar-iv-ph .ph-in{aspect-ratio:3/4;}
/* ★.ph-in は display:flex ＝ <small> が「別のフレックスアイテム」になり <br> が効かず“右隣”に並ぶ。
   about.html も同じ挙動だが、枠が広く1文に見えるため表面化していない。狭いサムネでは崩れるので
   自作クラス配下だけ縦積みにする（page.css は他エージェント作業中のため触らない）。 */
.ar-iv-ph .ph-in,.ar-nrow .ph-in{flex-direction:column;}
.ar-iv-tags{display:flex;flex-wrap:wrap;gap:7px;}
.ar-iv-ttl{font-size:clamp(16px,1.4vw,20px);font-weight:700;line-height:1.65;margin:clamp(10px,1.1vw,14px) 0 0;}
.ar-iv-lead{color:var(--ink-2);font-size:15px;line-height:1.95;margin:10px 0 0;}
.ar-iv-who{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:clamp(12px,1.2vw,16px) 0 0;}
.ar-iv-who b{font-size:15px;font-weight:700;letter-spacing:.02em;}
.ar-iv-who span{font-size:12px;color:var(--ink-3);letter-spacing:.04em;}
/* 行全体が <a>＝中にボタンは置けない。<span class="btn ghost"> を行のホバーで反転させる */
.ar-iv-row .btn{margin-top:clamp(12px,1.3vw,18px);pointer-events:none;}
.ar-iv-row:hover .btn.ghost{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.ar-iv-row:hover .arrow{transform:translateX(3px);}

/* =========================================================
   社員インタビュー（詳細）
   ========================================================= */
/* プロフィール（写真3:4＋引用＋表） */
.ar-profile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,3.4vw,58px);align-items:start;}
.ar-pf-ph .ph-in{aspect-ratio:3/4;}
.ar-pf-q{font-size:clamp(18px,1.7vw,24px);font-weight:700;line-height:1.8;letter-spacing:.01em;margin:0;}
.ar-pf-q::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--accent);
  margin-bottom:clamp(16px,1.8vw,24px);}
.ar-table{width:100%;border-collapse:collapse;margin-top:clamp(22px,2.4vw,32px);}
.ar-table th,.ar-table td{text-align:left;vertical-align:top;padding:13px 0;border-bottom:1px dotted var(--line);
  font-size:15px;line-height:1.9;}
.ar-table th{width:118px;padding-right:16px;font-weight:700;color:var(--ink-2);white-space:nowrap;}
.ar-table td{color:var(--ink);}

/* Q&A */
.ar-qa + .ar-qa{margin-top:clamp(40px,4.2vw,60px);}
.ar-q{font-size:clamp(19px,1.7vw,25px);font-weight:700;line-height:1.65;margin:0;}

/* キャリアの歩み（3段） */
.ar-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,18px);margin-top:clamp(22px,2.4vw,32px);}
.ar-step{position:relative;background:#fff;border-radius:clamp(12px,1.2vw,16px);
  padding:clamp(18px,2vw,26px) clamp(10px,1.1vw,16px);text-align:center;}
/* カード間の「→」。gap の中央に置く */
.ar-step + .ar-step::before{content:"";position:absolute;top:50%;left:calc(-1 * clamp(12px,1.3vw,18px) / 2 - 4px);
  width:8px;height:8px;border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:translateY(-50%) rotate(45deg);}
.ar-step-no{display:block;font-family:var(--lt);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);}
.ar-step-ttl{font-size:14px;font-weight:700;line-height:1.6;margin:10px 0 4px;}
.ar-step-sub{font-size:12px;line-height:1.6;color:var(--ink-2);margin:0;}

/* ある1日のスケジュール（点線区切り＝TOPのお知らせ行に揃える） */
.ar-day{margin-top:clamp(22px,2.4vw,32px);border-top:1px dotted var(--ink-3);}
.ar-day-row{display:flex;gap:clamp(14px,2vw,30px);align-items:baseline;padding:15px 4px;border-bottom:1px dotted var(--ink-3);}
.ar-day-t{flex:none;width:60px;font-family:var(--lt);font-size:clamp(15px,1.3vw,17px);font-weight:600;
  letter-spacing:.03em;color:var(--accent);}
.ar-day-x{margin:0;font-size:15px;line-height:1.9;color:var(--ink-2);}

/* =========================================================
   お知らせ・ブログ（一覧）
   ========================================================= */
/* カテゴリ絞り込み */
.ar-chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;justify-content:center;}
.ar-chips-lb{font-size:13px;font-weight:700;letter-spacing:.04em;margin-right:2px;}
.ar-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 18px;font-size:13px;font-weight:500;line-height:1.5;color:var(--ink-2);transition:.2s;cursor:pointer;}
.ar-chip:hover{border-color:var(--accent);color:var(--accent);}
.ar-chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* 記事行（★＝TOPのお知らせ行と同じ点線区切りに揃える） */
.ar-nlist{border-top:1px dotted var(--ink-3);margin-top:clamp(30px,3.2vw,46px);}
.ar-nrow{display:grid;grid-template-columns:clamp(104px,13vw,168px) minmax(0,1fr) 20px;gap:clamp(14px,2vw,30px);
  align-items:center;padding:clamp(14px,1.6vw,20px) 6px;border-bottom:1px dotted var(--ink-3);transition:background .2s;}
.ar-nrow:hover{background:rgba(255,255,255,.6);}
.ar-nrow .ph-in{aspect-ratio:4/3;}
.ar-nmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;}
.ar-nttl{font-size:clamp(15px,1.2vw,17px);font-weight:500;line-height:1.7;margin:9px 0 0;}
.ar-nar{flex:none;width:20px;height:auto;color:var(--ink-3);transition:transform .25s,color .25s;}
.ar-nrow:hover .ar-nar{transform:translateX(4px);color:var(--accent);}

/* ページャー */
.ar-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:clamp(40px,4.4vw,64px);}
.ar-page{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  font-family:var(--lt);font-size:14px;font-weight:500;color:var(--ink-2);transition:.2s;}
.ar-page:hover{border-color:var(--accent);color:var(--accent);}
.ar-page.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* =========================================================
   記事本文の組版（お知らせ詳細）
   ★1カラム＝本文16px・行間2前後。見出し/リード/引用/箇条書き/画像＋キャプション
   ========================================================= */
.ar-body{margin-top:clamp(24px,2.6vw,34px);}
.ar-body > *:first-child{margin-top:0;}
.ar-body > *:last-child{margin-bottom:0;}
.ar-lead-tx{font-size:clamp(16px,1.35vw,18px);font-weight:500;line-height:2;color:var(--ink);margin:0 0 1.9em;}
.ar-body p{font-size:16px;line-height:2.05;color:var(--ink);margin:0 0 1.9em;}
.ar-body h2{font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.65;margin:2.2em 0 .9em;
  padding-left:16px;border-left:4px solid var(--accent);}
.ar-body h3{font-size:clamp(16px,1.3vw,18px);font-weight:700;line-height:1.7;margin:2em 0 .7em;}
.ar-body ul{list-style:none;margin:0 0 1.9em;padding:0;}
.ar-body ul li{position:relative;padding-left:21px;font-size:16px;line-height:2;margin-bottom:.35em;}
.ar-body ul li::before{content:"";position:absolute;left:2px;top:.9em;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.ar-body blockquote{margin:0 0 1.9em;padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  background:var(--paper-2);border-left:3px solid var(--accent);border-radius:0 14px 14px 0;}
.ar-body blockquote p{font-size:15px;line-height:2;color:var(--ink-2);margin:0;}
.ar-body figure{margin:0 0 1.9em;}
.ar-body figcaption{margin-top:10px;font-size:12px;line-height:1.8;color:var(--ink-3);}
.ar-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.ar-fig-16 .ph-in{aspect-ratio:16/9;}

/* ハッシュタグ／シェア／前後記事 */
.ar-hash{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,2.8vw,38px);}
.ar-share{display:flex;align-items:center;gap:13px;margin-top:clamp(20px,2.2vw,28px);
  padding-top:clamp(20px,2.2vw,28px);border-top:1px dotted var(--line);}
.ar-share-lb{font-family:var(--lt);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-3);}
.ar-share a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--ink-2);transition:.2s;}
.ar-share a:hover{border-color:var(--accent);color:var(--accent);}
.ar-share svg{width:17px;height:17px;display:block;}
.ar-pn{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(34px,3.6vw,50px);
  padding:clamp(14px,1.4vw,18px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ar-pn .btn{font-size:13px;padding:10px 18px;}
.ar-pn .is-off{opacity:.35;pointer-events:none;}

/* =========================================================
   3カード（ほかの社員インタビュー／関連する記事）＝3列なので本文14px
   ========================================================= */
.ar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(38px,4vw,56px);}
.ar-card{display:block;background:#fff;border-radius:clamp(14px,1.4vw,20px);overflow:hidden;transition:transform .3s,box-shadow .3s;}
.ar-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -26px rgba(60,40,20,.5);}
.ar-card .ph-in{aspect-ratio:4/3;border:0;border-radius:0;border-bottom:1px solid var(--line);}
.ar-cards-p .ph-in{aspect-ratio:3/4;}          /* ポートレート版（ほかの社員インタビュー） */
.ar-card-bd{padding:clamp(16px,1.6vw,22px);}
.ar-card-ttl{font-size:14px;font-weight:700;line-height:1.75;margin:10px 0 0;}
.ar-card-dt{display:block;margin-top:10px;}
.ar-btn-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.2vw,44px);}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:900px){
  .ar-profile{grid-template-columns:1fr;}
  .ar-pf-ph{max-width:340px;}
  .ar-cards{grid-template-columns:repeat(2,1fr);}
  .ar-nrow{grid-template-columns:clamp(100px,26vw,150px) minmax(0,1fr);}
  .ar-nar{display:none;}
  .ar-table th{width:96px;}
}
@media(max-width:560px){
  .ar-cards{grid-template-columns:1fr;}
  .ar-cards-p .ph-in{aspect-ratio:4/3;}        /* SPで1列＝3:4だと縦に伸びすぎる */
  .ar-iv-row{grid-template-columns:clamp(96px,27vw,130px) minmax(0,1fr);}
  .ar-iv-lead{font-size:14px;}
  .ar-pn{gap:8px;}
  .ar-pn .btn{font-size:12px;padding:9px 12px;}
  .ar-chips{justify-content:flex-start;}
}

/* 記事下のカテゴリー（前後記事ナビの下） */
/* ★区切り線は .ar-pn の border-bottom が既にあるので、ここでは引かない（二重罫になる） */
.ar-catbox{margin-top:clamp(30px,3.2vw,44px);text-align:center;}
.ar-catbox .eyebrow{margin-bottom:clamp(14px,1.6vw,20px);}

/* ---------- news/detail・SP ---------- */
@media(max-width:640px){
  /* 記事本文セクションの版面。page-hero+.s に付いた上80pxを解除し、
     左右を30pxに（#article のみにスコープ・グローバル.wrapには当てない） */
  #article > .wrap{padding:0 30px;}
}


/* ★正式サムネ支給までの暫定。ph-in（撮影待ち枠）の代わりに写真を敷く。4:3・下に区切り罫。 */
.ar-card-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--line);}
/* カードグリッドの間隔 14→40px（SP・.ar-cards全般＝一覧/関連） */
@media(max-width:640px){
  .ar-cards{gap:40px;}
}

/* ---------- news・SP ---------- */
@media(max-width:640px){
  /* ブログカード見出し 14→16px／行間 24.5→30px（.ar-card-ttl全般） */
  .ar-card-ttl{font-size:16px;line-height:30px;}
  /* お知らせ一覧セクションの下余白 72→100px（#listのみ） */
  #list{padding:72px 0 100px;}
}

/* ---------- news/detail・SP ---------- */
@media(max-width:640px){
  /* SNSシェアはSPで隠す */
  .ar-share{display:none;}
  /* 前後記事ナビの上下余白 14→30px */
  .ar-pn{padding:30px 0;}
  /* 記事セクションの下余白 72→100px（#articleのみ） */
  #article{padding:72px 0 100px;}
  /* 詳細ヒーローの背景色を少し明るく（この要素だけ） */
  #hero-news-detail{background-color:#fbf9f6;}
}

/* ---------- news/detail・SP ---------- */
@media(max-width:640px){
  /* 詳細ヒーローの記事タイトル 行間 33.6→40px（.ar-hero .title＝汎用.titleには当てない） */
  .ar-hero .title{line-height:40px;}
}