/* =====================================================================================
   J Claw Studio TOP — v4+／v5+ の層（決裁 I-5〜I-7・C-7・2026-09-26 着手・提案中）
   v4（top.css）にも v5（top-v5.css）にも重ねられる 2 つのモジュール。文字の書体・大きさの多くは下の版に任せ、ここでは組み方を変える。
     I-6  Pack ツアー … payn.io の型。左の 5 画面が縦にスクロールし、右の説明は張り付いたまま中央の画面に合わせて切り替わる（901px 以上）
     I-7  ニュース   … newpeace.jp の「お知らせ」の型。大見出し＋添え＋全幅の細線、左に写真、右に淡いカード、黒いピルのボタン
     C-7  部分公開中もニュースの行はホバーの動きを出す（ページへは飛ばない）
   切替は index.html の <link id="design-plus"> と ?design=v4plus / v5plus / v6（既定）。v4・v5 のときは無効
   ===================================================================================== */

/* ---------- I-6 Pack ツアー（payn.io の型） ---------- */
@media(min-width:901px){
  :root .pkt{
    --pkt-mode:scroll;                 /* top.js がこれを見てスクロール連動に切り替える */
    --pkt-top:128px; --pkt-tabs-h:64px;
    display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); column-gap:clamp(48px,6.5vw,104px); align-items:start;
    background:none; color:var(--ink); border-radius:0; box-shadow:none; overflow:visible;
  }
  :root .pkt-stage{display:contents}

  /* 左: 5 枚の画面を縦に（画面ごとにブラウザの枠を描く） */
  :root .pkt-screen{grid-column:1; grid-row:1; padding:0; background:none}
  :root .pkt-frame{border:0; border-radius:0; background:none; box-shadow:none; overflow:visible}
  :root .pkt-frame>.ui-bar{display:none}
  :root .pkt-shots{aspect-ratio:auto; background:none; display:flex; flex-direction:column; gap:24vh; padding-bottom:6vh}
  :root .pkt-shot{
    position:relative; inset:auto; height:auto; aspect-ratio:16/10.5; box-sizing:border-box; object-fit:cover;
    padding-top:30px; border:1px solid var(--border); border-radius:14px; background-color:var(--bg-muted);
    background-image:radial-gradient(circle,#d3d8de 4.5px,transparent 5px),radial-gradient(circle,#d3d8de 4.5px,transparent 5px),radial-gradient(circle,#d3d8de 4.5px,transparent 5px);
    background-size:10px 10px; background-repeat:no-repeat; background-position:14px 10px,30px 10px,46px 10px;
    box-shadow:0 34px 70px -28px rgba(10,14,25,.28);
    opacity:.42; transition:opacity .5s ease;
  }
  :root .pkt-shot.on{opacity:1}

  /* 右: ステップ（タブ）と説明は張り付き。同じ升目に重ね、説明はステップの下にずらす */
  :root .pkt-tabs{
    grid-column:2; grid-row:1; align-self:start; position:sticky; top:var(--pkt-top); z-index:1;
    height:var(--pkt-tabs-h); display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    border-bottom:1px solid var(--border); overflow:visible;
  }
  :root .pkt-tab{
    position:relative; min-width:0; padding:0 8px 14px 0; border:0; background:none; box-shadow:none;
    color:var(--subtle); justify-content:flex-end; gap:2px;
  }
  :root .pkt-tab .k{color:inherit; font-size:12px}
  :root .pkt-tab .t{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  :root .pkt-tab::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.2,.6,.2,1)}
  :root .pkt-tab:hover{background:none; color:var(--ink)}
  :root .pkt-tab[aria-selected="true"]{background:none; color:var(--ink); box-shadow:none}
  :root .pkt-tab[aria-selected="true"]::after{transform:scaleX(1)}
  :root .pkt-tab:focus-visible{outline:2px solid var(--g1); outline-offset:2px}

  :root .pkt-panel{
    grid-column:2; grid-row:1; align-self:start; position:sticky; top:calc(var(--pkt-top) + var(--pkt-tabs-h) + 48px);
    margin:calc(var(--pkt-tabs-h) + 48px) 0 0; padding:0; border-radius:0; background:none; color:var(--ink); display:grid;
  }
  /* 説明は 5 つを同じ升目に重ねてクロスフェード（高さが揺れない） */
  :root .pkt-pane{grid-area:1/1; display:flex; opacity:0; visibility:hidden; transform:translateY(16px);
    transition:opacity .45s ease,transform .6s cubic-bezier(.2,.6,.2,1),visibility 0s linear .45s}
  :root .pkt-pane.on{opacity:1; visibility:visible; transform:none; transition-delay:0s}
  :root .pkt-no{display:none}                               /* 「01 ／ 05」はステップと重複 */
  :root .pkt-s{order:-1; margin:0 0 12px; font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--g1)}
  :root .pkt-t{margin-top:0; font-size:clamp(30px,3.06vw,44px); line-height:1.25}
  :root .pkt-chips{margin-top:24px}
  :root .pkt-d{margin-top:24px; max-width:30em}
  :root .pkt-nav{grid-row:2; margin-top:40px; padding-top:0}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){
  :root .pkt-pane,:root .pkt-shot,:root .pkt-tab::after{transition:none}
}

