@charset "UTF-8";
/* 言の葉と彩 — ブレークポイント定義

   1カラムへの切り替えは 1000px。案件の切り出し枠(--fv-w = 1080px)を
   下回らないようにするための閾値で、ここを上げると 1080px の窓で
   商品画像が本文の下へ回ってファーストビューから外れる。
   1001px 以上は style.css の既定値ひとつで、どの画面幅でも同じ寸法で出る。

   ※ このサイトは shoot.js(?shoot)を読まない。紙面の幅を --fv-w に固定していて
     1001px 以上では 1カラムに落ちないため、固定幅レンダリングで縮める必要がない。
     ?shoot を付けると逆に紙面ごと縮小されて 1080×1080 の見え方と合わなくなる */

@media (max-width: 1000px) {
  :root { --pad-x: 26px; }
  .layout { width: 100%; }
  /* 1カラムでは天地いっぱい・px固定の指定を解除する(画像が本文の下に回るため) */
  .head { grid-template-columns: 1fr; gap: 30px; padding: 36px var(--pad-x); height: auto; }
  .head-tx { display: block; }
  .brand { padding-bottom: 22px; }
  .brand-name { white-space: normal; font-size: 26px; }
  .copy { margin-block: 0; padding: 26px 0; }
  .copy h1 { font-size: 30px; }
  .tx-foot { display: none; }   /* 1カラムではフッターのナビと役割が重なる */
  /* 1カラムでは天地中央に置く意味がないので 0。.head-ph に置いているので
     :root を書き換える ?photo-top= より優先され、狭幅では URL の値は効かない */
  .head-ph { padding: 22px; --photo-top: 0px; }
  .head-ph img { height: auto; }
  .two { grid-template-columns: 1fr; gap: 30px; }
  .series { grid-template-columns: repeat(2, 1fr); }
  .sec { padding: 44px var(--pad-x); }
  .ft { padding: 36px var(--pad-x); }
}

@media (max-width: 600px) {
  :root { --pad-x: 16px; }
  .brand-name { font-size: 23px; letter-spacing: .24em; }
  .copy h1 { font-size: 26px; }
  .series { grid-template-columns: 1fr; }
  .head-ph { padding: 16px; }
  .buy-row { gap: 10px; }
  .btn { width: 100%; padding: 15px 20px; }
  .spec th { width: 100px; padding: 10px; }
  .spec td { padding: 10px; }
}