/* ============================================================
   ホームページの「試してみる」（2026-11-14）
   見本のホームページ（架空の店）の最初の画面を、業種・色・見出しで入れ替える。
   替わり方は一瞬（間の動きは付けない）。だから「動きを止める」・動きを減らす設定でも同じに使える。
   JS が無い時は、押す所（.try__ctl）を出さず、最初の組み合わせ（つむぎ・白・店のこだわり）が出るだけ。
   ============================================================ */
.try{padding:10vh var(--gut) 4vh}
.try__in{max-width:var(--max);margin:0 auto}
.try .h2{margin:0 0 18px}
.try__grid{display:grid;gap:18px}

/* ---------- 色の組（見本の中だけに効く） ---------- */
.try__grid,.try__grid[data-c="shiro"]{--t-bg:#FAF7F1;--t-ink:#1D2430;--t-sub:#4C5563;--t-btn:#1D2430;--t-btn-ink:#FFFFFF;--t-line:rgba(29,36,48,.14)}
.try__grid[data-c="sumi"]{--t-bg:#181715;--t-ink:#F3EEE6;--t-sub:#C9C0B4;--t-btn:#D3AE72;--t-btn-ink:#1A120A;--t-line:rgba(243,238,230,.16)}
.try__grid[data-c="ai"]{--t-bg:#21375A;--t-ink:#FFFFFF;--t-sub:#D5DEEA;--t-btn:#F3EEE6;--t-btn-ink:#21375A;--t-line:rgba(255,255,255,.18)}

/* ---------- 見本：ブラウザの窓 ---------- */
.try__fig{margin:0;min-width:0}
.try__win{position:relative;overflow:hidden;border-radius:12px;background:var(--t-bg);
  box-shadow:0 22px 50px rgba(60,45,25,.22),0 0 0 1px rgba(29,36,48,.12)}
.try__bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:#E8E3DA}
.try__bar i{width:9px;height:9px;border-radius:50%;background:#E5786D}
.try__bar i:nth-child(2){background:#F2C14E}
.try__bar i:nth-child(3){background:#7BC47F}
.try__bar span{flex:1;height:12px;margin-left:12px;border-radius:6px;background:#FFFFFF}
.try__page{background:var(--t-bg);color:var(--t-ink)}
.try__page[hidden]{display:none}
.try__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:6px 14px;
  border-bottom:1px solid var(--t-line)}
.try__logo{min-width:0;font-family:var(--mincho);font-weight:700;font-size:14px;line-height:1.4;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.try__menu{flex:none;display:grid;gap:5px;width:20px}
.try__menu i{display:block;height:2px;border-radius:1px;background:var(--t-ink)}
.try__ph{position:relative;aspect-ratio:16 / 10;background:#2A2724;overflow:hidden}
.try__ph img{display:block;width:100%;height:100%;object-fit:cover}
.try__page[data-shop="tsumugi"] .try__ph img{object-position:62% 60%}
.try__page[data-shop="okoge"] .try__ph img{object-position:62% 50%}
.try__page[data-shop="hitomune"] .try__ph img{object-position:64% 62%}
/* 見出しは、写真の上でなく、色の地の札に乗せる（どの色・どの写真でも読める） */
.try__copy{position:relative;z-index:1;margin:-34px 12px 0;padding:14px 16px 16px;border-radius:6px;background:var(--t-bg);
  box-shadow:0 10px 24px rgba(0,0,0,.16)}
.try__copy::after{content:"";display:block;height:2px}
.try__h{margin:0 0 12px;font-family:var(--mincho);font-weight:700;font-size:clamp(17px,4.9vw,22px);line-height:1.5;letter-spacing:.03em;
  color:var(--t-ink);word-break:keep-all;overflow-wrap:anywhere;
  min-height:4.5em;display:flex;flex-direction:column;justify-content:flex-end}   /* 3行分の高さを取っておき、字は下に寄せる（見出しを替えても、下の押す所が動かないように） */
.try__grid[data-hl="a"] .try__h--b,.try__grid[data-hl="b"] .try__h--a{display:none}
.try__btn{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--t-btn);color:var(--t-btn-ink);
  font-size:13px;font-weight:700;line-height:1.3}
.try__note{margin:-6px 0 0;font-size:13px;line-height:1.6;color:var(--sub)}

/* ---------- 押す所 ---------- */
.try__ctl{display:grid;gap:14px;min-width:0}
.try__ctl[hidden]{display:none}
.try__hint{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.try__grp{min-width:0}
.try__lbl{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--sub)}
.try__opts{display:grid;gap:8px}
.try__opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.try__opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.try__opt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:6px 8px;
  border:1.5px solid var(--line);border-radius:10px;background:rgba(255,255,255,.82);color:var(--ink);
  font-family:var(--gothic);font-size:15px;font-weight:700;line-height:1.3;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.try__opt span{min-width:0;white-space:nowrap}
.try__opt:hover{border-color:var(--accent)}
.try__opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);
  box-shadow:0 6px 14px rgba(44,93,143,.25)}
.try__opt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.try__opt[aria-pressed="true"]:focus-visible{outline-color:#1D2430}
.try__sw{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(29,36,48,.35)}
.try__sw--shiro{background:#FAF7F1}
.try__sw--sumi{background:#181715}
.try__sw--ai{background:#21375A}
.try__opt[aria-pressed="true"] .try__sw{box-shadow:0 0 0 2px #FFFFFF}
.try__now{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 次にやること ---------- */
.try__next{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0}
.try__next .btn[hidden]{display:none}

/* 携帯：見本が上・押す所がすぐ下。両方が1画面に近く収まるように詰める */
@media (max-width:759.98px){
  .try{padding-top:8vh}
  .try__grid{gap:14px}
  /* 押す所へ下がっても、見本が画面の上に残る（押した結果が見えるように） */
  .try__fig{position:sticky;top:8px;z-index:2}
  .try__ph{aspect-ratio:16 / 9}
  .try__copy{margin-top:-28px;padding:12px 14px 14px}
  .try__h{margin-bottom:10px;font-size:17px}
  .try__ctl{gap:10px}
  .try__hint{font-size:14px}
  .try__next .btn{flex:1 1 100%}
}
@media (max-width:359.98px){
  .try__opt{font-size:14px;padding:6px 4px;gap:6px}
  .try__sw{width:14px;height:14px}
}

/* パソコン：左に押す所、右に大きな見本 */
@media (min-width:980px){
  .try__grid{grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px;row-gap:22px;align-items:start}
  .try__fig{grid-column:2;grid-row:1 / span 2}
  .try__ctl{grid-column:1;grid-row:1;padding-top:40px}
  .try__next{grid-column:1;grid-row:2;align-self:start}
  .try__note{grid-column:2;grid-row:3;margin-top:-12px}
  .try__ph{aspect-ratio:2 / 1}
  .try__hd{min-height:48px;padding:8px 22px}
  .try__logo{font-size:15px}
  .try__copy{max-width:72%;margin:-64px 0 20px 28px;padding:20px 26px 22px}
  .try__h{font-size:26px}
  .try__btn{min-height:36px;font-size:14px;padding:6px 18px}
  .try__next .btn{flex:1 1 100%}
}