/* AInformation — 運営者・編集体制まわり（2026-09-01）
   ------------------------------------------------------------
   ★組み方の方針（藤井さんの「AIで作られたページっぽくて嫌」を受けて作り直し）
     Wirecutter の About・SAKIDORI の「SAKIDORIとは」・Business Insider Japan の
     About を見て、次を守っている。
       ・塗り箱とカードを並べない。文章と余白で組む
       ・実際に動かしている画面を混ぜる。文字だけにしない
       ・情報を同じ重さで出さない。最初のひとことを主役にする
       ・英字は背景に大きく薄く置く装飾。見出しに機械的に付けない
   ------------------------------------------------------------ */

/* ===========================================================
   0. 動きの土台
   ★隠すのは body に .ai-anim が付いているときだけ。
     このクラスは JS が動き出したときに付ける。
     JSが止まっても中身は必ず見える（前に本文がまるごと消えた）。
   =========================================================== */
.ai-anim .ai-rise{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
.ai-anim .ai-rise.is-in{opacity:1;transform:none;transition-delay:var(--d,0ms);}
@media (prefers-reduced-motion:reduce){
  .ai-anim .ai-rise{opacity:1;transform:none;transition:none;}
}

/* ---- 読んだところまで伸びる細い線（画面のいちばん上） ---- */
.ai-ab__prog{position:fixed;left:0;top:0;z-index:999;width:100%;height:3px;
  background:var(--ai-accent);transform:scaleX(var(--sp,0));transform-origin:left;
  pointer-events:none;will-change:transform;}
@media (prefers-reduced-motion:reduce){.ai-ab__prog{display:none;}}

/* ---- 導入の見出しは1文字ずつ立ち上がる ---- */
.ai-anim .ai-ab__c{display:inline-block;opacity:0;transform:translateY(30px) rotate(5deg);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.85,.3,1);}
.ai-anim .ai-ab__ttl.is-in .ai-ab__c{opacity:1;transform:translateY(var(--y,0px));transition-delay:var(--d,0ms);}
/* 出し終わったらマウスに反応する。近づいた字がふっと浮く */
.ai-ab__ttl.is-done .ai-ab__c{transition:transform .28s cubic-bezier(.2,.8,.3,1),color .28s ease;}
.ai-ab__ttl:not(.ai-anim-none) .ai-ab__c{will-change:transform;}

/* ===========================================================
   1. 運営者情報ページ /company
   =========================================================== */
/* ★幅は1本だけ。前は導入だけ1000px・中身が720pxで左端がずれていた（2026-09-02に指摘） */
.ai-ab{--w:760px;
  max-width:calc(var(--w) + 48px);margin:0 auto;padding:0 24px 90px;
  font-size:16.5px;line-height:2;color:var(--ai-text);}
.ai-ab p{margin:0 0 1.5em;}
.ai-ab a{color:var(--ai-accent-ink);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(10,127,168,.3);transition:border-color .2s ease;}
.ai-ab a:hover{border-bottom-color:var(--ai-accent-ink);}

/* ---- 背景に置く大きな英字。読むものではないので薄く ---- */
.ai-ab__bg,.ai-anim .ai-ab__bg,.ai-anim .ai-ab__bg.is-in{opacity:.05;}
.ai-ab__bg{position:absolute;top:-30px;left:-14px;z-index:0;pointer-events:none;
  font-family:var(--ai-cond);font-size:clamp(58px,11vw,124px);font-weight:700;
  line-height:1;letter-spacing:.02em;color:var(--ai-ink);opacity:.045;white-space:nowrap;
  will-change:transform;}
.ai-ab__bg--r{left:auto;right:-14px;}

/* ---- 導入。ここだけ大きく ---- */
.ai-ab__open{position:relative;padding:74px 0 0;margin:0 0 96px;}
.ai-ab__kicker{position:relative;z-index:1;margin:0 0 18px;font-family:var(--ai-cond);
  font-size:14px;font-weight:600;letter-spacing:.22em;color:var(--ai-muted);}
.ai-ab__ttl{position:relative;z-index:1;margin:0 0 30px;font-size:clamp(30px,4.6vw,50px);
  font-weight:800;line-height:1.36;letter-spacing:.01em;color:var(--ai-ink);}
