@charset "utf-8";
/* ===========================================================
   AInformation 著者ページ（2026-09-03）
   swell_child/assets/css/ainews-author.css

   ・読み込むのは著者ページだけ（ainews-profile.php で分岐）
   ・動きは body.ai-auanim が付いたときだけ効く。JSが動かなければ
     中身は最初から見えている
   ・色は ainews.css の :root をそのまま使う
   =========================================================== */

/* ★overflow-x:clip が要る。背景の英字と流れる帯はスクロールに合わせて動くので、
   動いた一瞬だけ横スクロールが出ていた（2026-09-03に実測して18px）。
   clip なら hidden と違ってスクロールの箱を作らないので、中の位置指定は壊れない */
.ai-au{max-width:var(--ai-wrap);margin:0 auto;padding:0 24px;color:var(--ai-text);
  font-family:var(--ai-jp);overflow-x:clip;}
.ai-au *{box-sizing:border-box;}

/* 背景に置く大きな英字 */
.ai-au__bg{position:absolute;left:-.06em;top:.1em;z-index:0;pointer-events:none;
  font-family:var(--ai-cond);font-size:clamp(72px,15vw,190px);font-weight:700;
  letter-spacing:-.02em;line-height:.8;color:var(--ai-ink);opacity:.045;
  white-space:nowrap;user-select:none;}
.ai-au__bg--r{left:auto;right:-.06em;}

/* -----------------------------------------------------------
   1. 冒頭
   ----------------------------------------------------------- */
.ai-au__hero{position:relative;padding:56px 0 40px;overflow:hidden;}
.ai-au__net{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.85;}
.ai-au__heroIn{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(230px,26vw,320px);gap:clamp(28px,5vw,64px);
  align-items:center;}

.ai-au__kick{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--ai-accent-ink);}
.ai-au__kick::before{content:"";display:inline-block;width:26px;height:2px;
  background:var(--ai-accent);vertical-align:middle;margin-right:10px;
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.9,.2,1) .1s;}
body:not(.ai-auanim) .ai-au__kick::before,.ai-au__hero.is-in .ai-au__kick::before{transform:scaleX(1);}

.ai-au__name{margin:0;font-size:clamp(46px,8.4vw,96px);font-weight:800;line-height:1.02;
  letter-spacing:-.03em;color:var(--ai-ink);}
.ai-au__name .ai-au__c{display:inline-block;will-change:transform;
  transform:translateY(var(--y,0));transition:transform .3s cubic-bezier(.2,.9,.2,1);}

.ai-au__roles{margin:16px 0 0;min-height:1.9em;font-size:clamp(16px,2.2vw,21px);
  font-weight:800;color:var(--ai-accent-ink);letter-spacing:.01em;}
.ai-au__type::after{content:"";display:inline-block;width:2px;height:1.05em;
  margin-left:4px;background:var(--ai-accent-ink);vertical-align:-.15em;
  animation:ai-au-cur 1s steps(1) infinite;}
@keyframes ai-au-cur{0%,49%{opacity:1}50%,100%{opacity:0}}

.ai-au__lead{margin:22px 0 0;max-width:44em;}
.ai-au__lead p{margin:0 0 12px;font-size:clamp(15px,1.6vw,17px);line-height:2.05;
  color:var(--ai-text);}
.ai-au__lead p:last-child{margin-bottom:0;}

.ai-au__heroBtn{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;}
.ai-au__btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;background:var(--ai-ink);color:#fff;font-size:14.5px;font-weight:800;
  text-decoration:none;position:relative;overflow:hidden;transition:color .25s ease;}
.ai-au__btn::before{content:"";position:absolute;inset:0;background:var(--ai-accent-ink);
  transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.9,.2,1);}
.ai-au__btn:hover::before{transform:translateY(0);}
.ai-au__btn span,.ai-au__btn{position:relative;}
.ai-au__btn::after{content:"→";margin-left:10px;position:relative;z-index:1;
  transition:transform .25s ease;}
