@charset "utf-8";

/* =========================================================
   もぐらぼ — WordPress 部品屋
   Design: ゆるいガレージ
   素材＝有孔ボード / 合板 / ビス / ダイモラベル / シャッター / 黄黒テープ
   ========================================================= */

:root{
  /* 壁・床（コンクリ〜漆喰） */
  --wall:     #E7E0D3;
  --wall-2:   #DDD4C2;
  --peg:      #D6C09A;   /* 有孔ボード */

  /* 合板（カード） */
  --ply:      #F6EBD8;
  --ply-2:    #EDDFC4;

  /* 木・鉄 */
  --wood:     #C08A4E;
  --wood-d:   #8F6234;
  --steel:    #6C7681;
  --steel-d:  #4B535C;
  --steel-l:  #9BA4AE;

  /* 文字 */
  --ink:      #33302C;
  --ink-2:    #5E574E;
  --ink-3:    #8C8377;

  /* 差し色 */
  --orange:   #EF7A2E;
  --orange-d: #C75E19;
  --orange-l: #FCE8D8;
  --yellow:   #F2B705;
  --yellow-l: #FBF0D2;
  --teal:     #3E9A9C;
  --teal-l:   #DDEDED;
  --red:      #D6472F;

  --line:     #CDBC97;
  --line-2:   #B09B72;

  /* 書体 */
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --hand:  "Yusei Magic", "Zen Maru Gothic", sans-serif;
  --label: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;

  --wrap: 1100px;
  --gut: 24px;

  /* 手書き風の角丸（ゆるさ担当） */
  --wob:  14px 19px 15px 20px;
  --wob2: 19px 14px 20px 15px;

  /* 手書きの波線。節の見出しと、ヒーローの「ひとつだけ」で共用する。
     2か所に同じデータURIを書くと、片方だけ直して食い違う。 */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 15 1.5 30 6 T 60 6 T 90 6 T 118 6' fill='none' stroke='%23F2B705' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");

  --sh:   rgba(51,48,44,.20);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--round);
  font-size:16px; font-weight:500; line-height:1.95;
  color:var(--ink);
  background-color:var(--wall);
  /* コンクリのざらつき */
  background-image:
    radial-gradient(rgba(51,48,44,.055) .85px, transparent 1px),
    radial-gradient(rgba(255,255,255,.55) .85px, transparent 1px);
  background-size:6px 6px, 6px 6px;
  background-position:0 0, 3px 3px;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;

  /**
   * ── 日本語を「文節」で折り返す ──
   *
   * 日本語は語と語のあいだに空白がありません。
   * ブラウザは既定で**どこででも折ります。**
   *
   *   そのか
   *   わり、
   *
   * こうなると、読む人は行をまたいで単語を組み立て直すことになります。
   * auto-phrase は文節の切れ目を選びます。
   *
   * ── 対応していないブラウザでは ──
   *
   * これまでどおりの折り返しになります。壊れません。
   */
  word-break:auto-phrase;

  /**
   * 最後の行に1語だけ残さない。
   *
   * 「〜します。」だけが次の行に落ちると、そこで文が終わったのか
   * 続くのかが分かりにくくなります。
   */
  text-wrap:pretty;
}

/**
 * 見出しは行の長さを揃える。
 *
 * 2行になったとき、1行目が長く2行目が1語だけ、という形を避けます。
 * 見出しは行数が少ないので、揃えたほうが座りがよくなります。
 */
h1,h2,h3,h4,
.h-sec,.lead,.eyebrow{ text-wrap:balance; }

/**
 * ここで割らない、という指定。
 *
 * word-break:auto-phrase は文節で折ってくれますが、**万能ではありません。**
 * 「見て、か／ごに入れます。」のように、割れてほしくないところで割れることがあります。
 *
 * <br> で固定すると、広い画面でも必ず2行になります。
 * 割らない印なら、入るときは1行、入らないときだけ次の行へ動きます。
 */
.nb{ white-space:nowrap; }

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ---------- 素材パーツ ---------- */

/* 黄黒の注意テープ */
.hazard{
  height:11px;
  background:repeating-linear-gradient(-45deg,
    var(--yellow) 0 15px, #33302C 15px 30px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}

/* シャッター（波板） */
.shutter{
  height:22px;
  background:repeating-linear-gradient(to bottom,
    #A6AEB6 0 5px, #8C959E 5px 7px, #757E88 7px 9px);
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.18);
}

/* ---------- レイアウト ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:800px; }
.section{ padding-block:70px; position:relative; }
.section--tight{ padding-block:48px; }

/* 有孔ボードの壁 */
.section--peg{
  background-color:var(--peg);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(58,42,20,.34) 0 2.3px, transparent 2.7px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.42) 0 2.3px, transparent 2.7px);
  background-size:30px 30px, 30px 30px;
  background-position:0 0, 0 2px;
  border-block:3px solid var(--wood-d);
}
/* コンクリの床 */
.section--concrete{
  background-color:var(--wall-2);
  background-image:
    radial-gradient(rgba(51,48,44,.07) 1px, transparent 1.2px),
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.2px);
  background-size:7px 7px,7px 7px;
  background-position:0 0,3.5px 3.5px;
}
/* 作業灯のあかり */
.section--lit{
  background:
    radial-gradient(720px 340px at 50% 0%, rgba(242,183,5,.22), transparent 65%),
    var(--wall);
}

