@charset "UTF-8";
/* ============================================================
   取扱品目ページ  css/goods.css
   ============================================================ */

/* アンカーナビ */
.goods-nav{
  position:sticky; top:64px; z-index:500;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.goods-nav ul{
  display:flex; flex-wrap:wrap; gap: 4px 6px;
  padding: 12px 0;
}
.goods-nav a{
  display:inline-block;
  font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--blue-deep);
  padding: 8px 18px; border-radius:999px;
  border:1px solid transparent;
  transition: background .3s, border-color .3s, color .3s;
}
.goods-nav a:hover{
  background:#e9f0fc; border-color:var(--line);
}

/* 見出し＋リード */
.goods__head{ max-width: 860px; margin-bottom: clamp(30px, 5vw, 46px); }
.goods__head h2,
.goods__lead2 h2{
  font-size: clamp(24px, 3.2vw, 32px); font-weight:900;
  color:var(--navy); letter-spacing:.1em;
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  margin-bottom: 16px;
}
.goods__head h2::before,
.goods__lead2 h2::before{
  content:""; width:.55em; height:.55em; border-radius:50%; background:var(--yellow);
  box-shadow: .95em 0 0 -2px var(--magenta), 1.9em 0 0 -4px var(--cyan);
  margin-right:1.7em; flex:none;
}
.goods__head h2 small,
.goods__lead2 h2 small{
  width:100%;
  font-family:var(--font-en); font-weight:600;
  font-size:11px; letter-spacing:.3em; color:var(--blue-bright);
  padding-left: calc(.55em + 1.7em + .6em);
  margin-top:-6px;
}
.goods__head p{ font-size:14.5px; color:#39414f; }

/* カードグリッド */
.goods__grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(14px, 2.2vw, 26px);
}
.goods__grid--4{ grid-template-columns: repeat(4,1fr); }
.goods-card{
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.goods-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.goods-card figure{
  height: 168px; display:grid; place-items:center;
  background: radial-gradient(circle at 30% 20%, #fff, var(--paper));
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.goods-card figure img{
  max-height: 100%; width:100%; height:100%; object-fit:cover;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.goods-card:hover figure img{ transform: scale(1.06); }
.goods-card h3{
  padding: 18px 20px 0;
  font-size: 18px; font-weight:900; color:var(--navy); letter-spacing:.08em;
  position:relative;
}
.goods-card h3::before{
  content:""; position:absolute; left:20px; bottom:-6px;
  width: 34px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue-bright));
}
.goods-card p{ padding: 16px 20px 0; font-size:13.5px; color:#475064; flex:1; }
.goods-card dl{
  margin: 14px 20px 20px;
  display:flex; gap:10px; align-items:center;
  font-size:12.5px;
}
.goods-card dt{
  flex:none; font-weight:700; color:#fff;
  background:var(--blue-bright); border-radius:6px; padding:2px 10px;
}
.goods-card dd{ color:var(--blue-deep); font-weight:700; }

/* 窓材ノート */
.goods__note{
  margin-top: clamp(24px, 4vw, 36px);
  background:#fff;
  border:1px solid var(--line);
  border-left: 5px solid var(--cyan);
  border-radius: 10px;
  padding: 20px 24px;
}
.goods__note h3{
  font-size:15px; font-weight:900; color:var(--navy); margin-bottom:6px;
}
.goods__note p{ font-size:13.5px; color:#39414f; }

/* 2カラムリード（パンフ・名刺・シール） */
.goods__lead2{
  display:grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(24px, 5vw, 64px);
  align-items:center;
}
.goods__lead2--rev .goods__lead2-fig{ order:2; }
.goods__lead2-fig{
  background: radial-gradient(circle at 28% 18%, #fff, var(--paper));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display:grid; place-items:center;
  padding: clamp(20px, 3vw, 36px);
  position:relative; overflow:hidden;
}
.goods__lead2-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(43,85,160,.12) 1.3px, transparent 1.4px);
  background-size:17px 17px;
  mask-image: linear-gradient(125deg, #000 8%, transparent 50%);
  -webkit-mask-image: linear-gradient(125deg, #000 8%, transparent 50%);
}
.goods__lead2-fig img{
  max-height: 280px; width:auto; max-width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  box-shadow: 0 12px 22px rgba(15,30,61,.16);
}
.goods__lead2 > div > p{ font-size:14.5px; color:#39414f; }

/* 加工リスト */
.goods__proc{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(12px, 1.8vw, 20px);
}
.goods__proc li{
  background:#fff; border:1px solid var(--line);
  border-radius: 12px; padding: 18px;
  font-size:13px; color:#475064;
  box-shadow: var(--shadow-sm);
  transition: transform .35s, border-color .35s;
}
.goods__proc li:hover{ transform: translateY(-4px); border-color: var(--blue-bright); }
.goods__proc span{
  display:flex; align-items:center; gap:.55em;
  font-size:15.5px; font-weight:900; color:var(--navy);
  letter-spacing:.06em; margin-bottom:6px;
}
.goods__proc span::before{
  content:""; width:.62em; height:.62em; flex:none; border-radius:3px;
  background: linear-gradient(135deg, var(--cyan), var(--blue-bright));
}
.goods__proc li:nth-child(4n+2) span::before{ background: linear-gradient(135deg, var(--magenta), #ff5fae); }
.goods__proc li:nth-child(4n+3) span::before{ background: linear-gradient(135deg, var(--yellow), #ffb800); }
.goods__proc li:nth-child(4n+4) span::before{ background: linear-gradient(135deg, var(--navy), var(--blue-bright)); }

/* 幅広写真 */
.goods__photo-wide{
  margin-top: clamp(28px, 5vw, 44px);
}
.goods__photo-wide img{
  width:100%; height: clamp(200px, 30vw, 320px); object-fit:cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.goods__photo-wide figcaption{
  margin-top:10px; font-size:13px; color:#475064;
  display:flex; align-items:center; gap:.6em;
}
.goods__photo-wide figcaption::before{
  content:""; width:.7em; height:.7em; flex:none;
  background: linear-gradient(135deg, var(--cyan), var(--blue-bright));
  border-radius:3px;
}

/* レスポンシブ */
@media (max-width: 1024px){
  .goods__grid--4{ grid-template-columns: repeat(2,1fr); }
  .goods__proc{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px){
  .goods-nav{ top:0; }
  .goods-nav ul{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .goods-nav a{ white-space:nowrap; }
  .goods__grid{ grid-template-columns: 1fr; max-width:520px; margin-inline:auto; }
  .goods__grid--4{ grid-template-columns: repeat(2,1fr); max-width:none; }
  .goods__lead2{ grid-template-columns: 1fr; }
  .goods__lead2--rev .goods__lead2-fig{ order:0; }
  .goods__lead2-fig{ max-width:420px; margin-inline:auto; }
}
@media (max-width: 560px){
  .goods__grid--4{ grid-template-columns: 1fr; max-width:520px; margin-inline:auto; }
  .goods__proc{ grid-template-columns: 1fr; }
}