.ai-au__btn:hover::after{transform:translateX(5px);}
.ai-au__btn{z-index:0;}
.ai-au__btn > *{position:relative;z-index:1;}
.ai-au__btn--g{background:var(--ai-surface);color:var(--ai-ink);}
.ai-au__btn--g:hover{color:#fff;}

/* 顔写真。枠は直角。中の画像だけがゆっくり動く */
.ai-au__face{margin:0;position:relative;}
.ai-au__face > span{display:block;overflow:hidden;background:var(--ai-surface);
  aspect-ratio:1/1;}
.ai-au__face img{display:block;width:100%;height:112%;object-fit:cover;
  object-position:center 24%;will-change:transform;}
.ai-au__face figcaption{margin:14px 0 0;font-size:15px;font-weight:800;color:var(--ai-ink);}
.ai-au__face figcaption i{display:block;margin:3px 0 0;font-family:var(--ai-num);
  font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.09em;color:var(--ai-muted);}

/* -----------------------------------------------------------
   共通の見出し
   ----------------------------------------------------------- */
/* ★overflow:hidden が要る。背景の大きな英字はスクロールに合わせて左右へ動くので、
   これが無いと動いた瞬間だけ横スクロールが出る（2026-09-03に実測して18px出た） */
.ai-au__sec{position:relative;padding:clamp(52px,7vw,88px) 0 0;overflow:hidden;}
.ai-au__h2{position:relative;z-index:1;margin:0 0 18px;
  font-size:clamp(23px,3.4vw,34px);font-weight:800;letter-spacing:-.01em;
  line-height:1.45;color:var(--ai-ink);}
.ai-au__h2 span{display:inline-block;position:relative;padding:0 0 10px;}
.ai-au__h2 span::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;
  background:var(--ai-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.9,.2,1);}
body:not(.ai-auanim) .ai-au__h2 span::after,.ai-au__h2.is-in span::after{transform:scaleX(1);}

.ai-au__lead2{position:relative;z-index:1;margin:0 0 30px;max-width:52em;
  font-size:clamp(14.5px,1.6vw,16.5px);line-height:2.05;color:var(--ai-text);}
.ai-au__lead2 b{font-family:var(--ai-num);font-size:1.55em;font-weight:800;
  color:var(--ai-accent-ink);letter-spacing:-.02em;}
.ai-au__note{margin:22px 0 0;font-size:13px;line-height:1.9;color:var(--ai-muted);}

/* -----------------------------------------------------------
   2. 数字
   ----------------------------------------------------------- */
.ai-au__facts{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ai-line);
  border-top:1px solid var(--ai-line);border-bottom:1px solid var(--ai-line);}
.ai-au__facts li{background:var(--ai-paper);padding:26px 22px 24px;position:relative;
  transition:background .3s ease;}
.ai-au__facts li::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--ai-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.9,.2,1);}
.ai-au__facts li:hover{background:var(--ai-surface);}
.ai-au__facts li:hover::after{transform:scaleX(1);}
.ai-au__facts b{display:block;font-family:var(--ai-num);font-size:clamp(38px,5.6vw,54px);
  font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--ai-ink);
  font-variant-numeric:tabular-nums;}
.ai-au__facts b i{font-style:normal;font-size:.34em;font-weight:800;margin-left:6px;
  color:var(--ai-accent-ink);letter-spacing:0;}
.ai-au__facts em{display:block;margin:12px 0 4px;font-style:normal;font-size:14.5px;
  font-weight:800;color:var(--ai-ink);line-height:1.6;}
.ai-au__facts small{display:block;font-size:12.5px;line-height:1.75;color:var(--ai-muted);}

/* -----------------------------------------------------------
   3. 導入事例
   ----------------------------------------------------------- */
.ai-au__casesTop{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);
  align-items:center;margin:0 0 30px;}
.ai-au__casesTop .ai-au__lead2{margin:0;}

.ai-au__ring{position:relative;width:clamp(140px,17vw,178px);aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ai-au__ring svg{position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);}
.ai-au__ring circle{fill:none;stroke-width:9;}
.ai-au__ringBg{stroke:var(--ai-chip);}
.ai-au__ringFg{stroke:var(--ai-accent);stroke-linecap:butt;
  stroke-dasharray:358;stroke-dashoffset:358;
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,.9,.2,1);}
.ai-au__ring p{position:relative;margin:0;font-family:var(--ai-num);line-height:1;
  color:var(--ai-ink);font-variant-numeric:tabular-nums;}
.ai-au__ring p b{font-size:clamp(40px,5.6vw,54px);font-weight:800;letter-spacing:-.04em;}
.ai-au__ring p i{font-style:normal;font-size:.42em;font-weight:800;margin-left:2px;
  color:var(--ai-accent-ink);}
.ai-au__ring small{position:relative;margin:8px 0 0;font-size:11.5px;font-weight:700;
  color:var(--ai-muted);letter-spacing:.02em;}