.ai-ab__ttl span{display:block;}
.ai-ab__ttl span:last-child{color:var(--ai-accent-ink);}
.ai-ab__oplead{position:relative;z-index:1;font-size:17px;line-height:2.05;}
.ai-ab__oplead p:last-child{margin-bottom:0;}

/* ---- いまも直し続けていることを数字で見せる ---- */
.ai-ab__live{position:relative;z-index:1;margin:30px 0 0;padding:20px 0 0;
  border-top:1px solid var(--ai-line);font-size:15.5px;line-height:2;color:var(--ai-muted);}
.ai-ab__live span{display:inline;}
.ai-ab__live b{font-family:var(--ai-num);font-size:27px;font-weight:800;color:var(--ai-accent-ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;}
.ai-ab__live i{font-style:normal;font-weight:800;color:var(--ai-accent-ink);font-size:14.5px;margin-left:1px;}

/* ---- セクション ---- */
.ai-ab__sec{position:relative;margin:0 0 92px;}
.ai-ab__h2{position:relative;z-index:1;margin:0 0 26px;font-size:27px;font-weight:800;
  line-height:1.5;color:var(--ai-ink);letter-spacing:.01em;}
.ai-ab__h2::after{content:"";display:block;width:38px;height:3px;background:var(--ai-accent);margin:14px 0 0;
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.3,1) .12s;}
.ai-ab__h2.is-in::after,.ai-ab__h2:not(.ai-rise)::after{transform:scaleX(1);}
.ai-ab__lead{margin:0 0 34px;}
.ai-ab__txt p:last-child{margin-bottom:0;}

/* ---- 顔写真。囲まずに置いてキャプションを添える ---- */
.ai-ab__face{margin:0 0 34px;}
.ai-ab__face{position:relative;}
.ai-ab__face > span{display:block;width:168px;height:168px;overflow:hidden;}
.ai-ab__face img{display:block;width:100%;height:118%;object-fit:cover;object-position:center 22%;
  will-change:transform;filter:grayscale(1) contrast(1.04);transition:filter 1.2s ease .1s;}
.ai-ab__face.is-in img,.ai-ab__face:not(.ai-rise) img{filter:none;}
.ai-ab__face figcaption{margin:14px 0 0;font-size:13.5px;line-height:1.7;color:var(--ai-muted);}
.ai-ab__face figcaption b{display:block;font-size:20px;font-weight:800;color:var(--ai-ink);
  margin:0 0 2px;letter-spacing:.02em;}

/* ---- 文章のなかの数字。箱にせず、字を大きくして通す ---- */
.ai-ab__n{font-family:var(--ai-num);font-size:31px;font-weight:800;color:var(--ai-accent-ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;}
.ai-ab__txt i{font-style:normal;font-weight:800;color:var(--ai-accent-ink);font-size:15px;margin-left:1px;}

.ai-ab__skill{margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--ai-line);
  font-size:14.5px;line-height:1.95;color:var(--ai-muted);}
.ai-ab__skill b{display:block;color:var(--ai-ink);font-size:14px;margin:0 0 4px;}

/* ---- 記事の作り方。番号は大きく、箱では囲まない ---- */
.ai-ab__steps{list-style:none;margin:0;padding:0;counter-reset:st;position:relative;}
/* 左の縦線。薄いほうが全体、濃いほうがスクロールに合わせて伸びる */
.ai-ab__steps::before,.ai-ab__steps::after{content:"";position:absolute;left:19px;top:12px;width:2px;}
.ai-ab__steps::before{bottom:12px;background:var(--ai-line);}
.ai-ab__steps::after{height:var(--p,0%);background:var(--ai-accent);transition:height .18s linear;}
.ai-ab__steps li{counter-increment:st;position:relative;padding:0 0 42px 66px;
  transition:transform .45s cubic-bezier(.2,.85,.3,1);}
.ai-ab__steps li.is-on{transform:translateX(5px);}
.ai-ab__steps li:last-child{padding-bottom:0;}
.ai-ab__steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-2px;
  width:40px;font-family:var(--ai-num);font-size:22px;font-weight:800;color:var(--ai-line);
  letter-spacing:-.02em;background:var(--ai-paper);padding:6px 0;text-align:center;
  transition:color .35s ease,transform .5s cubic-bezier(.2,.85,.3,1);}
