/* 写し元: デモ company_alumnus.html の、共通CSSの後にある style タグをそのまま（common.css の後に読む） */
/* スマホ（767px以下）。sp.cssの共通部分に、このページの読み物カラムだけ足す */
@media (max-width: 767px) {
  .col{width:auto;padding:0 16px}
  .eyebrow{font-size:12px}
  .eyebrow i{margin:0 4px}
  .sec{margin-top:0;padding-top:32px}   /* sp.css のトップ用 .sec の余白を打ち消す */
  h1.hl{font-size:24px}
  .lede{font-size:16px}
  .hero .ph{height:210px}
  .basic th{width:104px;padding:10px 12px}
  .basic td{padding:10px 12px}
  .jump .col{padding:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .jump .col::-webkit-scrollbar{display:none}
  .jump a{flex:none;padding:0 14px;font-size:14px;white-space:nowrap}
  .sec{scroll-margin-top:120px}   /* スマホは 60px＋56px */
  .asked ol{grid-template-columns:1fr}
  .asked li{padding:12px 0;border-left:0;border-top:1px solid #E5E5E5}
  .asked li:first-child{border-top:0;padding-top:4px}
  .who{align-items:flex-start;padding:16px}
  .who .ph{width:64px;height:64px}
  .ch h2,.sh{font-size:20px}
  .ch h2 .no{font-size:24px}
  .ch h3.h3n{font-size:18px}
  .ch h3.h3n .no{font-size:20px}
  .ch figure{flex-direction:column;align-items:stretch}
  .ch figure .ph{width:100%;height:200px}
  .case{padding:18px 16px}
  .case th{width:84px}
  .pt{display:block;overflow-x:auto}
  .kv th{width:96px}
  .tg div{flex-direction:column;gap:6px}
  .corow{flex-direction:column}
  .offi{width:100%}
  .aubox .row{flex-direction:column;align-items:flex-start;gap:12px}
}
/* 2026-10-07 アルムナス株式会社のデモ（個別記事1本目の下書き）。company.html の型をそのまま使い、取材の章は一問一答ではなく地の文＋本人の言葉で組んだ。
   〇〇 は原稿確認のときに名智さんに聞く数字・項目。写真は灰色の枠のまま */
.ch h3.st{margin-top:36px;font-size:18px;font-weight:700;line-height:1.6;color:#333333;padding-left:12px;border-left:3px solid #8447E1}
.ch.s2{margin-top:44px}
/* 取材記事の h3: 紫の番号＋20px（h2 は薄紫の帯なので、段の違いを番号で見せる・10-11） */
.ch h3.h3n{margin-top:40px;display:flex;gap:14px;align-items:baseline;font-size:20px;font-weight:700;line-height:1.5;color:#333333}
.ch h3.h3n .no{font-size:24px;line-height:1;color:#8447E1;flex:none}
.ch.s2 h3.h3n{margin-top:0}
.ch h3.h3n+.ground{margin-top:16px}
.ch ul.pt2{margin-top:12px;padding-left:1.4em;font-size:16px;line-height:2}
.ch ul.pt2 li{margin-top:4px}
.fit{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fit > div{border:1px solid #E5E5E5;border-radius:8px;padding:20px 24px}
.fit h3{font-size:16px;font-weight:700;line-height:1.6;color:#333333;padding-bottom:10px;border-bottom:1px solid #E5E5E5}
.fit h3.ng{color:#666666}
.fit ul{margin-top:12px;padding-left:1.3em;font-size:15px;line-height:1.9}
.fit li{margin-top:6px}
.todo{color:#8447E1;font-weight:700}
.nv dt:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#8447E1;margin-right:8px;vertical-align:middle}
@media (max-width:767px){.fit{grid-template-columns:1fr}}