.ai-au__cases{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ai-line);
  border-top:1px solid var(--ai-line);border-bottom:1px solid var(--ai-line);}
.ai-au__cases li{background:var(--ai-paper);padding:24px 22px 26px;position:relative;
  transition:background .3s ease;}
.ai-au__cases li:hover{background:var(--ai-surface);}
.ai-au__caseG{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  color:var(--ai-accent-ink);}
.ai-au__caseW{margin:0 0 16px;font-size:17px;font-weight:800;line-height:1.5;
  color:var(--ai-ink);}

.ai-au__bar{margin:0 0 14px;}
.ai-au__barB,.ai-au__barA{display:flex;align-items:center;gap:9px;position:relative;
  padding:7px 12px;font-size:13px;}
.ai-au__barB{background:var(--ai-chip);color:var(--ai-muted);margin-bottom:5px;}
.ai-au__barA{background:transparent;color:var(--ai-ink);}
.ai-au__barA i{position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--ai-accent);opacity:.28;z-index:0;
  transition:width 1.1s cubic-bezier(.2,.9,.2,1);}
body:not(.ai-auanim) .ai-au__barA i,.ai-au__cases li.is-in .ai-au__barA i{width:var(--w);}
.ai-au__cases li.is-again .ai-au__barA i{width:0;transition:width .18s ease;}
.ai-au__barB span,.ai-au__barA span{flex:0 0 auto;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;opacity:.75;position:relative;z-index:1;}
.ai-au__barB b,.ai-au__barA b{font-family:var(--ai-num);font-size:15px;font-weight:800;
  letter-spacing:-.01em;position:relative;z-index:1;}
.ai-au__barA b{color:var(--ai-accent-ink);}

.ai-au__caseR{margin:0 0 10px;font-family:var(--ai-num);font-size:14px;font-weight:800;
  color:var(--ai-ink);}
.ai-au__caseR b{font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.ai-au__caseR i{font-style:normal;font-size:17px;margin:0 4px 0 1px;}
.ai-au__caseX{margin:0;font-size:12.5px;line-height:1.8;color:var(--ai-muted);}

/* -----------------------------------------------------------
   4. 年表
   ----------------------------------------------------------- */
.ai-au__steps{list-style:none;margin:0;padding:0 0 0 clamp(46px,6vw,72px);position:relative;}
.ai-au__steps::before,.ai-au__steps::after{content:"";position:absolute;
  left:clamp(15px,2vw,25px);top:14px;bottom:14px;width:2px;}
.ai-au__steps::before{background:var(--ai-line);}
.ai-au__steps::after{background:var(--ai-accent);height:var(--p,0%);bottom:auto;
  transition:height .18s linear;}
.ai-au__steps li{position:relative;padding:0 0 clamp(30px,4vw,44px);}
.ai-au__steps li:last-child{padding-bottom:0;}
.ai-au__steps li::before{content:"";position:absolute;
  left:calc(clamp(15px,2vw,25px) - clamp(46px,6vw,72px) - 5px);top:9px;
  width:12px;height:12px;background:var(--ai-paper);
  border:2px solid var(--ai-line);border-radius:50%;
  transition:border-color .3s ease,transform .35s cubic-bezier(.2,.9,.2,1),background .3s ease;}
.ai-au__steps li.is-on::before{border-color:var(--ai-accent);background:var(--ai-accent);
  transform:scale(1.35);}
.ai-au__stepY{display:block;font-family:var(--ai-num);font-size:13px;font-weight:800;
  letter-spacing:.1em;color:var(--ai-muted);margin:0 0 5px;transition:color .3s ease;}
.ai-au__steps li.is-on .ai-au__stepY{color:var(--ai-accent-ink);}
.ai-au__steps h3{margin:0 0 8px;font-size:clamp(17px,2.2vw,20px);font-weight:800;
  line-height:1.55;color:var(--ai-ink);}
.ai-au__steps p{margin:0;font-size:14.5px;line-height:2;color:var(--ai-text);max-width:46em;}

/* -----------------------------------------------------------
   5. できること・道具
   ----------------------------------------------------------- */
.ai-au__skills{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ai-line);
  border-top:1px solid var(--ai-line);border-bottom:1px solid var(--ai-line);}
.ai-au__skills li{background:var(--ai-paper);padding:24px 22px;position:relative;
  overflow:hidden;transition:background .3s ease;}