.ai-ab__steps li.is-on::before{color:var(--ai-accent-ink);transform:rotate(-6deg) scale(1.1);}
.ai-ab__steps h3{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--ai-muted);
  line-height:1.55;transition:color .45s ease;}
.ai-ab__steps li.is-on h3{color:var(--ai-ink);}
.ai-ab__steps p{margin:0;font-size:15.5px;line-height:1.95;color:var(--ai-text);}

/* ---- 実際に動かしている画面 ---- */
.ai-ab__shots{display:grid;grid-template-columns:1fr;gap:38px;margin:58px 0 0;}
.ai-ab__shots figure{margin:0;transition:transform .32s cubic-bezier(.2,.8,.3,1);}
.ai-ab__shots figure[data-go]{cursor:pointer;}
.ai-ab__shots figure:hover{transform:translateY(-5px);}
.ai-ab__shots figure > span{display:block;overflow:hidden;position:relative;}
.ai-ab__shots figure > span::after{content:"開いてみる →";position:absolute;right:0;bottom:0;
  background:var(--ai-ink);color:#fff;font-size:13.5px;font-weight:800;padding:11px 20px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.ai-ab__shots figure:hover > span::after{transform:none;}
.ai-ab__shots img{display:block;width:100%;height:auto;box-shadow:0 2px 18px rgba(13,27,42,.14);
  will-change:transform;}
.ai-ab__shots figcaption{margin:13px 0 0;font-size:13.5px;line-height:1.8;color:var(--ai-muted);}
.ai-ab__shots figcaption a{margin-left:5px;font-size:13px;}

.ai-ab__note{padding:16px 0 0;border-top:1px solid var(--ai-line);font-size:15px;color:var(--ai-muted);}
.ai-ab__strong{font-weight:700;color:var(--ai-ink);}

/* ---- サイトの情報 ---- */
.ai-ab__dl{margin:0;}
.ai-ab__dl > div{display:grid;grid-template-columns:190px 1fr;gap:0 20px;padding:14px 0;
  border-bottom:1px solid var(--ai-line);transition:background .2s ease;}
.ai-ab__dl > div:hover{background:var(--ai-surface);}
.ai-anim .ai-ab__dl > div{opacity:0;transform:translateX(-12px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.3,1),background .2s ease;}
.ai-anim .ai-ab__dl.is-in > div{opacity:1;transform:none;transition-delay:var(--d,0ms);}
.ai-ab__dl > div:first-child{border-top:1px solid var(--ai-line);}
.ai-ab__dl dt{margin:0;font-size:13.5px;font-weight:700;color:var(--ai-muted);line-height:1.9;}
.ai-ab__dl dd{margin:0;font-size:15.5px;line-height:1.9;}

/* ---- 最後の導線 ---- */
.ai-ab__end{margin:0;padding:36px 0 0;border-top:2px solid var(--ai-ink);}
.ai-ab__endT{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--ai-ink);}
.ai-ab__endD{margin:0 0 22px;font-size:15px;color:var(--ai-muted);}
.ai-ab__endB{display:flex;flex-wrap:wrap;gap:12px;}
/* ★.ai-ab a{color:accent-ink} がボタンにも当たって、濃紺に水色の字で読めなかった（2026-09-02）。
   ここで色と下線を上書きする */
.ai-ab .ai-ab__btn{display:inline-flex;align-items:center;background:var(--ai-ink);color:#fff;
  font-size:15.5px;font-weight:800;padding:15px 30px;border:0;border-bottom:0;text-decoration:none;
  letter-spacing:.02em;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;}
