/* sign demo v3 — 額縁に徹する1ページ */
:root{
  --bg:#fbfaf8;
  --ink:#1c1c1c;
  --mute:#76736e;
  --line:#e4e1dc;
  --side:1fr;
  --main:720px;
  --gap:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:400;font-size:13px;line-height:1.9;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
figure,h1,h2,p,ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}

.wrap{max-width:1200px;margin:0 auto;padding:72px 64px 0}

/* FV */
.fv{display:grid;grid-template-columns:var(--side) var(--main);gap:var(--gap);align-items:center}
.fv__logo img{width:180px}
.fv__img img{width:100%}

/* rows */
.row{display:grid;grid-template-columns:var(--side) var(--main);gap:var(--gap);padding-top:88px}
.label{font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}

/* brands */
.brands__list{display:flex;flex-wrap:wrap;font-size:13px;line-height:2.1}
.brands__list li{white-space:nowrap}
.brands__list li:not(:last-child)::after{content:"/";margin:0 .7em;color:#c4c0b9}
.brands__list a{transition:color .2s}
.brands__list a:hover{color:var(--mute)}

/* shop */
.shop__img{margin-top:20px;max-width:300px}
.shop__main{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:start}
.shop__dl div{display:grid;grid-template-columns:76px 1fr;padding:10px 0;border-top:1px solid var(--line)}
.shop__dl div:last-child{border-bottom:1px solid var(--line)}
.shop__dl dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-top:1px}
.shop__dl a{border-bottom:1px solid var(--line)}
.links{padding-top:10px}
.links li+li{margin-top:12px}
.links a{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding-bottom:2px;border-bottom:1px solid var(--ink)}
.links a:hover{color:var(--mute);border-color:var(--mute)}

/* footer */
.ft{max-width:1200px;margin:96px auto 0;padding:24px 64px 32px;display:flex;justify-content:space-between;gap:16px;
  font-size:11px;letter-spacing:.16em;color:var(--mute)}
.ft a{color:inherit;text-decoration:none}
.ft a:hover{color:var(--ink)}

/* ごく薄いフェード */
@media (prefers-reduced-motion:no-preference){
  .fv{animation:fade 1.2s ease both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* tablet */
@media (max-width:1100px){
  :root{--main:minmax(0,1fr);--side:200px;--gap:48px}
  .wrap{padding:56px 40px 0}
  .ft{padding:24px 40px 32px}
}

/* SP */
@media (max-width:760px){
  .wrap{padding:36px 20px 0}
  .fv,.row{grid-template-columns:minmax(0,1fr);gap:20px}
  .fv{gap:28px}
  .fv__logo img{width:116px}
  .row{padding-top:56px}
  .brands__list{font-size:12.5px;line-height:2}
  .brands__list li:not(:last-child)::after{margin:0 .55em}
  .shop .row__side{display:contents}
  .shop{gap:16px}
  .shop__img{margin-top:0;max-width:none;order:3}
  .shop__main{grid-template-columns:minmax(0,1fr);gap:20px}
  .links{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:0}
  .links li+li{margin-top:0}
  .ft{margin-top:56px;padding:20px 20px 28px;flex-direction:column;gap:4px}
}