.ai-au__skills li::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:var(--ai-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.9,.2,1);}
.ai-au__skills li:hover{background:var(--ai-surface);}
.ai-au__skills li:hover::before{transform:scaleX(1);}
.ai-au__skills h3{margin:0 0 9px;font-size:16px;font-weight:800;line-height:1.55;
  color:var(--ai-ink);}
.ai-au__skills p{margin:0;font-size:13.5px;line-height:1.95;color:var(--ai-muted);}

/* ★contain:paint が要る。overflow:hidden だけだと、流れている帯の transform が
   ページの横幅に足されて18pxぶん横スクロールが出た（2026-09-03に実測） */
.ai-au__tools{position:relative;margin:26px 0 0;height:80px;overflow:hidden;contain:paint;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
/* ★行は position:absolute にする。通常の流れに置くと、幅 max-content の
   2,000px超が横スクロールの計算に入って、動いた瞬間だけ横へ動かせてしまった
   （2026-09-03に実測。overflow:hidden も contain も効かなかった） */
.ai-au__toolsRow{position:absolute;left:0;top:0;display:flex;width:max-content;height:36px;
  animation:ai-au-mq 42s linear infinite;}
.ai-au__toolsRow--r{top:44px;animation-duration:52s;animation-direction:reverse;}
.ai-au__toolsRow > span{display:flex;flex:0 0 auto;}
.ai-au__toolsRow i{flex:0 0 auto;display:inline-block;margin-right:8px;padding:0 15px;
  height:36px;line-height:36px;
  background:var(--ai-surface);font-style:normal;font-size:13px;font-weight:700;
  color:var(--ai-muted);white-space:nowrap;font-family:var(--ai-num);
  transition:background .25s ease,color .25s ease;}
.ai-au__tools:hover .ai-au__toolsRow{animation-play-state:paused;}
.ai-au__toolsRow i:hover{background:var(--ai-ink);color:#fff;}
@keyframes ai-au-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -----------------------------------------------------------
   6. マーケティングの下地
   ----------------------------------------------------------- */
.ai-au__mk{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ai-line);
  border-top:1px solid var(--ai-line);border-bottom:1px solid var(--ai-line);}
.ai-au__mk li{background:var(--ai-paper);padding:24px 20px;font-size:13px;
  line-height:1.8;color:var(--ai-muted);transition:background .3s ease;}
.ai-au__mk li:hover{background:var(--ai-surface);}
.ai-au__mk b{display:block;margin:0 0 10px;font-family:var(--ai-num);
  font-size:clamp(32px,4.6vw,44px);font-weight:800;line-height:1;letter-spacing:-.035em;
  color:var(--ai-ink);font-variant-numeric:tabular-nums;}
.ai-au__mk b i{font-style:normal;font-size:.36em;margin-left:5px;color:var(--ai-accent-ink);
  letter-spacing:0;}

/* -----------------------------------------------------------
   7. 記事の内訳
   ----------------------------------------------------------- */
.ai-au__nB{font-size:1.9em;}
.ai-au__cats{list-style:none;margin:0;padding:0;}
.ai-au__cats li{border-bottom:1px solid var(--ai-line);}
.ai-au__cats li:first-child{border-top:1px solid var(--ai-line);}
.ai-au__cats a{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,3fr) 78px;
  gap:16px;align-items:center;padding:13px 8px;text-decoration:none;
  transition:background .25s ease;}
.ai-au__cats a:hover{background:var(--ai-surface);}
.ai-au__catN{font-size:14.5px;font-weight:800;color:var(--ai-ink);}
.ai-au__catB{display:block;height:12px;background:var(--ai-chip);position:relative;}
.ai-au__catB i{position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--ai-accent-ink);transition:width 1.2s cubic-bezier(.2,.9,.2,1);}
body:not(.ai-auanim) .ai-au__catB i,.ai-au__cats li.is-in .ai-au__catB i{width:var(--w);}
.ai-au__catC{text-align:right;font-size:12.5px;color:var(--ai-muted);}
.ai-au__catC b{font-family:var(--ai-num);font-size:19px;font-weight:800;color:var(--ai-ink);
  margin-right:3px;font-variant-numeric:tabular-nums;}

/* -----------------------------------------------------------
   8. 記事一覧の見出し
   ----------------------------------------------------------- */
.ai-au__list{padding-top:clamp(52px,7vw,80px);}
.ai-au__h2--list{margin-bottom:22px;}

/* -----------------------------------------------------------
   9. 最後の導線
   ----------------------------------------------------------- */
