@charset "UTF-8";
/* ==========================================================================
   TOKIARI — 商品ページ（products/*.html）
   style.css のトークン（配色・書体）を前提にした追加スタイル。
   バージョン一覧まわりは、誌面のグレーに対して「ほぼ白」の面で読ませます。
   ========================================================================== */

:root{
  --paper:      #fbfbfc;   /* 一覧の地（ほぼ白） */
  --paper-deep: #ffffff;   /* 開いたときの面 */
  --rule:       #e3e3e6;
  --ink-soft:   #6b6a6e;
}

.page-product{ display:block; min-height:100svh; }
.page-product main{ display:block; }

/* ---------- header ---------- */
/* ロゴ・タイトル・メニューは style.css の共通ヘッダー。ここではスクロール時の固定だけ */
.page-product .site-header{ position:sticky; top:0; z-index:20; background:var(--bg); }

/* ---------- 共通レイアウト ---------- */
.product{
  width:100%; max-width:1080px; margin:0 auto;
  padding:20px calc(16px + env(safe-area-inset-right)) 40px calc(16px + env(safe-area-inset-left));
}

/* ---------- hero ---------- */
.hero{ display:grid; gap:20px; margin-bottom:30px; }
.hero__photo{ margin:0; }
.hero__link{ display:block; text-decoration:none; position:relative; }
.hero__link::after{
  content:"最新バージョンの商品ページへ →";
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.06em; white-space:nowrap;
  background:rgba(255,255,255,.92); color:var(--ink);
  padding:7px 14px; border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  opacity:0; transition:opacity .18s;
}
.hero__link:hover::after, .hero__link:focus-visible::after{ opacity:1; }
@media (hover:none){ .hero__link::after{ opacity:1; } }
.hero__photo img{
  display:block; width:100%; height:auto;
  background:var(--paper);
  border:1px solid rgba(255,255,255,.65);
  border-radius:10px;
}
.hero__art{ display:none; }
.hero__art--only{ display:block; }
.hero__art .lineart{ max-height:430px; width:auto; max-width:100%; }
.hero__photo.is-fallback img{ display:none; }
.hero__photo.is-fallback .hero__art{ display:block; }
.hero__photo .lineart{
  display:block; width:100%; max-width:300px; height:auto; margin:8px auto 4px;
  color:var(--ink);
}
.hero__photo .lineart path{ fill:currentColor; }
.hero__photo .lineart path[fill="#cccacd"]{ fill:var(--bg); }
.hero__photo .cap-art{ display:none; }
.hero__photo.is-fallback .cap-photo{ display:none; }
.hero__photo.is-fallback .cap-art{ display:inline; }
.hero__photo figcaption{
  margin-top:8px; font-size:10px; line-height:1.6; color:var(--ink-mute); text-align:center;
}

