---
// Pixels to Motors の1年（LP。LOG の記事ではない）
// 伝えること：画面の中で AI を使いこなした土台（AI に書かせ・確かめさせ・記録させる進め方）が、ロボットを動かす AI への道になる
// グラフに特化した作り（2026-10-25 エイイチと詰めた）。各セクションの主役はグラフ1枚、文は補助。色は白・青（#1a3fcc）・黒だけ
// 本文（グラフの SVG を含む）は tools/one_year_lp.py が src/data/one-year/body.html に書き出す。見た目の決まりはこのファイルの style
// 数字は 2026-10-25 の時点（10月は25日まで）。入口は TOP（OneYearBanner）
import Base from '../layouts/Base.astro';
import { SITE, AUTHOR, PUBLISHER } from '../lib/seo';
import body from '../data/one-year/body.html?raw';

const path = '/one-year';
const url = SITE + path;
const title = '画面の中で AI を使いこなした土台が、ロボットを動かす AI への道になる ― Pixels to Motors の1年';
const seoTitle = 'Pixels to Motors の1年｜画面の中の AI から、ロボットを動かす AI へ';
const description = '1年で、ロボットは画面の中の絵から、自分で学習させた AI が動かす机の上の実物になった。土台は、AI に書かせ・確かめさせ・記録させる進め方と、省かずに残した作業ログ379本。速さ・見落としの直し・空いた時間をグラフで示した。';
const published = '2026-10-25';
const jsonLd = [
  {
    '@context': 'https://schema.org', '@type': 'Article', headline: title, description, url, mainEntityOfPage: url,
    image: [SITE + '/og/one-year.jpg'], inLanguage: 'ja', datePublished: published, dateModified: published,
    author: AUTHOR, publisher: PUBLISHER,
    about: [{ '@type': 'Thing', name: 'フィジカルAI' }, { '@type': 'Thing', name: 'AIエージェント' }, { '@type': 'Thing', name: 'ロボットアーム' }],
  },
  {
    '@context': 'https://schema.org', '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Pixels to Motors', item: SITE + '/' },
      { '@type': 'ListItem', position: 2, name: 'Pixels to Motors の1年', item: url },
    ],
  },
];
---
<Base title={`${seoTitle} | Pixels to Motors`} description={description} path={path} ogImage="/og/one-year.jpg" ogType="article" published={published} modified={published} jsonLd={jsonLd}>
  <div class="oy" set:html={body} />
  <script is:inline>
    // 図が画面に入ったら .in を付ける（線が伸びる動きの合図）。JS が動かないときは最初から全部見える
    (function () {
      var root = document.querySelector('.oy'); if (!root || !('IntersectionObserver' in window)) return;
      root.classList.add('js');
      var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.35 });
      root.querySelectorAll('.chart').forEach(function (el) { io.observe(el); });
    })();
  </script>
</Base>

