@charset "UTF-8";
/* ==========================================================================
   TOKIARI — FASHION IMAGE CHART (SHIRT)
   静的サイト用スタイル。カタログ誌面（P.31）の配色・書体感を踏襲しています。
   ========================================================================== */

:root{
  --bg:        #cccacd;   /* 誌面の地色 */
  --bg-deep:   #c3c1c4;
  --ink:       #1c1c1e;   /* 線画・本文 */
  --ink-mute:  #5d5c60;
  --line:      #ffffff;   /* 軸の白線 */
  --accent:    #ffffff;
  --card:      rgba(255,255,255,.34);
  --shadow:    0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);

  --serif: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  --header-h: 58px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  display:flex;
  flex-direction:column;
  min-height:100svh;
}

/* ---------- header（全ページ共通）----------
   左：TOKIARIロゴ（/products/ へのリンク）＋ PRODUCTS ／ ページ名
   右：ハンバーガーメニュー（中身は assets/js/header.js が組み立てる） */
.site-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:var(--header-h);
  padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(10px + env(safe-area-inset-right));
  border-bottom:1px solid rgba(255,255,255,.5);
}
.brand{ flex:0 0 auto; display:block; line-height:0; }
.brand img{ display:block; height:18px; width:auto; }
.site-header__title{
  flex:1 1 auto; min-width:0;
  padding-left:12px;
  border-left:1px solid rgba(28,28,30,.25);
}
.site-header__sub{
  margin:0 0 2px;
  font-family:var(--serif);
  font-size:9px;
  letter-spacing:.24em;
  color:var(--ink-mute);
  line-height:1.2;
}
.site-header__name{
  margin:0;
  font-family:var(--serif);
  font-size:14px;
  font-weight:400;
  letter-spacing:.16em;
  line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ハンバーガーボタン */
.menu-btn{
  flex:0 0 auto;
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:44px; height:44px; margin-left:auto; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:var(--ink);
}
.menu-btn span{
  display:block; width:22px; height:1px; background:currentColor;
  transition:transform .2s, opacity .2s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.menu-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* メニュー本体（右から出るパネル） */
.site-menu{ position:fixed; inset:0; z-index:100; }
.site-menu[hidden]{ display:none; }
.site-menu__backdrop{ position:absolute; inset:0; background:rgba(28,28,30,.32); }
.site-menu__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(320px, 86vw);
  background:var(--bg);
  box-shadow:-8px 0 24px rgba(0,0,0,.12);
  padding:calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 24px 24px;
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.site-menu__close{
  align-self:flex-end;
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:44px; height:44px; margin-right:-10px;
  font-size:22px; line-height:1; color:var(--ink);
}
/* 開いたときに自動でフォーカスするため、マウス操作では枠を出さずキーボード操作時だけ細く出す */
.site-menu__close:focus{ outline:none; }
.site-menu__close:focus-visible{ outline:1px solid var(--ink); outline-offset:-6px; }
.site-menu__list{ list-style:none; margin:8px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.6); }
.site-menu__list li{ border-bottom:1px solid rgba(255,255,255,.6); }
.site-menu__list a{
  display:block; padding:14px 4px;
  color:var(--ink); text-decoration:none;
  font-family:var(--serif); font-size:13px; letter-spacing:.16em;
}
.site-menu__list a span{
  display:block; margin-top:3px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.06em; color:var(--ink-mute);
}
.site-menu__list a:hover, .site-menu__list a[aria-current="page"]{ background:rgba(255,255,255,.28); }
.site-menu__list a[aria-current="page"]::after{ content:"・現在のページ"; font-family:var(--sans); font-size:10px; letter-spacing:0; color:var(--ink-mute); }
.site-menu__top{ margin:auto 0 0; padding-top:24px; font-size:12px; }
.site-menu__top a{ color:var(--ink); text-underline-offset:3px; }
body.is-menu-open{ overflow:hidden; }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:4px; flex:0 0 auto; }
.tab{
  appearance:none;
  border:1px solid rgba(28,28,30,.28);
  background:transparent;
  color:var(--ink);
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.16em;
  padding:7px 13px;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.tab:hover{ border-color:rgba(28,28,30,.55); }
.tab.is-active{ background:var(--ink); color:#f2f1f2; border-color:var(--ink); }
.tab:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* パンくずリスト（All Product list ＞ シリーズ ＞ 品番） */
.breadcrumb{
  padding:10px calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  max-width:1080px; margin:0 auto;
}
.breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 0;
  font-size:11px; letter-spacing:.04em; color:var(--ink-mute);
}
.breadcrumb li{ display:flex; align-items:center; min-width:0; }
.breadcrumb li + li::before{ content:"›"; margin:0 8px; color:var(--ink-mute); }
.breadcrumb a{ color:var(--ink); text-underline-offset:3px; }
.breadcrumb [aria-current="page"]{ overflow-wrap:anywhere; }

/* 発売予定の印（全商品一覧・シリーズ・品番ページ共通） */
.badge-soon{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:var(--ink); color:#f2f1f2; font-size:10px; letter-spacing:.06em; vertical-align:1px;
  white-space:nowrap;
}

/* チャートの MAP / LIST 切り替え（ヘッダー直下の帯） */
.viewbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));
}
.viewbar__label{
  margin:0; font-family:var(--serif); font-size:10px; letter-spacing:.2em; color:var(--ink-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- views ---------- */
main{ flex:1 1 auto; min-height:0; display:flex; }
.view{ display:none; flex:1 1 auto; min-height:0; width:100%; }
.view.is-active{ display:flex; }

/* ---------- map ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  touch-action:none;             /* 独自のピンチ／パンを使うため */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:grab;
}
.stage.is-panning{ cursor:grabbing; }
#chart{ display:block; width:100%; height:100%; }

/* SVG 内の要素 */
/* vector-effect により、拡大しても軸線の太さは一定（地図の道路と同じ考え方） */
.axis-line{ stroke:var(--line); stroke-width:.8; vector-effect:non-scaling-stroke; }
.axis-rule{ stroke:var(--line); stroke-width:.8; vector-effect:non-scaling-stroke; }
.lbl{
  font-family:var(--serif);
  fill:var(--ink);
  letter-spacing:.9px;
}
.lbl--major{ font-size:6.2px; letter-spacing:1.1px; }
.lbl--axisend{ letter-spacing:.45px; }   /* 横軸の両端（FITTED / VOLUME）だけ字間を詰める */
.lbl--band { font-size:5.2px; letter-spacing:.85px; fill:#4a494c; }
.lbl--jp   { font-size:4.4px; letter-spacing:.5px; fill:#4a494c; font-family:var(--serif); }
.lbl--name { font-size:5.8px; letter-spacing:1px; }

.shirt path{ fill:var(--ink); }
.shirt path.shirt__mask{ fill:var(--bg); }   /* 軸線をヌく図形（誌面と同じ処理） */
.shirt__hit{ fill:transparent; }
.shirt__ring{
  fill:none; stroke:rgba(28,28,30,.0); stroke-width:1; vector-effect:non-scaling-stroke; rx:3;
  transition:stroke .18s;
}
.shirt{ cursor:pointer; }
.shirt:hover .shirt__ring,
.shirt:focus-visible .shirt__ring{ stroke:rgba(28,28,30,.5); }
.shirt:focus{ outline:none; }
.shirt:focus-visible .shirt__hit{ fill:rgba(255,255,255,.28); }
.shirt:active .shirt__hit{ fill:rgba(255,255,255,.34); }

/* ---------- zoom controls ---------- */
.zoom{
  position:absolute;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:6px;
}
.zoom__btn{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid rgba(28,28,30,.18);
  border-radius:50%;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--ink);
  font-size:17px; line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .15s, transform .1s;
}
.zoom__btn:hover{ background:rgba(255,255,255,.85); }
.zoom__btn:active{ transform:scale(.94); }
.zoom__btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- hint ---------- */
.hint{
  position:absolute;
  left:calc(12px + env(safe-area-inset-left));
  bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:min(calc(100% - 84px), 330px);
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:10.5px; line-height:1.65;
  color:#3a393c;
  text-align:left;
  box-shadow:var(--shadow);
  transition:opacity .5s;
  pointer-events:none;
}
.hint.is-hidden{ opacity:0; }

/* ---------- list ---------- */
.view--list{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex-direction:column; }
.list-note{
  margin:0 auto;
  padding:16px calc(16px + env(safe-area-inset-left)) 0 calc(16px + env(safe-area-inset-right));
  max-width:1080px;
  width:100%;
  font-size:11px; line-height:1.7; color:#4a494c;
}
.cards{
  list-style:none;
  margin:0 auto;
  padding:12px calc(16px + env(safe-area-inset-right)) 28px calc(16px + env(safe-area-inset-left));
  width:100%;
  max-width:1080px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.cards > li{ display:flex; }
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  text-decoration:none;
  color:inherit;
  background:var(--card);
  border:1px solid rgba(255,255,255,.55);
  border-radius:10px;
  padding:14px 12px 12px;
  transition:transform .16s, background .16s, box-shadow .16s;
}
.card:hover{ background:rgba(255,255,255,.6); transform:translateY(-2px); box-shadow:var(--shadow); }
.card:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.card__fig{ height:112px; display:grid; place-items:center; margin-bottom:10px; }
.card__fig svg{ height:100%; width:auto; max-width:100%; color:var(--ink); }
.card__fig svg path{ fill:currentColor; }
.card__name{
  font-family:var(--serif);
  font-size:12px; letter-spacing:.14em;
  text-align:center;
  margin:0 0 8px;
}
.card__tags{
  display:flex; justify-content:center; align-items:flex-start; gap:5px; flex-wrap:wrap;
  margin:0 0 10px;
  min-height:20px;
}
.tag{
  font-family:var(--serif);
  font-size:9px; letter-spacing:.1em;
  padding:3px 7px;
  border:1px solid rgba(28,28,30,.25);
  border-radius:999px;
  color:#4a494c;
  white-space:nowrap;
}
.meter{ margin-top:auto; padding-top:2px; }
.meter__scale{
  position:relative;
  height:1px;
  background:rgba(255,255,255,.9);
  margin:0 2px 6px;
}
.meter__dot{
  position:absolute; top:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--ink);
}
.meter__ends{
  display:flex; justify-content:space-between;
  font-family:var(--serif);
  font-size:8px; letter-spacing:.08em;
  color:#5d5c60;
}
.card__go{
  margin-top:10px;
  text-align:center;
  font-size:10px; letter-spacing:.08em;
  color:#3a393c;
}
.card__go::after{ content:" →"; }

/* ---------- footer ---------- */
.site-footer{
  flex:0 0 auto;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.5);
  font-size:10.5px; line-height:1.6;
  color:#4a494c;
  text-align:center;
}
.site-footer p{ margin:0; }
.site-footer a{ color:#3a393c; }

@media (max-width:400px){
  .brand img{ height:14px; }
  .site-header{ gap:10px; }
  .site-header__title{ padding-left:10px; }
  .site-header__name{ font-size:12.5px; letter-spacing:.1em; }
  .cards{ grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); }
  .card__fig{ height:96px; }
}
@media (min-width:900px){
  :root{ --header-h:64px; }
  .site-header{ padding:12px 18px 12px 28px; gap:18px; }
  .brand img{ height:22px; }
  .site-header__title{ padding-left:18px; }
  .site-header__name{ font-size:16px; }
}

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