/* 箱デザインの改訂（2026-11-02）: 透明窓つきの立体的な玩具箱。
   見本（store-box-update の store-box.css）をこのサイトのクラスに合わせて移植。store.css の後に読み込む。
   見本 → このサイト: .store→#store / .products→.row / .package→.box.package / --color→--c / .box-top→.series /
   .window→.win / .box-name→.cname / .shelf→.plank / .detail-grid→.sheet .art
   箱の側面は見本の ::after ではなく .box-foot::before で描く（::after は業種で選ぶの「おすすめ」札に使っているため） */

/* 売り場の壁（木目） */
#store{background-color:#eee0cb;background-image:linear-gradient(90deg,#b1906830,transparent 4%,transparent 96%,#b1906830),repeating-linear-gradient(0deg,transparent 0 5px,#b9956510 6px 7px);padding:4px 4% 10px;border-radius:14px;max-width:1240px;margin-inline:auto}

/* 一覧: PC3列・タブレット/スマホ2列 */
.row{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 38px;padding:28px 16px 0;align-items:stretch}
.product{padding-top:24px;perspective:1000px}

/* 箱本体 */
.box.package{--depth:17px;position:relative;display:flex;flex-direction:column;height:390px;border:1px solid color-mix(in srgb,var(--c),#173932 45%);border-radius:3px;padding:19px 17px 14px;overflow:visible;background:linear-gradient(115deg,#ffffff18,transparent 42%),var(--c);box-shadow:inset 2px 3px 0 #ffffff55,inset -2px -2px 0 #0002,5px 12px 14px #43311d38;color:#fffdf0;isolation:isolate}
.product .box.package{width:calc(100% - var(--depth));margin:0;text-align:left;transform:none}
/* 上部の READY TO WORK タブ */
.box.package::before{content:'✦ READY TO WORK ✦';position:absolute;top:-25px;left:21%;right:21%;height:26px;padding:6px 0 0;background:linear-gradient(#ffffff18,#ffffff00),var(--c);border:1px solid color-mix(in srgb,var(--c),#173932 40%);border-bottom:0;border-radius:2px 2px 0 0;box-shadow:inset 2px 2px 0 #ffffff50,4px 0 0 color-mix(in srgb,var(--c),#183d36 25%);font-size:9px;letter-spacing:.8px;line-height:15px;text-align:center;white-space:nowrap;overflow:hidden;color:#fffdf0;z-index:2}
/* 箱の側面 */
.box.package .box-foot::before{content:'';position:absolute;top:-1px;right:calc(-1 * var(--depth));bottom:-1px;width:var(--depth);border:1px solid color-mix(in srgb,var(--c),#173932 55%);border-radius:0 2px 2px 0;background:linear-gradient(90deg,#0001,#0003),var(--c);transform:skewY(-27deg);transform-origin:left top;box-shadow:inset 2px 0 #ffffff22;z-index:-1}
/* 「TRY ME!」丸シールは外す。業種で選ぶの「おすすめ」札だけ残す */
.box.package::after{display:none}
.box.package.pick::after{display:grid;top:-34px;right:-6px;z-index:4}

/* 箱の上段: 推しロボ・番号・部署バッジ */
.box.package .series{font-size:clamp(17px,1.65vw,24px);letter-spacing:-1px;line-height:1.3;display:flex;align-items:center;gap:8px;text-shadow:1px 2px 0 #0002;min-height:32px;white-space:nowrap;color:#fffdf0}
.box.package .series small{font-size:12px;letter-spacing:0;font-weight:700;margin-left:auto}
.box.package .series .box-dept{display:inline-block;margin-left:0;background:#fffbed;color:#193b62;padding:4px 6px;border-radius:5px;font-size:10px;letter-spacing:0;text-shadow:none;font-style:normal;font-family:var(--font-body);font-weight:900}

/* 透明窓 */
.box.package .win{flex:1;min-height:0;height:auto;aspect-ratio:auto;border:3px solid #e8e4d0;border-radius:10px;margin:13px 0 12px;background:linear-gradient(90deg,#b7a78e 0 8%,#cfc2aa 8.5% 91%,#b6a68e 91.5%),#d4c8b3;box-shadow:inset 2px 3px 7px #332e2955,0 1px 1px #fff7;overflow:hidden;position:relative;display:flex;align-items:flex-end;justify-content:center}
.box.package .win::before{content:'';position:absolute;inset:auto 0 0;height:14%;background:linear-gradient(#c8b99c,#f0e4cc);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);border-top:1px solid #fff8}
.box.package .win::after{content:'';position:absolute;inset:0;background:linear-gradient(130deg,#fff0 3%,#fff9 3.5% 7%,#fff0 7.5% 70%,#fff3 71% 78%,#fff0 79%);border:1px solid #fff8;border-radius:6px;pointer-events:none;z-index:2}
.box.package .win .robot-art-host{position:relative;z-index:1;width:92%;height:94%;max-width:280px;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(2px 5px 2px #3e352b33)}
.box.package .win .robot-art-host svg,.box.package .win>svg{width:100%;height:100%;max-height:254px;position:relative;z-index:1}
/* 窓の中の「御社仕様に組立」札 */
.box.package .assembly-label{position:absolute;bottom:7px;left:50%;right:auto;transform:translateX(-50%) rotate(-2deg);z-index:3;background:#fffbed;border:3px solid #243b61;border-radius:8px;box-shadow:2px 3px 0 #0002;color:#193b62;padding:4px 10px;white-space:nowrap;font-weight:900;font-size:clamp(10px,1.1vw,15px)}

/* 名前: 最長8文字（チャンスレーダー）が1行に収まる大きさにし、語の途中で折り返さない */
.box.package .cname{font-family:var(--font-display);font-size:clamp(19px,2.2vw,31px);line-height:1.25;letter-spacing:-1px;white-space:nowrap;overflow:visible;text-shadow:1px 3px 0 #0002;min-height:1.25em;color:#fffdf0}
.box.package .box-foot{margin-top:8px;font-size:10px;line-height:1.4;opacity:1;gap:4px;align-items:end;font-weight:600;overflow:visible}
.box.package .box-foot span:last-child{white-space:nowrap}

/* 棚板 */
.plank{height:24px;margin:8px -18px 22px;background:linear-gradient(#f5e2c1 0 14%,#c99e69 15% 26%,#e2bb88 27% 84%,#b58b5b 85%);border-radius:1px;box-shadow:0 10px 12px #6c4d2c30}
.plank::before,.plank::after{display:none}

.product .box.package:hover,.product .box.package:focus-visible{transform:translateY(-7px) rotate(-1deg);box-shadow:inset 2px 3px 0 #ffffff55,inset -2px -2px 0 #0002,5px 18px 18px #43311d40}
.box.package.in{outline:4px dashed var(--red);outline-offset:6px}
.talk-bubble{top:-23px}
.product .pname{color:#243b61}
.product .pjobs{color:#625642}
.product .add{background:#fff9eb;border:2px solid #b29771;border-radius:9px;box-shadow:0 4px 0 #b29771;color:#243b61}
.product .add.selected{background:#dcebdc}
.product .add:hover{background:#243b61;color:#fff}

/* ヒーロー */
.hero-box{width:260px}
.hero-box .box.package{height:360px}
.hero-box .box.package .cname{font-size:25px}
.hero-box .box.package .series{font-size:19px}
.hero-box .box.package .series small{font-size:10px}
.hero-box .box.package .box-dept{font-size:8px}
.hero-box .box.package .box-foot{font-size:8px}
.hero-side .box.package{height:270px;padding:12px 10px;--depth:12px}
.hero-side .box.package .series{font-size:12px;gap:3px}
.hero-side .box.package .series small{font-size:8px}
.hero-side .box.package .box-dept{display:none}
.hero-side .box.package .cname{font-size:17px}
.hero-side .box.package .box-foot{font-size:6px}
.hero-side .box.package .assembly-label{font-size:8px;padding:2px 4px;border-width:2px}
.hero-side .box.package::before{font-size:5px}

/* 仕様書（詳細画面）の箱 */
.sheet .art{padding-top:42px}
.sheet .art .box.package{height:355px;width:calc(100% - var(--depth));cursor:default}
.sheet .art .box.package.in{outline:none}
.sheet .art .box.package .series{font-size:17px;gap:4px}
.sheet .art .box.package .series small{font-size:10px}
.sheet .art .box.package .box-dept{font-size:8px}
.sheet .art .box.package .cname{font-size:24px}
.sheet .art .box.package .box-foot{font-size:8px}
.sheet .art .greet{margin-bottom:14px}

/* タブレット: 2列 */
@media (max-width:1000px){
  .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px}
  .box.package .series{font-size:23px}
  .box.package .cname{font-size:clamp(19px,3.1vw,28px)}
  .box.package .box-foot{font-size:10px}
}
/* スマホ: 2列のまま小さく */
@media (max-width:650px){
  #store{padding-inline:3%}
  .row{gap:28px 23px;padding:22px 4px 0}
  .box.package,.product .box.package{--depth:10px;height:285px;padding:10px 8px}
  .product .box.package{width:calc(100% - var(--depth))}
  .box.package::before{left:14%;right:14%;font-size:6px;top:-21px;height:22px;padding-top:3px;letter-spacing:.2px}
  .box.package .series{font-size:13px;gap:3px;letter-spacing:-.7px;min-height:30px;flex-wrap:wrap}
  .box.package .series small{font-size:9px}
  .box.package .box-dept{font-size:8px;padding:2px 4px}
  .box.package .win{margin:8px 0;border-width:2px;border-radius:7px}
  .box.package .assembly-label{font-size:9px;padding:3px 5px;border-width:2px;bottom:5px}
  .box.package .cname{font-size:clamp(12px,3.8vw,23px);min-height:1.6em;display:flex;align-items:center;letter-spacing:-.6px}
  .box.package .box-foot{font-size:7px;display:block;margin-top:3px}
  .box.package .box-foot span{display:block}
  .plank{margin-inline:-9px;height:20px}
  .hero-box .box.package{height:320px;padding:16px 12px}
  .hero-box .box.package .cname{min-height:0}
  .hero-side .box.package{height:230px}
  .hero-side .box.package .cname{min-height:0}
  .hero-side .box.package .series{flex-wrap:nowrap}
  .sheet .art{padding-top:36px}
  .sheet .art .box.package{flex:0 0 auto;width:min(230px,calc(100% - var(--depth)));height:330px;padding:16px 12px;margin-inline:auto}
  .sheet .art .box.package .cname{min-height:0}
  .sheet .art>div:last-child{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.product .box.package{transition:none}.product .box.package:hover{transform:none}}
body.motion-paused .product .box.package:hover{transform:none}

/* 2026-11-02 再編: 480px以下は棚を1列にする。2列だとカードの4行（index.html .card4）が単語の途中で折れるため */
@media (max-width:480px){
  .row{grid-template-columns:1fr;gap:34px}
}