<style is:global>
  /* 前・比べる相手は斜めのストライプ（SVG の oy-st-w と同じ：線2px・4px おき・45°） */
  .oy { --oy-st: repeating-linear-gradient(-45deg, #1a3fcc 0 2px, transparent 2px 4px); background: #fff; color: #0a0a0a; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt" 1; line-height: 1.8; overflow-x: clip; }
  .oy a { color: inherit; }
  .oy .w { max-width: 1080px; margin: 0 auto; padding: 0 40px; box-sizing: content-box; }
  .oy .ph { display: inline-block; max-width: 100%; }
  /* 見出しの改行（\n）は広い画面だけ。狭い画面では文節（.ph）の間で折り返す */
  @media (max-width: 760px) { .oy br.pc { display: none; } }
  .oy .sec { padding: 96px 0; }
  .oy .blue { background: #1a3fcc; color: #fff; }
  /* 矢印はすべて Inter の「→」（細い線＋開いた矢じり）にそろえる */
  .oy .arw { font-family: Inter, sans-serif; font-weight: 400; }
  .oy .cta .arw { font-size: 24px; line-height: 1; }
  .oy .k { display: flex; gap: 16px; align-items: baseline; font: 500 12px/1 Inter, sans-serif; letter-spacing: .08em; color: #6b6f78; }
  .oy .blue .k { color: #c9d6ff; }
  .oy .k b { font: 500 26px/1 Inter, sans-serif; letter-spacing: 0; color: #1a3fcc; }
  .oy .blue .k b { color: #fff; }
  .oy h1 { margin: 0; font-size: 52px; line-height: 1.3; font-weight: 700; max-width: 960px; word-break: auto-phrase; }
  .oy h2 { margin: 16px 0 0; font-size: 30px; line-height: 1.45; font-weight: 700; max-width: 900px; word-break: auto-phrase; text-wrap: pretty; }
  .oy h2.cta-h { font-size: 38px; }
  /* 最後の CTA：青の面に、配膳ロボットの店と搬送ロボットの病院の画像（左右に並べ、白黒・黒を持ち上げて文字が読める濃さ。public/site/sim の2枚から作る）を乗算で重ねる。写真の白い所は青のまま、暗い所だけ濃くなる */
  .oy .cta-sec { background: #1a3fcc url(/site/oy/cta-bg.jpg?v=2) center / cover no-repeat; background-blend-mode: multiply; padding: 140px 0; }
  /* 文字の塊だけを中央に置き、塊の中は左ぞろえのまま */
  .oy .cta-in { width: fit-content; max-width: 860px; margin: 0 auto; }
  .oy .note { margin: 0; font-size: 13px; line-height: 1.8; color: #6b6f78; max-width: 720px; }
  .oy .blue .note { color: #c9d6ff; }
  .oy .note.sub { margin-top: 10px; }
  .oy .chart { margin: 40px 0 0; }
  .oy .src { margin: 24px 0 0; font: 500 12px Inter, 'Noto Sans JP', sans-serif; color: #6b6f78; }
  .oy .blue .src { color: #c9d6ff; }
  .oy .src a, .oy .lk { text-decoration: underline; text-underline-offset: 3px; }
  .oy .src a + a { margin-left: 2px; }

  /* 最初の画面：土台の帯と、前とあと */
  .oy .fv { padding-top: 88px; padding-bottom: 96px; }
  .oy .base { margin-top: 40px; background: #1a3fcc; color: #fff; padding: 32px 40px 36px; }
  .oy .btop { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
  .oy .bx { display: flex; flex-direction: column; gap: 6px; }
  .oy .bl { font: 600 12px Inter, sans-serif; letter-spacing: .12em; color: #c9d6ff; }
  .oy .bl .bd { margin-left: 20px; letter-spacing: .06em; color: #fff; }
  .oy .bt { font-size: 26px; font-weight: 700; line-height: 1.4; }
  .oy .bs { font-size: 13px; color: #dbe4ff; }
  .oy .bn { font: 600 72px/1 Inter, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
  .oy .bn small { font: 700 16px 'Noto Sans JP', sans-serif; margin-left: 6px; }
  @property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
  .oy .cnt { --n: 379; counter-reset: n var(--n); animation: oy-count 2.27s linear .3s both; }
  .oy .cnt::after { content: counter(n); }
  @keyframes oy-count { from { --n: 0; } to { --n: 379; } }
  /* 土台の帯：毎日の本数の縦線。数字（0→379）と同じ速さで左から現れる */
  .oy .beat { margin-top: 28px; }
  .oy .beat svg { display: block; animation: oy-wipe 2.27s linear .3s both; }
  @keyframes oy-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .oy .bax { position: relative; height: 24px; margin-top: 8px; border-top: 2px solid #fff; font: 500 12px Inter, sans-serif; color: #c9d6ff; }
  .oy .bax span { position: absolute; top: 6px; white-space: nowrap; }
  @keyframes oy-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .oy .lg { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 48px 0 12px; }
  .oy .lead { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; }
  .oy .legend { display: flex; gap: 24px; flex: none; font: 500 13px Inter, sans-serif; color: #6b6f78; }
  .oy .legend span { display: inline-flex; align-items: center; gap: 8px; }
  .oy .legend i { display: inline-block; width: 12px; height: 12px; background: var(--oy-st); }
  .oy .legend span.a i { background: #1a3fcc; }
  .oy .legend span.a { color: #0a0a0a; font-weight: 600; }
  .oy .row { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; padding: 18px 0; border-top: 1px solid #e9ebf0; }
  .oy .lg + .row { border-top: 1px solid #0a0a0a; }
  .oy .lab { font-size: 15px; font-weight: 700; line-height: 1.6; }
  .oy .lk { display: block; margin-top: 2px; font: 500 11px Inter, sans-serif; color: #6b6f78; }
  .oy .bars { display: flex; flex-direction: column; gap: 6px; }
  .oy .bar { display: flex; align-items: center; gap: 14px; }
  .oy .bar i { display: block; height: 14px; background: var(--oy-st); flex: none; max-width: 62%; transform-origin: left center; animation: oy-grow .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d); }
  .oy .bar.a i { height: 22px; background: #1a3fcc; }
  .oy .bar i.z { width: 2px; background: #1a3fcc; }
  @keyframes oy-grow { from { transform: scaleX(0); } to { transform: none; } }
  .oy .v { white-space: nowrap; display: flex; align-items: baseline; gap: 2px; }
  .oy .v b { font: 500 15px Inter, sans-serif; color: #6b6f78; }
  .oy .bar.a .v b { font: 600 30px/1 Inter, sans-serif; color: #1a3fcc; letter-spacing: -.01em; }
  .oy .v small { font-size: 12px; font-weight: 700; color: #6b6f78; margin-right: 12px; }
  .oy .bar.a .v small { color: #1a3fcc; font-size: 14px; }
  .oy .v em { font-style: normal; font-size: 12px; color: #6b6f78; }
  .oy .row { --d: 2.6s; }
  /* 03：線が左から伸び、点と数字が線の到着に合わせて出る */
  .oy.js .chart .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .oy.js .chart.in .ln { animation: oy-draw 1.8s cubic-bezier(.4,0,.2,1) .2s forwards; }
  @keyframes oy-draw { to { stroke-dashoffset: 0; } }
  .oy.js .chart .pt { opacity: 0; }
  .oy.js .chart.in .pt { animation: oy-fade .4s ease-out forwards; animation-delay: var(--t); }
  @keyframes oy-fade { to { opacity: 1; } }
  /* 04：塗りの棒が前の長さ（枠いっぱい）から、いまの長さまで縮む */
  .oy .shr { transform-box: fill-box; transform-origin: left center; }
  .oy.js .chart .shr { transform: scaleX(var(--s)); }
  .oy.js .chart.in .shr { animation: oy-shrink 1.4s cubic-bezier(.6,0,.2,1) .4s forwards; }
  @keyframes oy-shrink { from { transform: scaleX(var(--s)); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .oy.js .chart .ln { stroke-dashoffset: 0; animation: none !important; } .oy.js .chart .pt { opacity: 1; animation: none !important; } .oy.js .chart .shr { transform: none; animation: none !important; } }
  @media (prefers-reduced-motion: reduce) { .oy .beat svg, .oy .bar i, .oy .cnt { animation: none !important; opacity: 1; } }

  /* 数字の列・失敗の3列・写真 */
  .oy .stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #0a0a0a; margin-top: 40px; }
  .oy .blue .stats { border-top-color: #fff; }
  .oy .st { padding: 24px 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
  .oy .st + .st { padding-left: 24px; border-left: 1px solid #e9ebf0; }
  .oy .blue .st + .st { border-left-color: #ffffff30; }
  .oy .sn { font: 500 60px/1 Inter, sans-serif; letter-spacing: -.03em; }
  .oy .sn small { font: 700 15px 'Noto Sans JP', sans-serif; letter-spacing: 0; margin: 0 3px; }
  .oy .sl { font-size: 13px; font-weight: 700; }
  .oy .two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
  /* 08 の動画2本：机の上のロボットと、3Dの店舗の導入シミュレーションを並べる */
  .oy .media { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
  .oy .media figure { margin: 0; }
  .oy .photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #e9ebf0; }
  .oy .media figcaption { margin-top: 14px; font-size: 13px; line-height: 1.8; color: #6b6f78; }
  .oy .media figcaption b { display: block; margin-bottom: 4px; font-size: 14px; color: #0a0a0a; }
  .oy .media figcaption a { display: inline-block; margin-left: 6px; color: #1a3fcc; font-weight: 700; }
  .oy .media figcaption a::after { content: ' →'; font-family: Inter, sans-serif; font-weight: 400; }
  @media (max-width: 760px) { .oy .media { grid-template-columns: 1fr; gap: 36px; } }
  .oy .less { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #fff; margin-top: 8px; }
  .oy .less > div { padding: 28px 28px 0 0; }
  .oy .less > div + div { padding-left: 28px; border-left: 1px solid #ffffff30; }
  .oy .ln { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #fff; color: #1a3fcc; font: 600 14px Inter, sans-serif; margin-right: 12px; }
  .oy .ld { font: 500 13px Inter, sans-serif; color: #c9d6ff; }
  .oy .lw { margin: 16px 0 0; font-size: 14px; color: #e3eaff; }
  .oy .lr { margin: 12px 0 0; font-size: 16px; font-weight: 700; }
  .oy .cta { display: inline-flex; align-items: center; gap: 24px; height: 64px; padding: 0 40px; background: #fff; color: #1a3fcc; font: 700 17px 'Noto Sans JP', sans-serif; text-decoration: none; margin-top: 48px; transition: background .15s; }
  .oy .cta:hover { background: #e3eaff; }

  /* 幅の狭い画面：グラフは横にずらして見る（字が小さくなりすぎないよう、720px より縮めない） */
  @media (max-width: 760px) {
    .oy .w { padding: 0 20px; }
    .oy .sec { padding: 64px 0; }
    .oy .fv { padding-top: 72px; padding-bottom: 64px; }
    .oy h1 { font-size: 30px; }
    .oy h2 { font-size: 22px; }
    .oy h2.cta-h { font-size: 24px; }
    /* 横にずらして見る。上下は図の外にはみ出す数字（01 の 59 など）が切れないよう 24px ずつ空ける */
    .oy .chart { overflow-x: auto; margin: 16px -20px -24px; padding: 24px 20px; }
    .oy .chart svg { min-width: 720px; }
    .oy .base { padding: 24px 20px 24px; }
    .oy .btop { flex-direction: column; align-items: flex-start; gap: 12px; }
    .oy .bt { font-size: 19px; }
    .oy .bn { font-size: 56px; }
    .oy .beat svg { height: 80px; }
    .oy .bax .j { display: none; } /* 狭い画面では「1」が「2025.12」に重なるので出さない */
    .oy .lg { flex-direction: column; gap: 12px; }
    .oy .lead { font-size: 17px; }
    .oy .row { grid-template-columns: 1fr; gap: 10px; }
    .oy .bar i { max-width: 48%; }
    .oy .bar.a .v b { font-size: 24px; }
    .oy .v em { display: none; }
    .oy .stats, .oy .less, .oy .two { grid-template-columns: 1fr; }
    .oy .st + .st, .oy .less > div + div { padding-left: 0; border-left: 0; border-top: 1px solid #e9ebf0; margin-top: 20px; padding-top: 20px; }
    .oy .blue .st + .st, .oy .less > div + div { border-top-color: #ffffff30; }
    .oy .sn { font-size: 48px; }
  }
</style>