.ai-ab__btn::after{content:"→";margin-left:10px;transition:transform .2s ease;}
.ai-ab .ai-ab__btn:hover{background:var(--ai-accent-ink);color:#fff;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(10,127,168,.28);}
.ai-ab__btn:hover::after{transform:translateX(4px);}
.ai-ab .ai-ab__btn--g{background:none;color:var(--ai-ink);box-shadow:inset 0 0 0 2px var(--ai-ink);}
.ai-ab .ai-ab__btn--g:hover{background:var(--ai-ink);color:#fff;box-shadow:inset 0 0 0 2px var(--ai-ink);}

@media (max-width:767px){
  .ai-ab{padding:0 18px 64px;font-size:16px;line-height:1.95;}
  .ai-ab__open{padding-top:48px;margin-bottom:64px;}
  .ai-ab__bg{font-size:64px;top:-6px;}
  .ai-ab__oplead{font-size:16px;}
  .ai-ab__sec{margin-bottom:66px;}
  .ai-ab__h2{font-size:22px;}
  .ai-ab__face img{width:128px;height:128px;}
  .ai-ab__n{font-size:26px;}
  .ai-ab__steps li{padding-left:54px;padding-bottom:34px;}
  .ai-ab__steps li::before{font-size:19px;width:34px;}
  .ai-ab__steps::before,.ai-ab__steps::after{left:16px;}
  .ai-ab__dl > div{grid-template-columns:1fr;gap:2px;padding:12px 0;}
  .ai-ab__btn{width:100%;justify-content:center;}
}

/* ===========================================================
   2. 著者ページのプロフィール（同じ組み方でコンパクトに）
   =========================================================== */
.ai-prof{max-width:840px;margin:20px 0 0;padding:26px 0 24px;
  border-top:2px solid var(--ai-ink);border-bottom:1px solid var(--ai-line);text-align:left;}
.ai-prof__head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin:0 0 18px;}
.ai-prof__img{display:block;width:88px;height:88px;object-fit:cover;object-position:center 22%;}
.ai-prof__role{margin:0 0 3px;font-size:12.5px;font-weight:700;color:var(--ai-muted);letter-spacing:.02em;}
.ai-prof__name{margin:0;font-size:23px;font-weight:800;color:var(--ai-ink);line-height:1.3;}
.ai-prof__name span{font-family:var(--ai-num);font-size:12.5px;font-weight:600;
  color:var(--ai-muted);margin-left:10px;letter-spacing:.05em;}
.ai-prof__lead{margin:0 0 14px;font-size:15px;line-height:1.95;color:var(--ai-text);}
.ai-prof__lead b{font-family:var(--ai-num);font-size:23px;font-weight:800;color:var(--ai-accent-ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.ai-prof__lead i{font-style:normal;font-weight:800;color:var(--ai-accent-ink);font-size:14px;}
.ai-prof__skill{margin:0 0 14px;font-size:13.5px;line-height:1.9;color:var(--ai-muted);}
.ai-prof__skill b{color:var(--ai-ink);margin-right:6px;}
.ai-prof__more{margin:0;font-size:14.5px;}
.ai-prof__more a{color:var(--ai-accent-ink);font-weight:800;text-decoration:none;}
.ai-prof__more a::after{content:"→";margin-left:7px;display:inline-block;transition:transform .2s ease;}
.ai-prof__more a:hover::after{transform:translateX(4px);}

@media (max-width:767px){
  .ai-prof__head{grid-template-columns:auto 1fr;gap:14px;}
  .ai-prof__img{width:68px;height:68px;}
  .ai-prof__name{font-size:20px;}
  .ai-prof__name span{display:block;margin:2px 0 0;}
  .ai-prof__lead{font-size:14.5px;}
  .ai-prof__lead b{font-size:20px;}
}

/* ===========================================================
   3. 記事ヘッダーの「執筆・監修」
   =========================================================== */
.ai-single__info .ai-byline a{color:var(--ai-muted);text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(92,112,128,.35);}
.ai-single__info .ai-byline a:hover{color:var(--ai-accent-ink);border-bottom-color:var(--ai-accent);}

/* ===========================================================
   4. 広告の表示（本文のいちばん上）
   =========================================================== */
.ai-prnote{background:var(--ai-surface);border-left:3px solid var(--ai-accent);
  padding:12px 16px;margin:0 0 24px;font-size:13.5px;line-height:1.7;color:var(--ai-muted);}
.ai-prnote b{color:var(--ai-text);margin-right:2px;}
.ai-prnote a{color:var(--ai-accent-ink);font-weight:700;}