.ai-au__end{margin:clamp(56px,7vw,84px) 0 clamp(40px,5vw,64px);
  padding:clamp(38px,5vw,56px) clamp(24px,4vw,48px);background:var(--ai-ink);color:#fff;
  position:relative;overflow:hidden;}
.ai-au__end::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(26,194,241,.4) 0%,rgba(26,194,241,0) 68%);
  animation:ai-au-glow 7s ease-in-out infinite alternate;}
@keyframes ai-au-glow{from{transform:translate(0,0) scale(1)}to{transform:translate(-34px,26px) scale(1.22)}}
.ai-au__endT{position:relative;margin:0 0 10px;font-size:clamp(21px,3vw,29px);font-weight:800;
  letter-spacing:-.01em;}
.ai-au__endD{position:relative;margin:0 0 24px;font-size:14.5px;line-height:1.95;
  color:rgba(255,255,255,.78);max-width:44em;}
.ai-au__endB{position:relative;display:flex;flex-wrap:wrap;gap:12px;}
.ai-au__end .ai-au__btn{background:var(--ai-accent);color:var(--ai-ink);}
.ai-au__end .ai-au__btn::before{background:#fff;}
.ai-au__end .ai-au__btn--g{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
.ai-au__end .ai-au__btn--g:hover{color:var(--ai-ink);}
.ai-au__end .ai-au__btn--g::before{background:#fff;}

/* -----------------------------------------------------------
   動き。body.ai-auanim が付いたときだけ
   ----------------------------------------------------------- */
body.ai-auanim .ai-rise{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.9,.2,1) var(--d,0ms),
             transform .75s cubic-bezier(.2,.9,.2,1) var(--d,0ms);}
body.ai-auanim .ai-rise.is-in{opacity:1;transform:none;}
body.ai-auanim .ai-au__name .ai-au__c{opacity:0;transform:translateY(.5em) rotate(4deg);
  transition:opacity .5s ease var(--d,0ms),transform .6s cubic-bezier(.2,.9,.2,1) var(--d,0ms);}
body.ai-auanim .ai-au__name.is-in .ai-au__c{opacity:1;transform:none;}

/* 読んだところまで伸びる線 */
.ai-au__prog{position:fixed;left:0;top:0;z-index:9999;width:100%;height:3px;
  background:var(--ai-accent);transform:scaleX(var(--sp,0));transform-origin:left;
  pointer-events:none;}

/* -----------------------------------------------------------
   画面が狭いとき
   ----------------------------------------------------------- */
@media (max-width:1024px){
  .ai-au__cases,.ai-au__skills,.ai-au__facts{grid-template-columns:repeat(2,1fr);}
  .ai-au__mk{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .ai-au__casesTop{grid-template-columns:1fr;justify-items:start;gap:20px;}
}
@media (max-width:767px){
  .ai-au{padding:0 16px;}
  .ai-au__hero{padding:34px 0 44px;}
  .ai-au__heroIn{grid-template-columns:1fr;gap:26px;}
  .ai-au__face{order:-1;max-width:190px;}
  .ai-au__name{font-size:clamp(38px,12vw,52px);}
  .ai-au__heroBtn{gap:9px;}
  .ai-au__btn{padding:13px 18px;font-size:13.5px;flex:1 1 auto;}
  .ai-au__cases,.ai-au__skills,.ai-au__facts,.ai-au__mk{grid-template-columns:1fr;}
  .ai-au__facts li,.ai-au__cases li,.ai-au__skills li,.ai-au__mk li{padding:20px 16px;}
  .ai-au__steps{padding-left:38px;}
  .ai-au__steps::before,.ai-au__steps::after{left:12px;}
  .ai-au__steps li::before{left:-32px;}
  .ai-au__cats a{grid-template-columns:minmax(96px,1fr) minmax(0,2fr) 64px;gap:10px;}
  .ai-au__catN{font-size:13px;}
  .ai-au__catC b{font-size:16px;}
  .ai-au__end{padding:30px 20px;}
  .ai-au__ring{width:132px;}
  .ai-au__tools{-webkit-mask-image:none;mask-image:none;}
}

/* 動きを減らす設定のときは止める */
@media (prefers-reduced-motion:reduce){
  .ai-au__toolsRow,.ai-au__end::before{animation:none;}
  .ai-au__ringFg{transition:none;}
  .ai-au__type::after{animation:none;}
  body.ai-auanim .ai-rise{opacity:1;transform:none;transition:none;}
  body.ai-auanim .ai-au__name .ai-au__c{opacity:1;transform:none;}
}