@charset "UTF-8";
/* 文具アトリエ綴り — ブレークポイント定義
   撮影モード(?shoot)ではこのファイルが丸ごと無効化され、
   狭幅でもデスクトップのカラム比・文字組みが保たれる。詳細は shoot.js を参照 */

@media (max-width: 1000px) {
  :root { --content-w: 100%; }
  .stage, .section { margin-left: 16px; margin-right: 16px; }
  .section { padding: 46px 34px; }
  /* 左レールを置く幅が無くなり商品画像に重なるため、この幅からは出さない。
     撮影モード(?shoot)ではこのファイルごと無効化されるので、撮影時は常に出る */
  .stage-left { display: none; }
}

@media (max-width: 620px) {
  /* 狭幅も同じ考え方で 1/4。--pad-top はパッド実体基準なので、
     商品サイズが 300px に縮んでも指定した位置に実体の上端が来る */
  :root { --product-size: 300px; --pad-top: 47px; }
  .site-head-inner { padding: 20px 20px 15px; }
  .site-title { font-size: 20px; letter-spacing: .3em; text-indent: .3em; }
  .stage { margin-left: 10px; margin-right: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 52px; }
  .section { margin-left: 10px; margin-right: 10px; padding: 36px 20px; }
  .feature-grid { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr; gap: 26px; }
  .product-buy { flex-direction: column; }
  .spec th { width: 116px; padding: 11px 10px; }
  .spec td { padding: 11px 10px; }
}