/* ---------- I-7 ニュース（newpeace.jp の「お知らせ」の型） ---------- */
:root #news{overflow-x:clip}                               /* 細線と写真の裁ち落としで横スクロールを出さない */
:root .news-bar{background:#f3f5f8; border:0; border-radius:12px}
:root a.news-bar:hover{background:#e8ecf1; border-color:transparent; transform:none}
:root .news-bar .n-cat{border:0; border-radius:0; padding:0; background:none; min-width:0; text-align:left; font-weight:700; color:var(--ink)}
:root .news-bar .n-date{color:var(--subtle)}
:root .news-bar .n-cir{width:40px; height:40px; border-color:rgba(15,23,42,.22); background:#fff}
:root #news .btn-line{
  background:var(--cta); color:#fff; border:0; border-radius:999px; min-height:56px; padding:8px 8px 8px 28px; gap:40px;
  font-size:15px; transition:background .25s,color .25s,transform .2s,opacity .2s;
}
:root #news .btn-line:hover{background:#1e293b; color:#fff; border-color:transparent}
:root #news .btn-line .ar{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--g1); color:#fff; font-size:14px}

@media(min-width:901px){
  /* 見出しの行（大見出し＋添え）→ 全幅の細線 → 写真とカード → ボタン */
  :root .news-grid2{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:0; row-gap:0}
  :root .news-grid2 .nh-top{order:1; align-self:baseline; display:flex; align-items:baseline; gap:16px}
  :root .news-grid2 .nh-top .idx{order:2; margin:0}
  :root .news-grid2 .nh-top .ed-title{margin:0}
  :root .news-grid2 .nh-lead{order:1; align-self:baseline; margin:0 0 0 20px; max-width:none; font-size:14px; line-height:1.6}
  :root[data-design="v4plus"] .news-grid2 .nh-lead{margin-left:auto}
  :root .news-grid2::before{content:""; order:2; flex:0 0 calc(50% + 50vw); height:1px; background:var(--border); margin:32px 0 64px}
  :root .plus-news-fig[hidden]{display:block}
  :root .plus-news-fig{
    order:3; align-self:flex-start; box-sizing:border-box; margin:112px 0 0 calc(50% - 50vw);
    flex:0 0 calc(24% + 50vw - 50%); padding-right:clamp(32px,4vw,64px);
  }
  :root .plus-news-fig img{display:block; width:100%; aspect-ratio:1/.92; object-fit:cover; object-position:center 30%; border-radius:0 14px 14px 0}
  :root .news-grid2 .news-stack{order:3; align-self:flex-start; flex:1 1 0; min-width:0; margin:0; gap:12px}
  :root .news-grid2>.reveal:last-child{order:4; flex:0 0 100%; display:flex; justify-content:flex-end; margin-top:40px!important}

  /* カード: 左の列に分類・日付・製品タグ／中央にタイトル／右に丸い矢印 */
  :root .news-bar{
    display:grid; grid-template-columns:minmax(0,10.5em) minmax(0,1fr) 40px; grid-template-rows:auto auto 1fr;
    column-gap:clamp(24px,3vw,48px); row-gap:6px; align-items:start; min-height:120px; padding:30px 28px 30px 32px;
  }
  :root .news-bar .n-cat{grid-area:1/1; justify-self:start}
  :root .news-bar .n-date{grid-area:2/1}
  :root .news-bar .n-tag{grid-area:3/1; justify-self:start; margin-top:8px}
  :root .news-bar .n-t{grid-area:1/2/4/3; order:0; flex:none; margin:0}
  :root .news-bar .n-cir{grid-area:1/3/4/4; align-self:center; position:static}
}
@media(max-width:900px){
  :root .news-bar .n-cat{order:1}
  :root .news-bar .n-cat::after{content:"—"; margin:0 0 0 10px; font-weight:400; color:var(--subtle)}
  :root .news-bar .n-date{order:2}
  :root .news-bar .n-tag{order:3}
  :root .news-bar .n-t{order:4}
  :root .news-bar .n-cir{order:5}
  :root #news .btn-line{width:100%; justify-content:space-between}
}

/* ---------- C-7 部分公開ゲートの中でもニュースの行はホバーする（ページへは飛ばない） ---------- */
:root a.news-bar.is-locked-quiet{pointer-events:auto!important}
:root a.news-bar .n-cir.is-locked{opacity:1!important; filter:none!important}