.hero__name{
  font-family:var(--serif);
  font-size:26px; font-weight:400; letter-spacing:.16em; margin:0 0 6px;
}
/* 商品名＋右側のボタン（シャツチャート掲載の商品だけ「SHIRT CHART で見る」） */
.hero__titlebar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px;
  margin:0 0 6px;
}
.hero__titlebar .hero__name{ margin:0; }
.chartlink{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:8px 14px 8px 11px; border-radius:999px;
  border:1px solid var(--ink); background:rgba(255,255,255,.35);
  color:var(--ink); text-decoration:none;
  font-family:var(--serif); font-size:11px; letter-spacing:.14em; white-space:nowrap;
  transition:background .18s, color .18s;
}
.chartlink:hover, .chartlink:focus-visible{ background:var(--ink); color:#f2f1f2; }
/* チャートの十字軸を模したアイコン */
.chartlink__icon{
  position:relative; width:14px; height:14px; flex:0 0 14px;
}
.chartlink__icon::before, .chartlink__icon::after{
  content:""; position:absolute; background:currentColor;
}
.chartlink__icon::before{ left:6.5px; top:0; width:1px; height:14px; }
.chartlink__icon::after{ top:6.5px; left:0; height:1px; width:14px; }
.hero__feature{
  font-family:var(--serif);
  font-size:11px; letter-spacing:.12em; line-height:1.6;
  color:#4a494c; margin:0 0 12px;
}
.hero__tags{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.hero__spec{ margin:0 0 16px; }
.hero__spec > div{
  display:flex; gap:12px; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.5);
  font-size:12px; line-height:1.6;
}
.hero__spec dt{ flex:0 0 7.5em; color:var(--ink-mute); margin:0; }
.hero__spec dd{ margin:0; }
.hero__desc{
  font-size:12.5px; line-height:1.9; color:#3a393c; margin:0 0 18px; white-space:pre-wrap;
}

/* ---------- 最新バージョンの購入導線 ---------- */
.latest{
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
  padding:14px;
}
.latest__head{
  font-family:var(--serif); font-size:11px; letter-spacing:.12em;
  color:#3a393c; margin:0 0 10px;
}
.latest__sub{ font-size:10.5px; line-height:1.7; color:var(--ink-soft); margin:-4px 0 10px; }
.latest__links{ display:grid; gap:8px; }
.latest__none{ font-size:11.5px; line-height:1.7; color:var(--ink-soft); margin:0; }

/* ---------- 大きい商品ページリンク ---------- */
.shoplink{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px;
  border:1px solid var(--ink); border-radius:10px;
  background:var(--ink); color:#f4f3f4; text-decoration:none;
  transition:background .16s, transform .1s;
}
.shoplink:hover{ background:#000; }
.shoplink:active{ transform:scale(.995); }
.shoplink__label{ font-size:13px; letter-spacing:.04em; }
.shoplink__cta{
  font-family:var(--serif); font-size:11px; letter-spacing:.1em; white-space:nowrap; opacity:.85;
}
.shoplink--lg{ padding:15px 18px; }
.shoplink--lg .shoplink__label{ font-size:14px; }
.shoplink.is-off{
  background:transparent; color:var(--ink-soft);
  border:1px dashed var(--rule); cursor:default;
}

/* ==========================================================================
   バージョン一覧
   ========================================================================== */
.vsection{ margin:0 0 34px; }
.vsection__head{ margin:0 0 12px; }
.vsection h2{
  font-family:var(--serif); font-size:15px; font-weight:400; letter-spacing:.14em; margin:0 0 5px;
}
.vsection__note{ font-size:11px; line-height:1.6; color:var(--ink-mute); margin:0; }

.vtable{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:12px;
  overflow:hidden;
}

/* 見出し行と各行で同じグリッドを使う */
.vhead, .vrow__sum{
  display:grid;
  /* em は要素ごとの font-size で変わるため、見出し行と本体で揃うよう rem を使う */
  grid-template-columns:4.4rem repeat(5, 1fr) 0.8rem;
  align-items:center;
  gap:2px;
  padding:10px 12px;
}
.vhead{
  background:#f2f2f4;
  border-bottom:1px solid var(--rule);
  font-family:var(--serif);
  font-size:9px; letter-spacing:.06em; line-height:1.35;
  color:var(--ink-soft);
}
.vhead__ver{ letter-spacing:.1em; }
.vhead__col{ text-align:center; }
.vhead__date, .vhead__count, .vrow__date, .vrow__count{ display:none; }

.vrow{ border-bottom:1px solid var(--rule); background:var(--paper); }
.vrow:last-child{ border-bottom:none; }
.vrow__sum{
  cursor:pointer; list-style:none;
  background:var(--paper-deep);
  transition:background .14s;
}
.vrow__sum::-webkit-details-marker{ display:none; }
.vrow__sum:hover{ background:#f6f6f8; }
.vrow__sum:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.vrow__ver{
  font-family:var(--serif); font-size:15px; letter-spacing:.03em; color:var(--ink);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.vmark{
  text-align:center; font-size:13px; color:var(--rule); line-height:1;
}
.vmark.is-on{ color:var(--ink); }
.vrow__chev{
  width:9px; height:9px; justify-self:end;
  border-right:1.4px solid #9a999d; border-bottom:1.4px solid #9a999d;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s;
}
.vrow[open] .vrow__chev{ transform:rotate(-135deg) translate(-2px,-2px); }
.vrow[open] .vrow__sum{ background:#f2f2f4; }
.badge{
  font-family:var(--sans); font-size:8.5px; letter-spacing:.04em;
  padding:2px 6px; border-radius:999px; background:var(--ink); color:#f2f1f2;
}

/* ---------- 開いた中身 ---------- */
.vrow__panel{
  background:var(--paper-deep);
  border-top:1px solid var(--rule);
  padding:4px 12px 14px;
  display:grid; gap:14px;
}
.vitem{
  padding-top:14px;
  border-top:1px solid var(--rule);
  display:grid; gap:12px;
}
.vitem:first-child{ border-top:none; }
.vitem__fabric{
  font-family:var(--serif); font-size:13px; letter-spacing:.1em; margin:0;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.vitem__fabric span{ font-size:9.5px; letter-spacing:.08em; color:var(--ink-soft); }
.vitem__spec{ margin:0; display:grid; gap:4px; }
.vitem__spec > div{ display:flex; gap:10px; font-size:12px; line-height:1.6; }
.vitem__spec dt{ flex:0 0 5em; color:var(--ink-soft); margin:0; }
.vitem__spec dd{ margin:0; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; }

.vitem__head{
  font-family:var(--serif); font-size:9.5px; letter-spacing:.14em;
  color:var(--ink-soft); margin:0 0 6px;
}
.vitem__links{ display:grid; gap:7px; }
.diff__note{ font-size:12px; line-height:1.7; margin:0 0 6px; }
.diff__chips{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 6px; }
.chip{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:11px; padding:4px 9px;
  border:1px solid var(--rule); border-radius:999px; background:#f5f5f7;
}
.chip__sub{ font-size:9.5px; color:var(--ink-soft); }
.diff__from{ font-size:9.5px; color:var(--ink-soft); margin:0; }
.diff__empty{ font-size:11px; color:var(--ink-soft); margin:0; }
.diff__empty span{ font-size:10px; }

.vfoot{
  font-size:10px; line-height:1.7; color:var(--ink-mute); margin:10px 2px 0;
}

/* ---------- 他商品へのナビ ---------- */
.prodnav{ margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.6); }
.prodnav__head{
  font-family:var(--serif); font-size:10px; letter-spacing:.16em;
  color:var(--ink-mute); margin:0 0 10px;
}
.prodnav ul{ list-style:none; margin:0; padding:0; display:flex; gap:7px; flex-wrap:wrap; }
.prodnav a{
  display:inline-block;
  font-family:var(--serif); font-size:11px; letter-spacing:.1em;
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(28,28,30,.28);
  color:var(--ink); text-decoration:none;
}
.prodnav a:hover{ background:rgba(255,255,255,.5); }
/* チャートへ戻る／ショップで探す（文字リンク） */
.prodnav .prodnav__links{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px;
  margin:22px 0 0; font-size:12px;
}
.prodnav .prodnav__links a{
  border:0; border-radius:0; padding:4px 0;
  font-family:var(--sans); letter-spacing:.04em;
  text-decoration:underline; text-underline-offset:3px;
}
.prodnav .prodnav__links a:hover{ background:none; }

/* ---------- 広い画面 ---------- */
@media (min-width:760px){
  .hero{ grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:30px; align-items:start; }
  .hero__name{ font-size:32px; }
  .latest__links{ grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }

  .vhead, .vrow__sum{
    grid-template-columns:5.5rem repeat(5, 4.6rem) 1fr 4.4rem 0.9rem;
    gap:6px; padding:12px 16px;
  }
  .vhead{ font-size:9.5px; }
  .vhead__date, .vhead__count{ display:block; text-align:right; }
  .vhead__count{ text-align:right; }
  .vrow__date, .vrow__count{
    display:block; font-size:11px; color:var(--ink-soft); text-align:right;
  }
  .vrow__count.is-off{ color:var(--rule); }
  .vrow__ver{ font-size:17px; }
  .vrow__panel{ padding:6px 16px 18px; }
  .vitem{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);
    align-items:start; gap:22px;
  }
  .vitem__fabric{ grid-column:1 / -1; }
  .vitem__links{ align-self:start; }
}
@media (min-width:1000px){
  .product{ padding:28px 28px 56px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}