/* ---------- 見出し ---------- */
.eyebrow{
  font-family:var(--hand); font-size:15px; color:var(--orange-d);
  margin:0 0 6px; display:flex; align-items:center; gap:8px;
  transform:rotate(-1deg);
}
.eyebrow::before{ content:"✎"; }
.section--peg .eyebrow{ color:#7A4A12; }

.h-sec{
  font-size:clamp(25px,3.6vw,35px); font-weight:900; line-height:1.5;
  margin:0 0 10px; letter-spacing:.01em; display:inline-block;
  background-image:var(--wave);
  background-repeat:no-repeat; background-position:left bottom .05em; background-size:100% .45em;
  padding-bottom:.12em;
}
/* 42em＝全角42文字。ここのリード文はどれも40文字前後なので、
   36em だと必ず2行になり、「買い／切り」のように語の途中で割れる。
   （auto-phrase でも「買い切り」は切られる。文節としては切れる語のため） */
.lead{ color:var(--ink-2); margin:14px 0 34px; max-width:42em; font-size:15.5px; }
.section--peg .lead{ color:#4A3A1E; }

/* ============================================================
   日本語の折り返し（本文まわり、まとめて）

   ── 1. 幅は em で決める ──
   ch は「0」の字幅。日本語は全角なので、**60ch は全角30文字ぶんしかない。**
   35文字の文を書くと、それだけで折り返す。em なら全角1文字ぶん。

   ── 2. カタカナの途中で切らない ──
   既定では「依存な／し」「ガレ／ージ」のように語の真ん中で折れる。
   auto-phrase は日本語の文節で折る指定。知らないブラウザは
   その行を捨てて、ひとつ前の keep-all のままになる。

   ── 3. それでも入らないときは、やむなく切る ──
   keep-all だけだと、長いひとかたまりが枠からはみ出す。
   ============================================================ */
.lead,
.prose,
.hero p,
.hero-done p,
.empty-dig p,
.part__body p,      /* 棚のカードの説明。「ませ／ん。」と割れていた */
.feat__item h3,     /* 「寄りかからな／い」と割れていた */
.feat__item p,
.detail__desc{      /* 商品ページの説明 */
  word-break:keep-all;
  word-break:auto-phrase;
  overflow-wrap:break-word;
}

/* ---------- ダイモ風の型番ラベル ---------- */
.sku{
  font-family:var(--label); font-weight:700;
  font-size:11.5px; letter-spacing:.14em;
  color:#F2EEE6; background:#2C2926;
  padding:2px 10px; border-radius:4px; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.28);
}

.badge{
  font-family:var(--label); font-weight:800; font-size:11px; letter-spacing:.06em;
  padding:2px 10px; border-radius:99px; white-space:nowrap; border:1.5px solid transparent;
}
.badge--plugin{ color:#A9500F; background:var(--orange-l); border-color:#EEC4A2; }
.badge--theme { color:#2A7375; background:var(--teal-l); border-color:#A6D2D2; }
.badge--snippet{ color:#7E620E; background:var(--yellow-l); border-color:#E7CE86; }
.badge--set{ color:#8E2F1F; background:#FBE3DE; border-color:#EFB6AA; }
/* 装飾の群。棚を1つにまとめたぶん、どの仲間かはカードで見せる。
   種類（プラグイン／テーマ）の札より弱くする。先に読ませたいのはそちら */
.badge--deco{ color:#6B5E7A; background:#F1EDF5; border-color:#D5CBE0; }
/* まだ出せていないもの。破線＝仮どめ */
.badge--soon{ color:#2A7375; background:transparent; border:1.5px dashed #7FBFC0; }
.badge--new{
  color:#fff; background:var(--red); border-color:#B33A26;
  transform:rotate(-4deg); box-shadow:0 2px 0 rgba(179,58,38,.5);
}

/* 養生テープ */
.tape{ position:relative; }
.tape::before{
  content:""; position:absolute; z-index:2;
  top:-10px; left:50%; width:92px; height:22px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(120,170,120,.55);
  border-left:3px dotted rgba(255,255,255,.5);
  border-right:3px dotted rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(51,48,44,.2);
}
.tape--teal::before{ background:rgba(62,154,156,.45); }
.tape--pink::before{ background:rgba(242,183,5,.6); }

/* ---------- ボタン ---------- */
.btn{
  --bg:var(--orange); --fg:#fff; --edge:var(--orange-d);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--round); font-weight:900; font-size:15.5px;
  padding:13px 26px; color:var(--fg);
  background:linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 88%, #000));
  border:none; border-radius:99px; text-decoration:none; cursor:pointer;
  box-shadow:0 4px 0 var(--edge), 0 5px 8px var(--sh);
  transition:transform .1s ease, box-shadow .1s ease, filter .15s;
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 5px 0 var(--edge), 0 7px 10px var(--sh); }
.btn:active{ transform:translateY(4px); box-shadow:0 0 0 var(--edge); }
.btn--ghost{
  --bg:#FBF6EC; --fg:var(--ink); --edge:var(--line-2);
  border:2px solid var(--line-2); padding:11px 24px;
}
.btn--teal{ --bg:var(--teal); --edge:#2E7A7C; }
.btn--steel{ --bg:var(--steel); --edge:var(--steel-d); }
.btn--sm{ font-size:13px; padding:8px 16px; box-shadow:0 3px 0 var(--edge); }
.btn--sm:active{ transform:translateY(3px); }
.btn--lg{ font-size:17.5px; padding:16px 34px; }
.btn--block{ width:100%; }

/* ---------- ヘッダー ---------- */
.topbar{ background:#33302C; color:#E6DFD2; font-size:12.5px; }
.topbar .wrap{ display:flex; justify-content:center; align-items:center; gap:14px; min-height:34px; flex-wrap:wrap; }
.topbar b{ color:var(--yellow); }

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(231,224,211,.95);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--steel-d);
  box-shadow:0 2px 0 rgba(51,48,44,.12);
}
.site-head .wrap{ display:flex; align-items:center; gap:26px; height:72px; }

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
/* 40px だと、穴・もぐら・レンチが1つあたり10pxになって潰れる。
   48px にして、線が見える太さを確保している。 */
.logo__mark{ width:48px; height:48px; flex:0 0 auto; }
/* 店名は4文字。ここが折れて「もぐら／ぼ」になると看板として読めない。
   日本語は字と字のあいだで好きに折れるので、明示的に止める。 */
.logo__text{ font-weight:900; font-size:22px; letter-spacing:.04em; line-height:1.15; white-space:nowrap; }
/* 色は --ink（ほぼ黒）。前は --ink-3（#8C8377）だったが、
   下地 #E7E0D3 に対して **2.84:1** しかなく、小さい文字の基準（4.5:1）割れ。
   薄いのは気のせいではなかった。いまは 10.0:1。
   店名との差は、大きさ（22px と 11.5px）と書体で足りている。 */
.logo__sub{ font-family:var(--hand); font-size:11.5px; color:var(--ink); display:block; line-height:1.25; }

/**
 * 「WordPress」だけ、青いラベルにする。
 *
 * この店は暖色（橙・黄・茶）だけで組んであるので、青は1つも無い。
 * そこへWordPressの青を置くと、ページの中でここだけ浮いて目に入る。
 *
 * 色は #21759B（WordPressが長く使ってきた青）。
 * 新しい #3858E9 は彩度が高く、橙とぶつかって落ち着かない。
 *
 * ── 公式の印には見せない ──
 *
 * これは「WordPress用の部品を売っています」と言うためのもので、
 * 公式に認められた店という意味ではない。
 * だから文の中の1語として置き、単独のバッジにはしない。
 */
.wp{
  display:inline-block;
  background:#21759B; color:#FBF6EC;
  font-family:var(--label); font-weight:700;
  font-size:.94em; letter-spacing:.01em;
  padding:0 .38em; border-radius:3px;
  /* 「WordPress」と「の」がくっついて読みにくいので、右だけ空ける。
     内側の padding を増やすと青い箱そのものが伸びるので、外側で足す */
  margin-right:.14em;
  /* 文字の下の余白が詰まって見えるので、ほんの少し上へ */
  transform:translateY(-.5px);
}
/* カタカナの途中で折らない。
   既定だと「オリジナ／ルパーツ」のように語の真ん中で切れる。
   keep-all にすると、読点や助詞の切れ目で折れる。
   いまの説明文は短いので折り返さないが、長くしたときの保険。 */
.logo__sub{ word-break:keep-all; }

/**
 * PCでは、店名の右にサブタイトルを置く。
 *
 * ヘッダーの高さは72px。店名（22px）とサブ（11.5px）を縦に積んでも
 * その高さは埋まらず、店名の右が空いたままになる。そこへ入れる。
 *
 * ── ダッシュはCSSで足す ──
 *
 * site.tagline は <title> にもフッターにも使う。データ側に「-」を入れると、
 * ブラウザのタブが「もぐらぼ — -WordPressの部品屋さん-」になる。
 * ここは看板の飾りなので、看板の側で足す。
 *
 * ── 狭いところでは縦に戻す ──
 *
 * 横に並べるとロゴの幅が150pxほど増える。メニュー6つとかごが
 * 入らなくなるので、余裕のある幅でだけ横に並べる。
 *
 * ── 幅は測って決めること ──
 *
 * 最初 1060px から横に並べていたが、**どの幅でも入っていなかった。**
 * .wrap は最大1100px、左右の余白24pxずつを引いて中は1052px。
 * そこへ看板389 ＋ メニュー588 ＋ かご63 ＋ すき間で1092px。40px足りない。
 *
 * 足りないぶんは flex が看板から削る。日本語はどこでも折れるので、
 * 店名が「もぐら／ぼ」、サブが「-WordPress／の部品屋さん-」に割れていた。
 * 画面を広げても .wrap が1100で止まるので、直らない。
 *
 * いまは：
 *   ・看板は削らせない（flex:0 0 auto）／折らせない（nowrap）
 *   ・そのぶんメニューを詰める（14.5→14px、すき間20→14px）
 *   ・横に並べはじめる幅を 1120px から（.wrap が最大1100に届く幅）
 * これで中は1052px、使うのは1028px、余りは24px。
 *
 * ※ 幅の判定（メディアクエリ）は縦スクロールバーを含み、
 *   実際に置ける幅は含まない。1100で切ると15pxぶん足りない。
 *
 * ※ 文字の大きさ・書体・メニューの数を変えたら、**測り直すこと。**
 *    余り24pxは、1項目増やしただけで無くなる。
 */
@media (min-width:1120px){
  /* 横に置けるぶん、看板そのものを大きくできる。
     ヘッダーの高さも少し上げないと、印が上下でつかえる */
  .site-head .wrap{ height:82px; gap:18px; }
  /* 看板は削らない。削られると、上に書いたとおり字が折れる */
  .site-head .logo{ gap:13px; flex:0 0 auto; }
  .site-head .logo__sub{ white-space:nowrap; }
  /* 看板に譲ったぶん、メニューを詰める */
  .site-head .gnav{ gap:14px; }
  .site-head .gnav a{ font-size:14px; }
  .site-head .logo__mark{ width:58px; height:58px; }
  .site-head .logo__text{ font-size:26px; }

  /* ベースラインを揃えると、店名の足元に沈んで見える。
     横に並べたときは、店名の高さの真ん中に置く */
  .site-head .logo__name{ display:flex; align-items:center; gap:11px; }
  /* 縦に積むときの11.5pxは、店名の下に小さく添える前提の大きさ。
     横に並ぶと単に小さいので、少し上げる */
  /**
   * align-items:center が揃えるのは「行の箱」の中心で、字そのものの中心ではない。
   * 店名は Zen Maru Gothic、サブは Yusei Magic で、字が箱のどこに乗るかが違う。
   * 実測すると、サブの字は 2.4px 上に出ていた。そのぶん下げる。
   *
   * ※ この 2.4px は 26px と 15px の組み合わせで測った値。
   *    どちらかの大きさを変えたら、測り直すこと。
   */
  .site-head .logo__sub{ font-size:15px; transform:translateY(2.4px); }
  .site-head .logo__sub::before{ content:"-"; margin-right:.4em; }
  .site-head .logo__sub::after { content:"-"; margin-left:.4em; }
}

/**
 * ── 中くらいの幅で、間を詰める ──
 *
 * 項目が7つになったとき、看板と「かご」を足した横幅が
 * 1180pxに収まらなくなり、**かごが画面の外へ出ました。**
 *
 * 折り返すと看板が2段になって崩れます。折るより詰めるほうを採ります。
 * それでも足りなくなったら、そのときは**項目を減らす**判断になります。
 */
.gnav{ display:flex; gap:20px; margin-left:auto; }
@media (max-width:1240px){
  .site-head .wrap{ gap:16px; }
  /* 縮めて、入らないぶんは横に送れるようにする。
     ハンバーガーにすると「メニューが消えた」という相談になるので、
     隠さずに送る（テーマ側でも同じ判断をしている） */
  .gnav{ gap:13px; min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .gnav::-webkit-scrollbar{ display:none; }
  .gnav a{ font-size:13.5px; }
}
/* 項目の途中で折らない。
   これが無いと、幅700〜900のあたりで「棚をみ／る」「なかのひ／と」と
   縦に割れる。メニューは1つずつが短い語なので、折る意味がない。 */
.gnav a{ text-decoration:none; font-size:14.5px; font-weight:700; color:var(--ink-2); padding:4px 2px; position:relative; white-space:nowrap; }
.gnav a:hover,.gnav a[aria-current="page"]{ color:var(--ink); }
.gnav a:hover::after,.gnav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 Q 15 0.5 30 4 T 59 4' fill='none' stroke='%23EF7A2E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}

/* かご＝工具箱ボタン */
.cart-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(#FBF6EC,#EDE4D3);
  border:2px solid var(--ink); border-radius:10px;
  padding:7px 16px; text-decoration:none; font-weight:800; font-size:13.5px;
  box-shadow:0 3px 0 var(--ink);
  /* 「か／ご」と縦に割れさせない。
     左の店名が幅を取ると、ここが縮められて2行になる。 */
  flex:0 0 auto; white-space:nowrap;
}
.cart-btn:active{ transform:translateY(3px); box-shadow:none; }
.cart-btn i{
  font-style:normal; background:var(--red); color:#fff; border-radius:99px;
  min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800;
}

/* ---------- ヒーロー ---------- */
.hero{
  background:
    radial-gradient(760px 380px at 72% -6%, rgba(242,183,5,.28), transparent 62%);
}
/* 文字側をすこし広く取る。
   2行目「ここは、ほしい部品を…1,000円から。」に 522px 要るため。
   1.02fr だと 514px しか無く、8px 足りずに折り返していた。 */
.hero .wrap{ display:grid; grid-template-columns:1.06fr .94fr; gap:44px; align-items:center; padding-block:60px 70px; }
.hero__stamp{
  display:inline-block; font-family:var(--hand); font-size:14px; color:var(--orange-d);
  background:#FBF6EC; border:2px solid var(--orange); border-radius:var(--wob);
  padding:5px 16px; margin-bottom:20px; transform:rotate(-1.6deg);
  box-shadow:0 3px 0 rgba(199,94,25,.28);
}
/* 見出しの字の大きさを測る枠。
   cqi＝この枠の幅の1%。画面幅（vw）では、PCの2段組みのときに
   文字欄の幅と合わず、はみ出す。 */
.hero__text{ container-type:inline-size; }

/**
 * 見出しは、どの幅でも1行。
 *
 * 文の長さが変われば、ここの数字も変える。目安は実測で出す。
 * 「その機能ひとつだけください。」は約14.9文字ぶんの幅
 * （「ください。」だけ1.18倍）。前の「“その機能ひとつ”だけ、ください。」は
 * 17.7文字ぶんあり、そのときは 5.5cqi だった。
 *
 * 下限16px … 幅320pxの端末でぎりぎり1行に収まる大きさ
 * 上限43px … これ以上大きくしても、行が枠の左右に寄るだけ
 *
 * 1行目の font-size は、cqi を知らないブラウザ向けの控え。
 */
.hero h1{
  font-size:clamp(20px,5vw,34px);
  font-size:clamp(16px,6.1cqi,43px);
  font-weight:900; line-height:1.45;
  margin:0 0 22px; letter-spacing:-.01em;
  white-space:nowrap;
}
/**
 * 節の見出しと同じ波線。前はマーカーペン風の直線の帯だった。
 *
 * 左右の .14em は、前後の「その機能」「ください。」から離すため。
 * padding なので波線もそのぶん伸びるが、手で引いた線は
 * 語の端から少しはみ出すほうが自然に見えるので、これでいい。
 *
 * ── 下は空けない ──
 *
 * 前は padding-bottom .1em を入れて、波線を文字から離していた。
 * 文字の位置は前後とまったく同じ（測って確認済み）なのに、
 * **「ひとつだけ」だけ一段下にあるように見えていた。**
 * 波線が下に離れているぶん、語のかたまりが下へずれて見えるため。
 *
 * 節の見出しは隣に文字が無いので気づかないが、文の途中に引くときは
 * 線を文字に寄せないと、そこだけ落ちて見える。
 */
.hero h1 .marker{
  background-image:var(--wave);
  background-repeat:no-repeat; background-position:left bottom .07em; background-size:100% .26em;

  /**
   * padding は波線の張り出し。左右そろえる。
   * margin は文字の間隔。**左右そろえない。**
   *
   * ── なぜ margin が左右で違うのか ──
   *
   * 字送りの隙間を同じにしても、見た目は揃わない。
   * 字の中の余白が字ごとに違うため（43pxのとき）。
   *
   *   左「能」の右あき 0px ＋ 隙間 ＋「ひ」の左あき 2px
   *   右「け」の右あき 2px ＋ 隙間 ＋「く」の左あき **10px**
   *
   * 「く」は字の中に大きく空きを持っているので、右だけ10px広く見える。
   * その差を margin で埋め、墨と墨の間を左右とも約13pxにしている。
   *
   * ここの数字は「能ひ…けく」という並びに合わせたもの。
   * **見出しの文言を変えたら、測り直すこと。**
   */
  padding:0 .14em;
  margin:0 -.12em 0 .12em;
}
/* 「ください。」だけ大きく橙にしていた .big は外した。
   目立たせるものは黄色のラインひとつに絞る。 */

.hero p{ font-size:16px; color:var(--ink-2); margin:0 0 28px; max-width:34em; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
/* ボタンの幅ぴったりにする。下の一言は、この幅の中で中央に来る */
.hero__act{ width:fit-content; max-width:100%; }
/* ボタンの下の一言。

   ── .hero p より詳しく書く必要がある ──

   すぐ上の .hero p{ margin:0 0 28px } は詳細度が高く、
   .hero__note{ margin-top } を打ち消す。**上の余白が効かない。**
   p を足して詳細度を上げてある。

   ── 中央に置く ──

   flex の並びなので、左に寄る。justify-content で真ん中へ。 */
.hero p.hero__note{
  font-family:var(--hand); font-size:13.5px; color:var(--ink-3);
  margin:32px 0 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
}

.garage{ position:relative; }
.garage__stickers{ position:absolute; inset:0; pointer-events:none; }
.sticker{
  position:absolute; font-family:var(--hand); font-size:13px;
  background:#FBF6EC; border:2px solid var(--ink); border-radius:99px;
  padding:4px 14px; box-shadow:0 3px 0 rgba(51,48,44,.25);
}
.sticker--1{ top:0; left:0; transform:rotate(-7deg); background:var(--yellow-l); }
.sticker--2{ top:0; right:0; transform:rotate(6deg); background:var(--teal-l); }
.sticker--3{ bottom:-2%; right:6%; transform:rotate(-3deg); background:var(--orange-l); }

/* ---------- 数字バー ---------- */
.statbar{
  background:linear-gradient(#F3ECDE,#E5DCC9);
  border-block:3px solid var(--steel-d);
}
.statbar .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-block:22px; }
.stat{ text-align:center; position:relative; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:8%; bottom:8%; width:2px;
  background:repeating-linear-gradient(to bottom, var(--line-2) 0 4px, transparent 4px 8px);
}
.stat dt{ font-family:var(--hand); font-size:13px; color:var(--ink-3); }
.stat dd{ margin:2px 0 0; font-family:var(--label); font-size:27px; font-weight:800; }
.stat dd small{ font-size:13px; color:var(--ink-2); font-weight:700; }
.stat dd .em{ color:var(--orange-d); }

/* ---------- カテゴリ＝パーツ引き出し ---------- */
/* 4列×2段。棚が8つなので、5列だと2段目に3つしか残らない。
   ── 段の間だけ広く空ける ──
   タイルの下に**棚板**を敷くので、そのぶんの高さが要る。
   横は詰めたまま（板がつながって1枚に見えるように）。 */
.cats{
  display:grid; grid-template-columns:repeat(4,1fr);
  column-gap:14px; row-gap:46px;
  /* 支柱（::before / ::after）の位置の基準 */
  position:relative;
}

/**
 * 左右の支柱。
 *
 * 棚板だけだと、板が2枚**浮いている**ように見える。
 * 縦の柱でつなぐと、1つの棚になる。
 *
 * 幅は棚板のはみ出し（9px）とそろえる。板が柱に載って見える。
 * はみ出す量を増やすと、狭い画面で横にはみ出す。
 */
.cats::before,
.cats::after{
  content:"";
  position:absolute;
  top:-7px;
  /* いちばん下の棚板（13px）の下まで伸ばす */
  bottom:-24px;
  width:9px;
  background:linear-gradient(90deg,
    #C9A87E 0 2px, #AC8455 2px 6px, #8B6740 6px 100%);
  border-radius:2px 2px 0 0;
}
.cats::before{ left:-9px; }
.cats::after { right:-9px; }

/* 棚板が柱の手前に来るように。板が柱に載っている見え方になる */
.cat{ z-index:1; }

/**
 * 棚板。
 *
 * 「棚から選ぶ」と書いてあるのに、ただの四角が並んでいた。
 *
 * ── 1枚の板を別に置かない ──
 *
 * 段ごとに板を1枚置こうとすると、行の入れ物が要る。
 * タイルは data から回して出しているので、行の切れ目はCSSが決めている。
 * **どこで折り返すかを、CSSとHTMLの2か所で決めることになる。**
 * 列数を変えた日に、板だけ4つのままになる。
 *
 * ── だからタイル1つずつに敷く ──
 *
 * 左右を9pxずつはみ出させる。列の間は14pxなので、
 * 隣の板と4px重なり、**つながって1枚に見える。**
 * 何列でも、何段でも、勝手に正しくなる。
 */
.cat::after{
  content:"";
  position:absolute;
  /* タイルの影（0 5px）より下から始める。板の上にタイルが載っているように */
  top:calc(100% + 5px);
  left:-9px; right:-9px;
  height:13px;
  background:
    /* 木目。うっすらでいい。強いと板のほうが目立つ */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 1px, transparent 1px 7px),
    linear-gradient(#D7B98C 0 3px, #C09563 3px 9px, #9C7343 9px 100%);
  border-radius:2px;
  /* 板の落とす影。床から浮いて見せる */
  box-shadow:0 4px 6px -2px rgba(90,66,32,.35);
}
.cat{
  /* 棚板（::after）の位置の基準になる */
  position:relative;
  /* 縦に積んで、上下に振り分ける。
     「装飾」の札や、かっこの2行目があるタイルと無いタイルで
     高さが変わってしまうのを、これで吸収する。 */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:148px;
  text-decoration:none; text-align:center;
  background:linear-gradient(#F7F1E5 0%, #EDE4D2 62%, #E2D7C1 100%);
  border:2px solid var(--line-2); border-radius:8px;
  padding:20px 10px 14px;
  box-shadow:0 5px 0 rgba(176,155,114,.6), inset 0 2px 0 rgba(255,255,255,.7);
  transition:transform .12s ease, box-shadow .12s ease, border-color .15s;
}
.cat:hover{ transform:translateY(3px); box-shadow:0 2px 0 rgba(176,155,114,.6), inset 0 2px 0 rgba(255,255,255,.7); border-color:var(--orange); }
.cat svg{ width:38px; height:38px; margin:0 auto 8px; }
/* 3つに分かれた装飾が、同じ仲間だと分かるための小さな札。
   棚の名前に「装飾：」と足すと、ただでさえ長い名前がさらに伸びる。
   札にすれば、名前は短いまま仲間だと分かる。 */
.cat__g{
  display:inline-block; margin-bottom:5px;
  font-family:var(--label); font-style:normal;
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
  color:#8E2F1F; background:#FBE3DE; border:1.5px solid #EFB6AA;
  padding:1px 8px; border-radius:99px;
}
.cat b{ display:block; font-size:14.5px; font-weight:900; }
/* かっこの中は2行目へ。
   「はかる（アクセス・クリ／ック）」のように、かっこの途中で折れると読みにくい。
   行を分けてしまえば、どの幅でも同じ場所で切れる。 */
.cat i{
  display:block; margin-top:3px;
  font-style:normal; font-size:12px; font-weight:700;
  color:var(--ink-3); line-height:1.5;
}
/* 何本あるか。棚の名前より弱く、けれど読める大きさで。
   名前と同じ強さにすると、数のほうが先に目に入る。
   探しているのは中身であって、数ではない。 */
.cat__n{
  display:block; margin-top:7px;
  font-family:var(--label);
  font-size:11.5px; font-weight:800; letter-spacing:.04em;
  color:var(--ink-3);
}
/* 絞り込みの側にも同じ札。こちらは行の中に置くので小さめ */
.f-g{
  font-family:var(--label); font-style:normal;
  font-size:10px; font-weight:800;
  color:#8E2F1F; background:#FBE3DE; border:1px solid #EFB6AA;
  padding:0 5px; border-radius:99px; vertical-align:1px;
}

/* ---------- 部品カード＝合板パネル ---------- */
.grid-parts{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 20px; }
.grid-parts--2{ grid-template-columns:repeat(2,1fr); }

.part{
  position:relative; display:flex; flex-direction:column;
  border:2px solid var(--line-2); border-radius:var(--wob);
  background-color:var(--ply);
  /* 四隅のビス＋うっすら木目 */
  background-image:
    radial-gradient(circle at 11px 11px, #BFA97F 0 3.4px, rgba(0,0,0,0) 3.8px),
    radial-gradient(circle at calc(100% - 11px) 11px, #BFA97F 0 3.4px, rgba(0,0,0,0) 3.8px),
    radial-gradient(circle at 11px calc(100% - 11px), #BFA97F 0 3.4px, rgba(0,0,0,0) 3.8px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #BFA97F 0 3.4px, rgba(0,0,0,0) 3.8px),
    repeating-linear-gradient(94deg, rgba(160,132,88,.05) 0 3px, rgba(0,0,0,0) 3px 9px);
  box-shadow:0 5px 0 rgba(176,155,114,.55), 0 6px 10px var(--sh);
  transition:transform .12s ease, box-shadow .12s ease, border-color .15s;
}
.part:nth-child(even){ border-radius:var(--wob2); }
.part:hover{ transform:translateY(-4px) rotate(-.5deg); box-shadow:0 9px 0 rgba(176,155,114,.55), 0 10px 14px var(--sh); border-color:var(--orange); }

.part__head{ display:flex; align-items:center; gap:7px; padding:18px 18px 0; flex-wrap:wrap; }

/* カードにあける窓。中に実際の画面が入る */
.part__shot{
  display:block; margin:13px 18px 0; overflow:hidden;
  border:2px solid var(--line-2); border-radius:6px; background:#fff;
  box-shadow:inset 0 2px 7px rgba(90,70,40,.16);
}
.part__shot img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover; object-position:top left;
  transition:transform .18s ease;
}
.part:hover .part__shot img{ transform:scale(1.035); }

/* 下が切れる写真。切れ目をぼかして「続きがある」ように見せる。

   16:10 の枠に、それより縦長のページ写真を入れると、
   切れ目が中身と関係のないところに落ちます。
   曜日の帯が半分、PDFの箱が半分——**壊れて見えます。**

   隠すためではありません。切れていることは変わりません。
   偶然そこで切れたのではないと、読めるようにするためです。 */
.part__shot--cut{ position:relative; }
.part__shot--cut::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
  pointer-events:none;
}
/* まだ撮れていないぶん。板だけ置いて背丈を揃える */
.part__shot--none{
  aspect-ratio:16/10; display:grid; place-items:center;
  background-color:#EFE7D8;
  background-image:radial-gradient(circle at 6px 6px, rgba(150,125,85,.28) 0 1.6px, rgba(0,0,0,0) 2px);
  background-size:17px 17px;
  box-shadow:inset 0 2px 7px rgba(90,70,40,.10);
}
.part__shot--none span{
  font-family:var(--hand); font-size:12.5px; color:var(--ink-3);
  background:rgba(255,255,255,.82); border:1px dashed var(--line-2);
  border-radius:99px; padding:3px 13px; transform:rotate(-1.2deg);
}

/* ============================================================
   動くバナー（装飾の部品）

   写真ではなく、売っているコードそのものを動かしている。
   写真の枠と同じ 16:10 に揃えて、棚に並んだとき背丈がガタつかないようにする。
   中身は効果ごとに大きさが違うので、はみ出したぶんは隠す。
   ============================================================ */
.part__shot--fx{
  aspect-ratio:16/10;
  display:grid; place-items:center;
  padding:10px; overflow:hidden;
  text-decoration:none; color:inherit;
}
.part:hover .part__shot--fx{ background:#FEFCF8; }

/**
 * 見せ枠の中身は、まん中に置く。
 *
 * 効果によって、いちばん外側の箱の種類が違う。
 *   ・block で枠いっぱい      … 数字が数え上がる、棒が伸びる など
 *   ・inline-flex / inline-block … 数字の桁が回る、波紋、吸い付き、知らせ
 *   ・block だが細い          … 縦書きの見出し
 *
 * 何もしないと、下の2つが左に張り付く。中身の作りは商品ごとの都合なので、
 * **商品のCSSは触らず、枠のほうで寄せる。**
 * 買った人のページでは、置いた場所のとおりに出したいので、この指定は店だけ。
 */
.fx-demo{ width:100%; text-align:center; }
/* 動きの途中で横に出るものがあるので、そこだけ抑える */
.fx-demo > *{ max-width:100%; }
/* 枠より細い block（縦書きなど）を中央へ。
   枠より広いものは margin:auto が効かないので、そのまま。

   margin-inline ではなく margin-left / margin-right と書くこと。
   論理プロパティは**その要素自身の書字方向**で解決されるので、
   縦書き（writing-mode:vertical-rl）の中身では margin-inline が
   上下になってしまい、横には寄らない。 */
.fx-demo > *{ margin-left:auto; margin-right:auto; }

/* 見本の文字。効果ごとに大きさを変えると比べにくいので、2段階だけ */
.fx-demo__big{
  margin:0; font-weight:900; font-size:clamp(22px,7cqi,34px);
  letter-spacing:.02em; text-align:center;
}
.fx-demo__mid{
  margin:0; font-weight:700; font-size:clamp(14px,4.4cqi,18px);
  line-height:1.7; text-align:center;
}
/* 見本のカード（いまは「傾くカード」だけが使う）。

   枠いっぱいに広げてはいけない。傾けたときに角が枠からはみ出し、
   overflow:hidden で切り取られるため、**回転が見えず
   「少し大きくなるだけ」に見える。**
   カードらしい縦横比にすると、傾きがそのまま見える。 */
/* 見本のカード（いまは「傾くカード」だけが使う）。

   ── 濃い色にする理由 ──

   この効果は、カーソルの位置に**白い光**を置いて立体に見せる。
   薄い地に白を置いても見えないので、光が消える。
   元のサイト（next-site）も濃い地のカードにしている。

   ── 枠いっぱいに広げない理由 ──

   傾けたときに角が枠からはみ出し、overflow:hidden で切り取られる。
   切られると回転が見えず、「少し大きくなるだけ」に見える。

   ── 文字の大きさに差をつける理由 ──

   同じ大きさの字が並んでいるより、大小があるほうが
   面の傾きを読み取りやすい。 */
.fx-demo__card{
  width:min(230px,100%);
  padding:24px 22px; border-radius:12px;
  background:var(--ink); color:#F4EFE5;
  text-align:center; line-height:1.6;
}
.fx-demo__card b{ display:block; font-size:21px; font-weight:900; letter-spacing:.04em; }
.fx-demo__card span{ display:block; margin-top:8px; font-size:12px; color:#C9BFB0; }
.fx-demo__card i{ display:block; margin-top:8px; font-style:normal; font-size:11px; color:#9A9186; }
.fx-demo__btn{
  padding:11px 22px; border:2px solid var(--ink); border-radius:99px;
  background:var(--orange); color:#fff;
  font-family:var(--round); font-weight:800; font-size:13.5px; cursor:pointer;
}

/* 商品ページのバナーは大きく見せる */
.shot--fx{
  margin:24px 0; padding:26px 24px;
  border:2px solid var(--line-2); border-radius:12px;
  background:var(--ply);
  container-type:inline-size;   /* 中の clamp(...cqi) がこの枠で決まる */
}
.shot--fx .fx-demo__big{ font-size:clamp(28px,9cqi,52px); }
.shot--fx .fx-demo__mid{ font-size:clamp(16px,4cqi,22px); }
.shot--fx .shot__cap{ margin-top:18px; }

.part__shot--fx{ container-type:inline-size; }
.part__body{ padding:10px 20px 6px; flex:1 1 auto; }
.part__body h3{ font-size:18px; font-weight:900; margin:0 0 8px; line-height:1.55; }
.part__body h3 a{ text-decoration:none; }
.part__body h3 a:hover{ color:var(--orange-d); }
.part__body p{ margin:0 0 12px; font-size:13.5px; color:var(--ink-2); line-height:1.85; }

.spec-mini{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; padding:0; list-style:none; }
.spec-mini li{
  font-family:var(--label); font-weight:700; font-size:10.5px; color:var(--ink-2);
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  border-radius:99px; padding:1px 9px;
}

.part__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 20px 18px; margin-top:6px;
  border-top:2px dashed var(--line);
}
.price{ font-family:var(--label); font-size:22px; font-weight:800; }
.price small{ font-size:11px; color:var(--ink-3); font-weight:700; margin-left:2px; }

/* ---------- 理由（工具の吊り札） ---------- */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat__item{
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  padding:28px 22px 22px; position:relative;
  box-shadow:0 5px 0 rgba(176,155,114,.55), 0 6px 10px var(--sh);
}
.feat__item:nth-child(2){ border-radius:var(--wob2); }
.feat__no{
  position:absolute; top:-16px; left:20px;
  font-family:var(--hand); font-size:14px; color:#fff;
  background:var(--teal); border-radius:99px; padding:3px 15px;
  transform:rotate(-2deg); box-shadow:0 3px 0 #2E7A7C;
}
.feat__item:nth-child(2) .feat__no{ background:var(--orange); box-shadow:0 3px 0 var(--orange-d); }
.feat__item:nth-child(3) .feat__no{ background:var(--red); box-shadow:0 3px 0 #A93724; }
.feat__item h3{ font-size:18.5px; font-weight:900; margin:6px 0 10px; }
.feat__item p{ margin:0; font-size:14px; color:var(--ink-2); }

/* ---------- 手順（六角ボルト） ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step{
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  padding:24px 18px 20px; text-align:center; position:relative;
  box-shadow:0 5px 0 rgba(176,155,114,.55), 0 6px 10px var(--sh);
}
.step:not(:last-child)::after{
  content:"→"; position:absolute; right:-16px; top:50%; transform:translateY(-50%);
  font-size:20px; color:var(--steel); z-index:1;
}
.step__no{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:10px;
  background:linear-gradient(var(--yellow), #DCA300); color:var(--ink);
  font-family:var(--label); font-weight:800; font-size:17px;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  box-shadow:0 3px 4px var(--sh);
}
.step h3{ font-size:16px; font-weight:900; margin:0 0 8px; }
.step p{ margin:0; font-size:13px; color:var(--ink-2); text-align:left; }

/* ---------- 決済 ---------- */
/**
 * 支払いの4枚。
 *
 * ── 2列にします ──
 *
 * 前は `flex:1 1 240px` で、幅なりに4枚が横一列に並んでいました。
 * 1枚あたりの文字の幅が200pxほどしかなく、
 * **10文字ごとに改行**していました。リンクの「お問い／合わせ」まで割れていた。
 *
 * 枠を広くすれば、文が1〜2行で収まります。
 * 短い文を2列で並べるほうが、細い柱に4本詰めるより読めます。
 */
.pay{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:720px){ .pay{ grid-template-columns:minmax(0,1fr); } }
.pay__item{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  padding:18px 20px; box-shadow:0 4px 0 rgba(176,155,114,.55);
}
.pay__item svg{ width:34px; height:34px; flex:0 0 auto; }
.pay__item b{ display:block; font-size:15.5px; font-weight:900; margin-bottom:3px; }
.pay__item span{ font-size:13px; color:var(--ink-2); }

/* ---------- なかのひと ---------- */
.owner{
  display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center;
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  padding:34px 32px; box-shadow:0 6px 0 rgba(176,155,114,.55), 0 8px 12px var(--sh);
}
.owner__pic{
  width:170px; height:170px; border-radius:50%;
  background:var(--yellow-l); border:3px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
.owner__pic svg{ width:124px; height:124px; }
.owner h3{ font-size:21px; font-weight:900; margin:0 0 12px; }
.owner p{ font-size:14.5px; color:var(--ink-2); margin:0 0 12px; }
.owner p:last-child{ margin-bottom:0; }
.owner .sign{ font-family:var(--hand); font-size:15px; color:var(--orange-d); }

/* ---------- FAQ ---------- */
.faq details{
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  margin-bottom:12px; box-shadow:0 4px 0 rgba(176,155,114,.5);
}
.faq details:nth-child(even){ border-radius:var(--wob2); }
.faq summary{
  cursor:pointer; list-style:none; padding:16px 20px;
  font-weight:900; font-size:15.5px; display:flex; gap:12px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"Q"; font-family:var(--label); font-weight:800; color:var(--ink);
  background:linear-gradient(var(--yellow),#DCA300);
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; flex:0 0 auto;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}
.faq summary::after{ content:"＋"; margin-left:auto; color:var(--ink-3); font-size:16px; }
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin:0; padding:0 20px 20px 58px; font-size:14px; color:var(--ink-2); }

/* ---------- フッター ---------- */
.site-foot{ background:#33302C; color:#B4AA9B; }
.site-foot .wrap{ padding-block:46px 26px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; }
.site-foot h4{ font-family:var(--hand); font-size:14px; color:var(--yellow); margin:0 0 12px; font-weight:400; }
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:8px; }
.site-foot a{ color:#DCD3C4; text-decoration:none; font-size:13.5px; }
.site-foot a:hover{ color:#fff; }
.site-foot .logo__text{ color:#F4EFE5; }
/* フッターは暗い下地なので、黒にはできない。
   ただし #9A8F7F は 3.9:1 で、こちらも基準割れだった。#C9BFB0 で 7.4:1。 */
.site-foot .logo__sub{ color:#C9BFB0; }
.foot-note{ font-size:13px; line-height:1.9; margin:14px 0 0; }
.foot-bottom{
  margin-top:32px; padding-top:18px; border-top:1px dashed #5E574E;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:#9A8F7F;
}

/* ---------- パンくず ---------- */
.crumbs{ font-family:var(--hand); font-size:13px; color:var(--ink-3); padding-block:16px; }
.crumbs a{ text-decoration:none; color:var(--ink-2); }
.crumbs a:hover{ color:var(--orange-d); }

/* ---------- 一覧ページ ---------- */
.list-layout{ display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:start; padding-block:20px 80px; }
.filter{
  position:sticky; top:92px;
  /* パネルが画面より高いと、sticky のせいで下端まで永久にたどり着けなくなる。
     中で独立してスクロールさせることで解決する */
  max-height:calc(100vh - 108px);
  max-height:calc(100dvh - 108px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  box-shadow:0 5px 0 rgba(176,155,114,.55);
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.filter::-webkit-scrollbar{ width:11px; }
.filter::-webkit-scrollbar-track{ background:transparent; }
.filter::-webkit-scrollbar-thumb{
  background:var(--line-2); border-radius:99px; border:3px solid var(--ply);
}
.filter__group{ padding:16px 20px; border-bottom:2px dashed var(--line); }
/* 検索欄は中でスクロールしても見えたままにする */
.filter__group--search{ position:sticky; top:0; z-index:2; background:var(--ply); }
.filter__group--reset{ position:sticky; bottom:0; background:var(--ply); border-top:2px dashed var(--line); }
.filter__group:last-child{ border-bottom:0; }
.filter h3{ font-family:var(--hand); font-size:13.5px; color:var(--orange-d); margin:0 0 10px; font-weight:400; }
.filter label{ display:flex; align-items:center; gap:9px; font-size:13.5px; padding:3px 0; cursor:pointer; }
.filter label span{ margin-left:auto; font-family:var(--label); font-size:11.5px; color:var(--ink-3); }
.filter input[type=checkbox]{ accent-color:var(--orange); width:16px; height:16px; }
.filter input[type=search]{
  width:100%; padding:9px 14px; border:2px solid var(--line-2); border-radius:99px;
  background:#FBF6EC; font-family:var(--round); font-size:14px; color:var(--ink);
}

.list-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.list-head h1{ font-size:30px; font-weight:900; margin:0; }
.list-head .count{ font-family:var(--hand); font-size:13.5px; color:var(--ink-3); }
.list-head select{
  padding:8px 14px; border:2px solid var(--line-2); border-radius:99px;
  background:var(--ply); font-family:var(--round); font-size:13px; color:var(--ink);
}

/* ---------- 棚のページの、ほかの棚へのリンク ----------
   タイル（.cat）と同じ形にしない。あちらは「選ぶところ」、
   こちらは「見終わったあとの出口」。同じ大きさで出すと、
   棚のページに棚が2つあるように見える */
/* 4列×2段。棚は8つなので、ぴったり埋まる。
   幅なりに折り返させると、長さがまちまちなので 6+1 のような欠け方をする */
.shelf-links{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.shelf-link{
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  padding:9px 14px;
  background:var(--ply); border:2px solid var(--line-2); border-radius:99px;
  text-decoration:none; color:var(--ink);
  box-shadow:0 3px 0 rgba(176,155,114,.5);
  transition:transform .12s ease, box-shadow .12s ease, border-color .15s;
}
.shelf-link:hover{
  transform:translateY(2px); box-shadow:0 1px 0 rgba(176,155,114,.5);
  border-color:var(--orange);
}
.shelf-link b{ font-size:14px; font-weight:900; }
.shelf-link i{ font-style:normal; font-family:var(--label); font-size:11.5px; color:var(--ink-3); }
/* いま見ている棚。押せないので、押せる見た目にしない */
.shelf-link--here{
  background:#EDE4D2;
  border-style:dashed; box-shadow:none; cursor:default;
}
.shelf-link--here b{ color:var(--ink-3); }

@media (max-width:900px){ .shelf-links{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .shelf-links{ grid-template-columns:1fr; } }

/**
 * ── 狭い画面では、文の途中の <br> を効かせない ──
 *
 * <br> は「どの幅でも1行に収まる短い文」を2〜3本並べるための道具。
 * スマホの幅では、25字の文でも2行になる。
 *
 * そこで <br> が残っていると、
 *
 *   全部入りを買っても、使うのは
 *   結局わずかだったりします。      ← ここで <br>
 *   本当に必要な機能を、
 *
 * のように、短い行と長い行が交互に出る。
 *
 * ── 住所や箇条書きの <br> は消さない ──
 *
 * 表（.legal）や領収書の中の <br> は、行そのものが意味を持つ。
 * ここでは散文の入れものだけを名指しする。
 */
@media (max-width:600px){
  .lead br,
  .hero__text p br,
  .foot-note br,
  .notice br,
  .mascot-say__bubble br{ display:none; }
}

/* ---------- 詳細ページ ---------- */
.detail{ display:grid; grid-template-columns:1fr 330px; gap:40px; align-items:start; padding-block:16px 80px; }
.detail h1{ font-size:clamp(25px,3.8vw,35px); font-weight:900; line-height:1.45; margin:12px 0 16px; }
.detail__meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.detail__desc{ font-size:15.5px; color:var(--ink-2); margin:0 0 28px; }

/* 商品のスクリーンショット。合板の板に写真を貼った見立て */
.shot{
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  padding:14px; box-shadow:0 6px 0 rgba(176,155,114,.55), 0 8px 12px var(--sh);
  margin:0 0 26px;
}
.shot:nth-of-type(even){ border-radius:var(--wob2); }
.shot a{ display:block; border-radius:8px; }
.shot a:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.shot img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line-2); border-radius:8px;
  background:#fff;
  transition:box-shadow .15s ease;
}
.shot a:hover img{ box-shadow:0 0 0 3px var(--orange); }
.shot__inner{
  aspect-ratio:16/9; background:var(--ply-2);
  border:2px dashed var(--line-2); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hand); font-size:14px; color:var(--ink-3);
}
.shot__cap{ font-family:var(--hand); font-size:13px; color:var(--ink-3); margin:10px 0 0; text-align:center; line-height:1.7; }

.detail h2{ font-size:21px; font-weight:900; margin:40px 0 16px; display:flex; align-items:center; gap:10px; }
.detail h2::before{
  content:""; width:22px; height:22px; flex:0 0 auto;
  background:linear-gradient(var(--yellow),#DCA300);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}
.detail p{ font-size:14.5px; color:var(--ink-2); }

.ticks{ list-style:none; padding:0; margin:0; }
.ticks li{ position:relative; padding-left:32px; margin-bottom:11px; font-size:14.5px; }
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:.05em;
  width:22px; height:22px; border-radius:50%;
  background:var(--teal-l); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900;
}

table.spec{
  width:100%; border-collapse:separate; border-spacing:0; font-size:14px;
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob); overflow:hidden;
}
table.spec th,table.spec td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px dashed var(--line); }
table.spec tr:last-child th,table.spec tr:last-child td{ border-bottom:0; }
table.spec th{ background:var(--ply-2); width:34%; font-weight:900; font-size:13.5px; }
table.spec td{ color:var(--ink-2); }

/* 購入ボックス＝金属の値札プレート */
/* ── 貼り付けるのは「枠だけ」ではなく「列ごと」──

   前は .buybox に position:sticky を付けていた。
   すると買い物枠だけがその場に残り、**下の注意書きがその裏を通る。**
   スクロールすると重なって見えた。

   sticky の正しい動きではあるが、見た目としては壊れている。

   列（aside）ごと貼り付ければ、枠と注意書きが一緒に動くので、
   追い越しようがない。

   align-self:start が要る。grid の子は既定で高さいっぱいに伸び、
   **伸びた要素は貼り付かない**（貼り付く余地が無くなる）。 */
.detail > aside{ align-self:start; }

/* ── 収まるときだけ貼り付ける ──

   列は 684px ある（全商品ページで同じ）。上を 92px 空けるので、
   **視野が 800px 無いと下が切れる。**

   切れたまま貼り付くと、いちばん下までスクロールして
   貼り付きが外れるまで、注意書きの下半分が読めない。
   実際そうなっていた（700px の画面で 76px 切れ）。

   返金の条件が書いてある枠なので、**読めないのは困る。**
   貼り付きは便利なだけのもの。読めることのほうが上。

   狭い画面では、ふつうに流れて全部読める。 */
@media (min-width:1001px) and (min-height:800px){
  .detail > aside{ position:sticky; top:92px; }
}

.buybox{
  background:var(--ply); border:3px solid var(--ink); border-radius:var(--wob);
  box-shadow:0 6px 0 var(--ink), 0 8px 14px var(--sh); overflow:hidden;
}
.buybox__top{
  background:repeating-linear-gradient(-45deg, var(--yellow) 0 14px, #33302C 14px 28px);
  color:#fff; padding:0; height:11px;
}
.buybox__label{
  background:#33302C; color:#F2EEE6; padding:8px 18px; text-align:center;
  font-family:var(--hand); font-size:13.5px;
}
.buybox__body{ padding:22px 22px 24px; }
.buybox .price{ font-size:38px; display:block; line-height:1.25; }
.buybox__tax{ font-size:12.5px; color:var(--ink-3); display:block; margin-bottom:18px; }
.buybox ul{ list-style:none; padding:16px 0 0; margin:18px 0 0; border-top:2px dashed var(--line); }
.buybox li{ font-size:13px; color:var(--ink-2); display:flex; gap:8px; margin-bottom:7px; }
.buybox li::before{ content:"✓"; color:var(--teal); font-weight:900; }

/* ---------- カート / 決済 ---------- */
.checkout{ display:grid; grid-template-columns:1fr 350px; gap:36px; align-items:start; padding-block:16px 80px; }
.panel{
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  box-shadow:0 5px 0 rgba(176,155,114,.55); margin-bottom:26px; overflow:hidden;
}
.panel__head{
  padding:14px 20px; border-bottom:2px dashed var(--line); background:var(--ply-2);
  display:flex; align-items:center; gap:12px;
}
.panel__head .n{
  width:28px; height:28px; background:linear-gradient(var(--yellow),#DCA300); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--label); font-weight:800; font-size:13px; flex:0 0 auto;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}
.panel__head b{ font-size:16px; font-weight:900; }
.panel__body{ padding:22px; }

.cart-row{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:14px 0; border-bottom:2px dashed var(--line); }
.cart-row:last-child{ border-bottom:0; }
.cart-row b{ display:block; font-size:15.5px; font-weight:900; margin-bottom:6px; }
.cart-row .price{ font-size:18px; }

.payopt{
  display:block; background:#FBF6EC; border:2px solid var(--line-2); border-radius:var(--wob);
  padding:16px 20px; margin-bottom:14px; cursor:pointer; transition:border-color .15s, background .15s;
}
.payopt:has(input:checked){ border-color:var(--orange); background:var(--orange-l); }
.payopt__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.payopt input{ accent-color:var(--orange); width:18px; height:18px; }
.payopt b{ font-size:15.5px; font-weight:900; }
.payopt .tag{ margin-left:auto; font-family:var(--hand); font-size:12px; color:var(--ink-3); }
.payopt p{ margin:8px 0 0 30px; font-size:13px; color:var(--ink-2); }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:14px; font-weight:900; margin-bottom:6px; }
.field label em{ font-style:normal; color:#fff; background:var(--red); border-radius:99px; font-size:11px; padding:1px 9px; margin-left:8px; font-family:var(--label); font-weight:700; }
.field label .opt{ color:var(--ink-3); font-size:12px; font-weight:500; margin-left:8px; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--round); font-size:15px; padding:12px 16px;
  border:2px solid var(--line-2); border-radius:12px; background:#FBF6EC; color:var(--ink);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--orange); background:#fff; }
.field small{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:6px; }

.total{
  position:sticky; top:92px;
  background:var(--ply); border:3px solid var(--ink); border-radius:var(--wob);
  box-shadow:0 6px 0 var(--ink), 0 8px 14px var(--sh); overflow:hidden;
}
.total__body{ padding:22px; }
.total dl{ margin:0 0 14px; }
.total dl div{ display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px dashed var(--line); }
.total dl div:last-child{ border-bottom:0; }
.total dt{ color:var(--ink-2); }
.total dd{ margin:0; font-family:var(--label); font-weight:700; }
.total .grand{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:2px dashed var(--line-2); margin-bottom:20px; }
.total .grand span{ font-weight:900; }
.total .grand .price{ font-size:30px; }

.notice{
  background:var(--yellow-l); border:2px solid #E7CE86; border-radius:var(--wob);
  padding:16px 18px; font-size:13.5px; color:var(--ink-2);
}
.notice b{ display:block; margin-bottom:6px; color:var(--ink); font-weight:900; }
.notice--teal{ background:var(--teal-l); border-color:#A6D2D2; }

.bankinfo{
  background:var(--ply-2); border:2px dashed var(--line-2); border-radius:var(--wob);
  padding:16px 18px; font-size:14px;
}
.bankinfo div{ display:flex; gap:12px; padding:4px 0; }
.bankinfo dt{ color:var(--ink-3); width:7.5em; flex:0 0 auto; font-size:13px; }
.bankinfo dd{ margin:0; font-family:var(--label); font-weight:700; }

/* ============================================================
   かごの中身（assets/cart.js が書きます）
   ============================================================ */
.cart-row__pick{
  margin:6px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.7;
}
/* 「えらび直す」は中身の並びと地続きにしない。
   行の続きに見えると、5個目の名前だと思われる */
.cart-row__pick a{ display:block; margin-top:4px; font-weight:800; }
.cart-row__qty{ display:flex; align-items:center; gap:6px; margin-top:10px; }
.cart-row__qty button{
  width:28px; height:28px; padding:0; line-height:1;
  border:2px solid var(--line-2); border-radius:8px;
  background:var(--ply); font-weight:900; cursor:pointer;
}
.cart-row__qty button:hover{ border-color:var(--ink-3); }
.cart-row__qty > span{ min-width:2.2em; text-align:center; font-weight:800; }
/* .cart-row__qty button より詳しく書くこと。
   .cart-row__del だけだと width:28px に負けて「やめ／る」と割れる */
.cart-row__qty .cart-row__del{
  width:auto; height:28px; padding:0 12px; margin-left:6px;
  white-space:nowrap;
  border-style:dashed; font-size:12px; font-weight:700; color:var(--ink-3);
}

.cart-empty{ text-align:center; padding:26px 10px; }
.cart-empty p{ margin:0 0 6px; }
.cart-added{ margin:12px 0 0; text-align:center; font-size:13.5px; font-weight:800; }
.pay-error{
  margin:12px 0 0; padding:10px 12px; font-size:13px;
  color:#8E2F1F; background:#FDECE8;
  border:2px solid #F0BDB2; border-radius:10px;
}
.notice--red{ background:#FDECE8; border-color:#F0BDB2; }

/* 押せないボタンは、押せないと見て分かること。
   （長い理由が入るので、字を少し落とす） */
.btn[disabled]{
  --bg:#CFC6B7; --edge:#B3A997;
  font-size:14.5px; cursor:not-allowed;
}
.btn[disabled]:hover,
.btn[disabled]:active{
  filter:none; transform:none; box-shadow:0 4px 0 var(--edge);
}
.btn.is-done{ --bg:var(--teal); --edge:#2E7A7C; }

/* ---------- 「選べる5個」をえらぶところ ---------- */
.pick{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:14px; margin:20px 0 10px;
}
.pick__item{
  display:grid; grid-template-columns:auto 1fr; gap:9px 10px; align-items:center;
  padding:12px; cursor:pointer;
  background:var(--ply); border:2px solid var(--line-2); border-radius:12px;
  transition:border-color .15s, background .15s, opacity .15s;
}
.pick__item:hover{ border-color:var(--ink-3); }
.pick__item.is-on{ border-color:var(--orange); background:var(--orange-l); }
/* 5個そろったら、残りは押せない。「6個目を外して」と言わずに済む */
.pick__item.is-off{ opacity:.42; cursor:not-allowed; }
.pick__item input{ accent-color:var(--orange); width:18px; height:18px; }
.pick__name{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  font-size:14px; font-weight:800; line-height:1.5;
}
/* 高さは中身に合わせるが、下限だけ揃える。
   16/9 で切ると、字だけの効果のときに空白ばかりの箱になる */
.pick__demo{
  grid-column:1 / -1;
  container-type:inline-size;   /* 中の clamp(...cqi) がこの枠で決まる */
  min-height:92px; max-height:150px; display:grid; place-items:center;
  padding:12px 10px; overflow:hidden;
  background:#FEFCF8; border:1.5px dashed var(--line-2); border-radius:8px;
}
.pick__demo .fx-demo__big{ font-size:clamp(20px,9cqi,30px); }
.pick__demo .fx-demo__mid{ font-size:clamp(13px,5cqi,16px); }
.pick__count{
  font-family:var(--label); font-weight:800; text-align:right; margin:0 0 8px;
}
.pick__count b{ font-size:21px; color:var(--orange-d); }

/* ---------- 特商法 ---------- */
.legal table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px;
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob); overflow:hidden;
}
.legal th,.legal td{ padding:15px 18px; text-align:left; vertical-align:top; border-bottom:1px dashed var(--line); }
.legal tr:last-child th,.legal tr:last-child td{ border-bottom:0; }
.legal th{ background:var(--ply-2); width:28%; font-weight:900; font-size:14px; }
.legal td{ color:var(--ink-2); }
/* 表の中の文は <br> ではなく段落で分ける。
   <br> だと、折り返した文のあとで切れて行の端がガタガタになる。
   段落なら、どの幅でも「文のかたまり」として読める */
.legal td > p{ margin:0 0 .55em; }
.legal td > p:last-child{ margin-bottom:0; }
.legal td ul{ margin:0 0 .55em; padding-left:1.25em; }
.legal td li{ margin:0; }

/* ---------- マスコット「ネジオ」 ---------- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ふきだしでしゃべる */
.mascot-say{ display:flex; align-items:flex-end; gap:16px; }
.mascot-say__fig{ width:88px; flex:0 0 auto; }
.mascot-say__fig svg{ width:100%; height:auto; overflow:visible; }
.mascot-say__bubble{
  position:relative; flex:1 1 auto;
  background:#FBF6EC; border:2.5px solid var(--ink); border-radius:var(--wob);
  padding:14px 20px; margin-bottom:14px;
  font-family:var(--hand); font-size:14.5px; line-height:1.9; color:var(--ink);
  box-shadow:0 4px 0 rgba(51,48,44,.22);
}
.mascot-say__bubble::before{
  content:""; position:absolute; left:-10px; bottom:18px; width:16px; height:16px;
  background:#FBF6EC; border-left:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
  transform:rotate(45deg);
}
.mascot-say__bubble b{ color:var(--orange-d); }
.mascot-say--sm .mascot-say__fig{ width:62px; }
.mascot-say--sm .mascot-say__bubble{ font-size:13.5px; padding:11px 16px; }

/* 穴から顔を出すパターン */
.mascot-say--hole .mascot-say__fig{ width:132px; }
.mascot-say--hole .mascot-say__bubble{ margin-bottom:26px; }

/* 顔だけ小さく出す */
.mascot-head{ width:38px; height:38px; flex:0 0 auto; }

.foot-mascot{ display:inline-flex; align-items:center; gap:9px; font-family:var(--hand); }
.foot-mascot svg{ width:36px; height:36px; }

@media (max-width:640px){
  .mascot-say{ gap:10px; }
  /* 穴から出ているほう（--hole）は 132px の指定が別にあり、
     こちらより強い。名指ししないと、狭い画面で絵だけ大きいまま残り、
     ふきだしが画面からはみ出す（お問い合わせのページで実際に出た） */
  .mascot-say__fig,
  .mascot-say--hole .mascot-say__fig{ width:66px; }
  /* ふきだしは縮んでよい。flex の既定（min-width:auto）だと、
     中身の最小幅より小さくなれず、押し出される */
  .mascot-say__bubble{ min-width:0; }
}

/* ---------- 文章ページ（規約・ポリシーなど） ---------- */
.prose{ max-width:40em; }   /* ch ではなく em。上の覚書を参照 */
.prose > :first-child{ margin-top:0; }
.prose h2{
  font-size:20px; font-weight:900; margin:40px 0 14px;
  display:flex; align-items:center; gap:10px;
}
.prose h2::before{
  content:""; width:20px; height:20px; flex:0 0 auto;
  background:linear-gradient(var(--yellow),#DCA300);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}
.prose h3{ font-size:16.5px; font-weight:900; margin:26px 0 8px; }
.prose p{ font-size:14.5px; color:var(--ink-2); margin:0 0 14px; }
.prose ul,.prose ol{ margin:0 0 16px; padding-left:1.5em; font-size:14.5px; color:var(--ink-2); }
.prose li{ margin-bottom:8px; }
.prose li::marker{ color:var(--orange); font-weight:700; }
.prose dl{ margin:0 0 16px; }
.prose dt{ font-weight:900; font-size:14.5px; margin-top:14px; }
.prose dd{ margin:4px 0 0; font-size:14.5px; color:var(--ink-2); }
.prose a{ color:var(--orange-d); }
.updated{ font-family:var(--hand); font-size:13px; color:var(--ink-3); margin-top:36px; }

/* ---------- 完了ページ・404 ---------- */
.hero-done{ text-align:center; padding-block:56px 8px; }
.hero-done__fig{ width:190px; margin:0 auto 18px; }
.hero-done__fig svg{ width:100%; height:auto; overflow:visible; }
.hero-done h1{ font-size:clamp(25px,3.8vw,34px); font-weight:900; margin:0 0 14px; line-height:1.5; }
.hero-done p{ color:var(--ink-2); margin:0 auto 8px; max-width:30em; font-size:15.5px; }
.hero-done .btn{ margin-top:18px; }

/**
 * ── 列の数は、画面ではなく**枠**で決める ──
 *
 * ここは .wrap--narrow（800px）の中にあります。**画面を広げても800pxのまま**です。
 * 3列に割ると1列240pxしかなく、30字の文が4行になっていました。
 *
 * メディアクエリは画面の幅を見るので、ここでは効きません。
 * 入るぶんだけ並べる形にします（800pxなら2列、広い枠なら3列）。
 */
.steps--3{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }

/* ダウンロードの受け取り口 */
.getbox{
  background:var(--ply); border:3px solid var(--ink); border-radius:var(--wob);
  box-shadow:0 6px 0 var(--ink), 0 8px 14px var(--sh); overflow:hidden; margin-bottom:28px;
}
.getbox__top{
  background:repeating-linear-gradient(-45deg, var(--yellow) 0 14px, #33302C 14px 28px);
  height:11px;
}
.getbox__label{ background:#33302C; color:#F2EEE6; padding:9px 18px; text-align:center; font-family:var(--hand); font-size:13.5px; }
.getbox__body{ padding:26px 26px 28px; text-align:center; }
.getbox__file{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:#FBF6EC; border:2px solid var(--line-2); border-radius:12px;
  padding:14px 18px; margin-bottom:14px; text-align:left;
}
.getbox__file b{ display:block; font-size:15.5px; }
.getbox__file span{ font-family:var(--label); font-size:12px; color:var(--ink-3); }

/* ---------- お問い合わせ ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start; }
@media (max-width:1000px){ .contact-layout{ grid-template-columns:1fr; } }

/* ---------- 掘り当たらなかったとき ---------- */
.empty-dig{ text-align:center; padding:52px 20px 44px; }
.empty-dig__fig{ width:155px; margin:0 auto 16px; }
.empty-dig h2{ font-size:21px; font-weight:900; margin:0 0 10px; }
.empty-dig p{ font-size:14.5px; color:var(--ink-2); margin:0 auto 20px; max-width:28em; }

/* ---------- utility ---------- */
/* .part などが display:flex を持っているので、hidden 属性を効かせるには !important が要る */
[hidden]{ display:none !important; }
.center{ text-align:center; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.mt24{ margin-top:24px; } .mt32{ margin-top:32px; } .mb32{ margin-bottom:32px; }
.hand{ font-family:var(--hand); }
.muted{ color:var(--ink-3); }

/* ---------- レスポンシブ ---------- */
@media (max-width:1000px){
  .hero .wrap{ grid-template-columns:1fr; gap:36px; padding-block:48px 56px; }
  .detail,.checkout{ grid-template-columns:1fr; }
  /* 縦に積むので、貼り付けをやめる。
     .detail > aside は、上の @media が幅も見ているので、ここには要らない */
  .buybox,.total,.filter{ position:static; }
  /* 横並びをやめたら、絞り込みは高さいっぱいに開いてよい */
  .filter{ max-height:none; overflow:visible; }
  .filter__group--search,.filter__group--reset{ position:static; }
  .list-layout{ grid-template-columns:1fr; }
  .cats{ grid-template-columns:repeat(2,1fr); }
  .grid-parts{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2)::after{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .owner{ grid-template-columns:1fr; text-align:center; }
}
/* 折らないと決めたぶん、狭いところでは詰めて入れる。
   ここを入れないと、幅700あたりで横にはみ出す。 */
@media (max-width:900px){
  .site-head .wrap{ gap:14px; }
  .gnav{ gap:11px; }
  .gnav a{ font-size:13.5px; }
  .logo{ gap:8px; }
  .logo__mark{ width:42px; height:42px; }
}

@media (max-width:640px){
  :root{ --gut:18px; }
  .gnav{ display:none; }
  /* メニューが消えたら、ロゴは元の大きさに戻す */
  .logo__mark{ width:48px; height:48px; }
  .grid-parts,.grid-parts--2,.feat,.cats{ grid-template-columns:1fr; }
  .cats{ row-gap:32px; }
  .steps{ grid-template-columns:1fr; }
  .step::after{ display:none !important; }
  .statbar .wrap{ grid-template-columns:repeat(2,1fr); gap:18px 8px; }
  .stat:nth-child(3)::before{ display:none; }
  .foot-grid{ grid-template-columns:1fr; }
  .section{ padding-block:52px; }
  .sticker{ display:none; }
}

/* ============================================================
   領収書

   経理に回る紙なので、店のゆるい見た目は持ち込まない。
   白地・角なし・読みやすさだけ。
   ============================================================ */
.receipt{
  background:#fff; color:#1F1D1A;
  border:2px solid var(--line-2); border-radius:10px;
  padding:32px 34px; margin-top:24px;
  font-size:14px; line-height:1.9;
}
.receipt__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap;
}
.receipt__title{
  font-size:26px; font-weight:900; letter-spacing:.22em;
  border-bottom:2px solid #1F1D1A; padding-bottom:4px;
}
.receipt__no{ font-size:12.5px; text-align:right; }
.receipt__no div{ display:flex; gap:10px; justify-content:flex-end; }
.receipt__no dt{ color:#6B655C; }
.receipt__no dd{ margin:0; font-family:var(--label); font-weight:700; }

/* 宛名。入力欄のまま印刷されるので、線だけ残して枠は消す */
.receipt__to{
  display:flex; align-items:baseline; gap:8px;
  margin:30px 0 22px; font-size:18px;
}
.receipt__to input{
  flex:1 1 auto; min-width:0;
  font:inherit; font-weight:700; color:inherit;
  padding:4px 6px; background:transparent;
  border:0; border-bottom:1.5px solid #1F1D1A; border-radius:0;
}
.receipt__to input:focus{ outline:2px solid var(--orange); outline-offset:2px; }

.receipt__sum{
  display:flex; align-items:baseline; gap:18px;
  padding:14px 18px; margin-bottom:18px;
  border:2px solid #1F1D1A; border-radius:6px;
}
.receipt__sum span{ font-size:14px; letter-spacing:.1em; }
.receipt__sum b{ font-size:30px; font-weight:900; font-family:var(--label); }

.receipt__note{ margin:0 0 26px; font-size:13.5px; }

.receipt__items{ width:100%; border-collapse:collapse; margin-bottom:20px; font-size:13px; }
.receipt__items th,
.receipt__items td{ padding:8px 6px; border-bottom:1px solid #D8D2C6; text-align:left; }
.receipt__items thead th{ border-bottom:1.5px solid #1F1D1A; font-size:12px; color:#6B655C; }
.receipt__items .num{ text-align:right; white-space:nowrap; }
.receipt__items small{ font-size:11px; color:#6B655C; }

.receipt__tax{ margin-left:auto; border-collapse:collapse; font-size:13px; min-width:250px; }
.receipt__tax th,
.receipt__tax td{ padding:6px 10px; border-bottom:1px solid #D8D2C6; }
.receipt__tax th{ text-align:left; font-weight:400; color:#6B655C; }
.receipt__tax td{ text-align:right; font-family:var(--label); font-weight:700; white-space:nowrap; }
.receipt__tax .is-total th{ color:#1F1D1A; font-weight:700; }
.receipt__tax .is-total td{ font-size:16px; border-bottom:0; }
.receipt__tax-note{ margin:6px 0 0; font-size:11.5px; color:#6B655C; text-align:right; }

.receipt__from{
  margin-top:30px; padding-top:18px;
  border-top:1px solid #D8D2C6; font-size:12.5px; line-height:1.85;
}
.receipt__from b{ display:block; font-size:15px; font-weight:900; margin-bottom:2px; }
.receipt__stamp{ margin:14px 0 0; font-size:11.5px; color:#6B655C; }

/* ---------- 印刷 ---------- */
@media print{
  /* 店の飾りは紙に出さない。経理が見るのは領収書だけ */
  .topbar, .hazard, .shutter, .site-head, .site-foot,
  .crumbs, .noprint, .mascot-say{ display:none !important; }

  body{ background:#fff !important; font-size:12pt; }
  .section{ padding:0 !important; }
  .wrap{ max-width:none; padding:0; }

  .receipt{
    border:0; padding:0; margin:0;
    /* ページをまたいで切れないように */
    break-inside:avoid;
  }
  /* 入力欄と分からないようにする */
  .receipt__to input{ border-bottom:1px solid #1F1D1A; }
  a[href]::after{ content:none !important; }
}

/* 棚のカードでは「もう一度」ボタンを出さない。
   24枚ぶん並ぶとうるさいうえ、カーソルを乗せれば動き直すため。
   商品ページの大きいバナーには出す（そちらは1つだけ）。 */
.part__shot--fx .mogufx__again,
.bld__prev .mogufx__again,
.pick__demo .mogufx__again{ display:none; }

/* ============================================================
   組み立ててみる（build.html）

   記事の模型。ブラウザの中に見えるように枠で囲う。
   ============================================================ */
.bld{
  border:2px solid var(--ink); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:0 6px 0 rgba(51,48,44,.18);
  margin-top:28px;
}
.bld__bar{
  display:flex; align-items:center; gap:7px;
  padding:9px 14px; background:#E7E0D3; border-bottom:2px solid var(--ink);
}
.bld__bar span{ width:11px; height:11px; border-radius:99px; background:#C3B9A8; }
.bld__bar b{ margin-left:10px; font-size:12.5px; color:var(--ink-2); font-weight:700; }

.bld__page{ padding:18px; color:#2A2723; }
.bld__cols{ display:grid; grid-template-columns:1fr 200px; gap:20px; }
.bld__main{ min-width:0; }
.bld__side{ min-width:0; }

.bld__meta{ margin:0 0 6px; font-size:12px; color:#8C8377; }
.bld__title{ margin:0 0 14px; font-size:22px; font-weight:900; line-height:1.5; }
.bld__h{ margin:18px 0 8px; font-size:17px; font-weight:900; }
.bld__p{ margin:0 0 14px; font-size:14px; line-height:1.9; color:#4A443C; }

/* ---------- 差し込み口 ---------- */
.bld__slot{ margin:14px 0; }
.bld__open{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 14px; cursor:pointer; text-align:left;
  background:#FCF7EC; border:2px dashed var(--line-2); border-radius:10px;
  font-family:var(--round); color:var(--ink-2);
  transition:border-color .15s, background .15s;
}
.bld__open:hover,
.bld__open.is-on{ border-color:var(--orange); background:var(--orange-l); }
.bld__plus{
  flex:0 0 auto; width:26px; height:26px; border-radius:99px;
  display:grid; place-items:center;
  background:var(--orange); color:#fff; font-weight:900; font-size:15px;
}
.bld__open b{ display:block; font-size:13.5px; color:var(--ink); }
.bld__open i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); }

/* ---------- 候補 ---------- */
.bld__pick{
  margin-top:10px; padding:14px;
  background:var(--ply); border:2px solid var(--line-2); border-radius:10px;
}
.bld__pick-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px; font-size:13px; color:var(--ink-2);
}
.bld__close{
  margin-left:auto; padding:4px 12px; cursor:pointer;
  background:transparent; border:1.5px dashed var(--line-2); border-radius:99px;
  font-family:var(--round); font-size:12px; color:var(--ink-3);
}
/* 機能／装飾の見出し。片方しか無い口では出さない */
.bld__grp{
  display:flex; align-items:center; gap:8px;
  margin:4px 0 10px; font-size:13px; font-weight:900; color:var(--ink);
}
.bld__grp::before{
  content:""; width:4px; height:15px; border-radius:2px; background:var(--orange);
}
.bld__grp--fx::before{ background:#C7513A; }
.bld__grp span{
  font-family:var(--label); font-size:11px; font-weight:800;
  color:var(--ink-3); background:#fff;
  border:1.5px solid var(--line-2); border-radius:99px; padding:0 8px;
}
.bld__grp + .bld__list{ margin-bottom:18px; }
.bld__list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
  /* 装飾は25点ある。全部出すと縦に長くなりすぎるので、ここで送る */
  max-height:420px; overflow-y:auto;
}
.bld__card{
  background:#FEFCF8; border:2px solid var(--line-2); border-radius:10px;
  padding:10px;
}
/* 置かれているあいだは、選べないと分かるようにする */
.bld__card.is-placed{ opacity:.4; }
.bld__card.is-placed [data-put]{ visibility:hidden; }

.bld__prev{
  container-type:inline-size;
  min-height:78px; display:grid; place-items:center;
  padding:8px; margin-bottom:8px; overflow:hidden;
  background:#fff; border:1.5px dashed var(--line-2); border-radius:8px;
}
/* 動かせないものは、名前と説明で出す */
.bld__still{ text-align:center; }
.bld__still b{ display:block; font-size:13px; font-weight:900; margin-bottom:4px; }
.bld__still span{ font-size:11.5px; color:var(--ink-3); line-height:1.6; display:block; }

.bld__info{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.bld__info b{ font-size:13.5px; font-weight:900; }
.bld__info .price{ margin-left:auto; font-size:15px; }
.bld__act{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bld__more{ font-size:12px; color:var(--ink-3); }

/* ---------- 置かれたもの ---------- */
.bld__put{
  position:relative; margin:14px 0; padding:14px;
  border:2px solid var(--orange); border-radius:10px; background:#FFFDF9;
}
.bld__off{
  position:absolute; top:-11px; right:10px; cursor:pointer;
  padding:2px 12px; font-size:11.5px; font-family:var(--round); font-weight:700;
  background:#fff; color:var(--ink-2);
  border:1.5px solid var(--line-2); border-radius:99px;
}
.bld__off:hover{ border-color:var(--orange); color:var(--orange-d); }

/* ---------- 画面のえらび（記事・トップ・管理） ---------- */
/* ブラウザのタブに見えるように、枠の上にくっつけて並べる */
.bld__tabs{ display:flex; gap:6px; padding:10px 12px 0; background:#E7E0D3; }
.bld__tab{
  flex:1 1 0; min-width:0; cursor:pointer; text-align:center;
  padding:9px 10px 10px; font-family:var(--round);
  background:#D8CFBE; color:var(--ink-2);
  border:2px solid var(--ink); border-bottom:none;
  border-radius:9px 9px 0 0;
  transition:background .15s, color .15s;
}
.bld__tab b{ display:block; font-size:13.5px; font-weight:900; }
.bld__tab i{
  display:block; font-style:normal; font-size:11px; color:var(--ink-3);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bld__tab:hover{ background:#E9E1D2; }
/* 選ばれている一枚だけ、下の枠と地続きに見せる */
.bld__tab.is-on{ background:#fff; color:var(--ink); position:relative; z-index:1; margin-bottom:-2px; padding-bottom:12px; }
.bld__tab.is-on i{ color:var(--orange-d); }
.bld__tabs + .bld__screen .bld__bar{ border-top:2px solid var(--ink); }

/* ---------- トップページの模型 ---------- */
.bld__hero{
  display:grid; place-items:center; gap:6px; text-align:center;
  padding:34px 16px; margin-bottom:16px;
  background:linear-gradient(180deg,#F6F1E6,#EFE8D9);
  border:1.5px dashed var(--line-2); border-radius:10px;
}
.bld__hero b{ font-size:19px; font-weight:900; }
.bld__hero span{ font-size:12.5px; color:var(--ink-3); }

.bld__rows{ display:grid; gap:8px; margin-bottom:6px; }
.bld__row{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; background:#FCF9F2;
  border:1.5px solid var(--line-2); border-radius:8px;
}
.bld__row span{ flex:0 0 auto; width:40px; height:30px; border-radius:5px; background:#E2DACB; }
.bld__row b{ font-size:13px; font-weight:700; color:#4A443C; }

/* ---------- 管理画面の模型 ---------- */
/* 本物は濃い灰色の左メニュー。見ればすぐ管理画面と分かる */
.bld__page--admin{ padding:0; background:#F0F0F1; }
.bld__wp{ display:grid; grid-template-columns:150px 1fr; min-height:420px; }
.bld__wpmenu{ background:#1D2327; padding:10px 0; }
.bld__wpmenu b{
  display:block; padding:8px 14px; font-size:12.5px; font-weight:500;
  color:#C3C4C7; border-left:4px solid transparent;
}
.bld__wpmenu b:nth-child(2){ background:#2271B1; color:#fff; border-left-color:#fff; }
.bld__wpmain{ padding:18px; min-width:0; }
.bld__wpmain .bld__h{ margin-top:0; font-weight:400; font-size:20px; }
.bld__wptable{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid #C3C4C7; font-size:13px; margin-bottom:6px;
}
.bld__wptable th,
.bld__wptable td{ padding:9px 12px; text-align:left; border-bottom:1px solid #F0F0F1; }
.bld__wptable th{ font-weight:700; color:#2C3338; background:#fff; }
.bld__wptable td{ color:#50575E; }
.bld__wptable tr:last-child td{ border-bottom:none; }

@media (max-width:760px){
  .bld__cols{ grid-template-columns:1fr; }
  .bld__list{ max-height:none; }
  /* タブは3枚。狭いところでは説明を落として、名前だけ残す */
  .bld__tab i{ display:none; }
  .bld__tab b{ font-size:12.5px; }
  /* 左メニューは上に寝かせる。縦のままだと本文がつぶれる */
  .bld__wp{ grid-template-columns:1fr; min-height:0; }
  .bld__wpmenu{ display:flex; overflow-x:auto; padding:0; }
  .bld__wpmenu b{ border-left:none; border-bottom:4px solid transparent; white-space:nowrap; }
  .bld__wpmenu b:nth-child(2){ border-left-color:transparent; border-bottom-color:#fff; }
  .bld__wpmain{ padding:14px; }
}

/* ---------- さわってみる（管理画面の見本） ----------

   ── 本物に似せるところと、似せないところ ──

   項目の名前・並び・言葉は、実際のテーマ／部品と同じにする。
   違うものを見せると「思っていたのと違う」を作ることになる。

   見た目は WordPress の管理画面に寄せるが、**そっくりには作らない。**
   本物と見分けがつかないと、触っている人が
   「自分のサイトを変えてしまった」と思う。 */

.try{
  border:2px solid var(--line-2); border-radius:var(--wob);
  background:var(--ply); overflow:hidden;
  box-shadow:0 6px 0 rgba(176,155,114,.55);
}

.try__tabs{ display:flex; gap:0; background:var(--ply-2); border-bottom:2px solid var(--line-2); flex-wrap:wrap; }
.try__tab{
  flex:1 1 200px; padding:12px 16px; border:0; border-right:1px solid var(--line-2);
  background:none; cursor:pointer; text-align:left; font:inherit;
}
.try__tab:last-child{ border-right:0; }
.try__tab.is-on{ background:var(--ply); box-shadow:inset 0 -3px 0 var(--orange); }
.try__tab b{ display:block; font-size:14px; font-weight:900; }
.try__tab i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:2px; }

/* ブラウザの枠に見せる帯。本物の画面ではないと分かる合図でもある */
.try__bar{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; background:#33302C; color:#fff; font-size:12px;
}
.try__bar span{ width:9px; height:9px; border-radius:50%; background:#6C6660; }
.try__bar b{ margin-left:10px; font-weight:700; opacity:.9; }

/* 左：操作盤 ／ 右：プレビュー */
.try__wp{ display:grid; grid-template-columns:300px minmax(0,1fr); min-height:520px; }
.try__wp--wide{ grid-template-columns:minmax(0,1fr); }
@media (max-width:820px){ .try__wp{ grid-template-columns:minmax(0,1fr); } }

.try__side{ background:#F1F0EC; border-right:1px solid #DCDCDE; padding:0 0 18px; font-size:13px; }
.try__sidehead{ padding:14px 16px; border-bottom:1px solid #DCDCDE; }
.try__sidehead b{ display:block; font-size:15px; }
.try__sidehead span{ font-size:12px; color:#646970; }

.try__group{ padding:14px 16px; border-bottom:1px solid #DCDCDE; }
.try__gh{ margin:0 0 10px; font-size:12px; font-weight:900; color:#646970; letter-spacing:.06em; }
.try__gh--mt{ margin-top:22px; }

.try__f{ display:block; margin-bottom:12px; }
.try__f > span{ display:block; font-size:12px; margin-bottom:4px; color:#3c434a; }
.try__f input[type=text],
.try__f input[type=number],
.try__f textarea{
  width:100%; padding:6px 8px; font:inherit; font-size:13px;
  border:1px solid #8c8f94; border-radius:4px; background:#fff;
}
.try__f--check{ display:flex; align-items:center; gap:7px; font-size:13px; }
.try__f--check input{ margin:0; }
.try__f--color{ display:flex; align-items:center; gap:10px; }
.try__f--color > span{ margin:0; }
.try__f--color input{ width:52px; height:30px; padding:2px; border:1px solid #8c8f94; border-radius:4px; }

.try__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.try__row--top{ margin-top:16px; max-width:36em; }

.try__note{ margin:0 0 12px; font-size:11.5px; line-height:1.7; color:#646970; }
.try__note--mt{ margin-top:18px; }
.try__reset{ padding:14px 16px 0; margin:0; }

/* 右のプレビュー。おしながきの見た目に寄せる */
.try__prev{ --tk:#8a6a4b; background:#fdfbf7; padding:18px; overflow:auto; }
.try__site{ background:#fff; border:1px solid #e9e2d8; border-radius:8px; overflow:hidden; }

.try__hero{
  display:grid; place-items:center; text-align:center;
  min-height:150px; padding:26px 20px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.5)), var(--tk);
}
.try__hero-t{ margin:0 0 8px; font-size:22px; font-weight:700; letter-spacing:.06em; }
.try__hero-s{ margin:0; font-size:12.5px; line-height:1.8; opacity:.95; }

.try__body{ padding:22px 20px 26px; }
.try__h{ margin:0 0 6px; text-align:center; font-size:17px; font-weight:700; letter-spacing:.08em; }
.try__h::after{ content:""; display:block; width:34px; height:2px; margin:10px auto 0; background:var(--tk); }
.try__cat{ margin:18px 0 10px; text-align:center; font-size:13px; font-weight:700; color:var(--tk); letter-spacing:.08em; }

.try__dishes{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.try__dishes--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.try__dishes--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .try__dishes--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.try__dish{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:10px; background:#fff; border:1px solid #e9e2d8; border-radius:8px; font-size:12.5px;
}
.try__dishes--nopic .try__dish{
  grid-template-columns:minmax(0,1fr) auto;
  padding:8px 2px; background:none; border:0; border-bottom:1px dashed #e9e2d8; border-radius:0;
}
.try__dish--out{ opacity:.55; }
.try__pic{ width:44px; height:44px; border-radius:6px; background:linear-gradient(135deg,#e9e2d8,#fff); }
.try__name{ font-weight:700; }
.try__price{ font-weight:700; white-space:nowrap; }
.try__tag{
  display:inline-block; margin-left:5px; padding:0 7px; border-radius:99px;
  font-size:10px; font-weight:700; vertical-align:middle; white-space:nowrap;
}
.try__tag--pick{ background:var(--tk); color:#fff; }
.try__tag--out{ background:#e9e2d8; color:#8b8179; }
.try__pricenote{ margin:16px 0 0; text-align:center; font-size:11px; color:#8b8179; }
.try__empty{ padding:20px; text-align:center; color:#8b8179; font-size:12.5px; }

/* 管理画面ふうの表 */
.try__admin{ padding:20px 22px 26px; background:#fff; }
.try__admin h3{ margin:0 0 6px; font-size:17px; font-weight:900; }
.try__adminhead{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.try__adminhead h3{ margin:0; }

.try__table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px; }
.try__table th{
  text-align:left; padding:8px 6px; border-bottom:1px solid #c3c4c7;
  font-size:11.5px; color:#646970; font-weight:700; white-space:nowrap;
}
.try__table td{ padding:7px 6px; border-bottom:1px solid #f0f0f1; vertical-align:middle; }
.try__table input[type=text],
.try__table input[type=number]{
  width:100%; padding:4px 6px; font:inherit; font-size:12.5px;
  border:1px solid #8c8f94; border-radius:4px;
}
.try__ord{ max-width:5em; }
.try__pr{ max-width:6em; }
.try__marks{ white-space:nowrap; }
.try__marks label{ display:inline-flex; align-items:center; gap:4px; margin-right:10px; font-size:11.5px; }
.try__del{
  border:1px solid #d0b0ab; background:#fff; color:#b32d2e;
  border-radius:4px; padding:3px 10px; font:inherit; font-size:11.5px; cursor:pointer;
}

/* お知らせバーの枠 */
.try__slot{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid #f0f0f1;
}
.try__slot select{ font:inherit; font-size:12px; padding:4px 6px; border:1px solid #8c8f94; border-radius:4px; }
.try__btext{ width:100%; padding:5px 8px; font:inherit; font-size:12.5px; border:1px solid #8c8f94; border-radius:4px; }
@media (max-width:640px){ .try__slot{ grid-template-columns:minmax(0,1fr); } }

.try__barprev > div{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; color:#fff; font-size:13.5px;
}
.try__barprev b{ margin-left:auto; font-size:16px; opacity:.85; }
.try__bar-info{ background:#2271b1; }
.try__bar-warn{ background:#b26b00; }
.try__bar-sale{ background:#b03030; }

/* ---------- ためしてみる：2つの入口 ----------

   1枚に「置き場所」と「設定」の両方が乗るので、
   上でどちらへ行くかを選ばせる。長いページは、
   入口が無いと下半分が読まれない。 */
.tryhead{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:640px){ .tryhead{ grid-template-columns:minmax(0,1fr); } }
.tryhead__go{
  display:block; padding:16px 20px; text-decoration:none; color:inherit;
  background:var(--ply); border:2px solid var(--line-2); border-radius:var(--wob);
  box-shadow:0 4px 0 rgba(176,155,114,.55);
  transition:transform .12s ease, box-shadow .12s ease, border-color .15s;
}
.tryhead__go:hover{
  transform:translateY(2px); box-shadow:0 2px 0 rgba(176,155,114,.55);
  border-color:var(--orange);
}
.tryhead__go b{ display:block; font-size:15.5px; font-weight:900; margin-bottom:4px; }
.tryhead__go span{ font-size:13px; color:var(--ink-2); }

/* 節の見出し。h1 より小さく、でも節の切れ目が分かる大きさ */
.h-sec--sm{ font-size:22px; }
.mt64{ margin-top:64px; }

/* ============================================================ テーマの選びかた

   テーマが4本になったとき、「選べない」という穴が空いた。
   その1枚のためのCSS。 */

.mt16{ margin-top:16px; }

/* 横に長い表は、囲みの中だけで送る。
   ページごと横に動くと、本文まで読みにくくなる */
.table-scroll{ overflow-x:auto; margin:24px 0 0; }
.table-scroll .spec{ min-width:640px; }

/* ---- 決め手の1問 ---- */

.pickq{
  background:var(--ply);
  border:1px solid var(--line);
  border-left:5px solid var(--orange);
  border-radius:12px;
  padding:24px 28px;
  margin:28px 0 0;
}
.pickq__lead{ margin:0 0 6px; font-size:13px; color:var(--ink-3); }
.pickq__q{ margin:0; font-size:clamp(18px,2.6vw,23px); font-weight:700; line-height:1.5; }
.pickq__note{ margin:10px 0 0; font-size:14px; color:var(--ink-2); }

/* ---- 4本のカード ---- */

.picks{
  display:grid;
  /* 本数を決め打ちしない。5本目を足しても崩れない。

     ただし 260px にしていたら、4本が **3枚＋1枚** に割れた。
     ぽつんと余った1枚は「おまけ」に見える。
     下限を下げて、広い画面では4枚が1列に入るようにする */
  grid-template-columns:repeat(auto-fit, minmax(228px, 1fr));
  gap:20px;
  margin:32px 0 0;
}
.pick{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 22px 20px;
  color:inherit;
  text-decoration:none;
}
.pick:hover{ border-color:var(--orange); }
.pick:hover .pick__go{ text-decoration:underline; }

/* テーマの見た目。

   ── なぜ写真を先に置くか ──

   ここは長いあいだ、表と文だけでした。
   どれを買うか決めるページで、**どんな見た目になるかが分からない**のは
   順番が逆です。名前と一言より先に、見せます。

   枠から余白のぶんだけはみ出させて、上いっぱいに敷きます。
   カードの中に小さく収めると、見本というより飾りに見えます。 */
.pick__pic{
  display:block;
  margin:-22px -22px 16px;
  border-radius:12px 12px 0 0;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  position:relative;
}
.pick__pic img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top left;
}
/* 下は切れています。ぼかして「続きがある」と読めるようにします */
.pick__pic::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:26px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.9));
  pointer-events:none;
}

.pick__star{
  margin:0;
  display:inline-block;
  align-self:flex-start;
  background:var(--orange);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:3px 12px;
  border-radius:999px;
}
.pick__name{ margin:12px 0 4px; font-size:20px; }
.pick__name span{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--ink-3);
  margin-top:2px;
  letter-spacing:.04em;
}
.pick__one{ margin:0 0 14px; font-size:14px; color:var(--ink-2); }

.pick__who{ margin:0 0 14px; padding:0 0 0 1.1em; font-size:14px; }
.pick__who li{ margin:3px 0; }

.pick__not{
  margin:0 0 16px;
  font-size:13px;
  color:var(--ink-3);
  border-top:1px dashed var(--line);
  padding-top:12px;
}
.pick__not b{ display:block; color:var(--ink-2); margin-bottom:2px; }

/* 下端をそろえる。カードの高さが違っても、行き先の字は同じ高さに */
.pick__go{ margin-top:auto; font-size:14px; font-weight:700; color:var(--orange); }

/* ---- ならべて見る ---- */

/* 幅を先に決める。決めないと、名前の長いテーマ（おしながき）が
   横に広がって、短いテーマ（しごと・こよみ）が押しつぶされる */
.spec--pick{ table-layout:fixed; width:100%; }
.spec--pick th:first-child{ width:11em; white-space:nowrap; }
.spec--pick thead th{ text-align:left; }
.spec--pick thead a{ font-weight:700; }
.spec--pick td{ text-align:left; }

/* ---- 迷いやすい組み合わせ ---- */

.vs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:20px;
  margin:28px 0 0;
}
.vs__item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 24px;
}
.vs__pair{
  margin:0 0 4px;
  font-size:13px;
  color:var(--ink-3);
  letter-spacing:.02em;
}
.vs__q{ margin:0 0 14px; font-size:17px; font-weight:700; }
.vs__ans{
  background:var(--ply);
  border-radius:8px;
  padding:14px 16px;
}
.vs__ans p{ margin:0 0 8px; font-size:14px; }
.vs__ans p:last-child{ margin-bottom:0; }
.vs__note{ margin:14px 0 0; font-size:13.5px; color:var(--ink-2); }

/* ---- それでも決まらないとき ---- */

.pickfaq{ margin:28px 0 0; display:grid; gap:18px; }
.pickfaq__q{
  border-left:3px solid var(--line);
  padding:2px 0 2px 20px;
}
.pickfaq__q h3{ margin:0 0 8px; font-size:17px; }
.pickfaq__q p{ margin:0 0 8px; }
.pickfaq__q p:last-child{ margin-bottom:0; }
.pickfaq__q .muted{ font-size:14px; }

/* 中くらいの画面。auto-fit に任せると、ここでも 3枚＋1枚 に割れる */
@media (max-width:980px){
  .picks{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:520px){
  .picks{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .pickq{ padding:20px; }
  .vs__item{ padding:20px; }
  .pickfaq__q{ padding-left:16px; }
}

/* ---- 選びかたへの入口 ---- */

/* テーマの棚のいちばん上。カードより先に目に入る位置に置く */
.shelf-guide{
  display:block;
  margin:0 0 24px;
  padding:18px 22px;
  background:var(--yellow-l);
  border:2px solid var(--yellow);
  border-radius:var(--wob);
  color:inherit;
  text-decoration:none;
}
.shelf-guide:hover{ background:#fff; }
.shelf-guide b{ display:block; font-size:17px; margin-bottom:4px; }
.shelf-guide span{ display:block; font-size:14px; color:var(--ink-2); }

/* 商品ページ。説明のすぐ下に、小さく */
.detail__guide{
  margin:-6px 0 20px;
  padding:10px 14px;
  background:var(--ply);
  border-radius:8px;
  font-size:14px;
  color:var(--ink-2);
}