/* Inventory navigation, shared by the home page and the expandable finder. */
.stock-finder {
  --finder-red: #a51f2c;
  display: grid;
  gap: 22px;
  color: #292b30;
}
.finder-group {
  display: grid;
  grid-template-columns: minmax(155px, .85fr) minmax(0, 3.15fr);
  align-items: start;
  gap: clamp(16px, 2.2vw, 36px);
  padding: clamp(18px, 2.5vw, 34px);
  background: white;
  border: 1px solid #dedbd6;
  border-radius: 10px;
  scroll-margin-top: 100px;
}
.finder-group header {border-top: 3px solid var(--finder-red); padding-top: 14px;}
.finder-group header small {color: var(--finder-red); font: 800 11px/1.5 system-ui,sans-serif; letter-spacing: .16em;}
.finder-group header h3 {margin: 5px 0 10px; color: #292b30; font: 800 clamp(18px,1.8vw,24px)/1.4 sans-serif;}
.finder-group header p {margin: 0; font-size: 13px; line-height: 1.8; color: #595b60;}
.stock-finder ul {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none;}
.stock-finder li {display: flex; min-width: 0;}
.stock-finder a {
  display: flex; width: 100%; box-sizing: border-box; overflow: hidden;
  border: 1px solid #dcdad6; border-radius: 6px; background: white;
  color: #27292c; text-decoration: none; font: 700 14px/1.5 sans-serif;
}
.stock-finder a:hover, .stock-finder a:focus-visible {border-color: var(--finder-red); color: var(--finder-red);}
.stock-finder a:focus-visible, .finder-jumps a:focus-visible {outline: 3px solid #ad2837; outline-offset: 2px;}
.finder-types a {flex-direction: column;}
.finder-art {display: grid; place-items: center; width: 100%; padding: 8px 0; background: #f4f3ef;}
.finder-art img {display: block; width: 100px; height: 55px; object-fit: contain;}
.finder-name {display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1; padding: 8px 10px; min-width: 0; overflow-wrap: anywhere;}
.finder-name::after {content: ""; flex: 0 0 6px; height: 6px; border: solid var(--finder-red); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);}
.finder-types .finder-name {min-height: 56px; background: var(--finder-red); color: #fff;}
.finder-types .finder-name > span {line-height: 1.45;}
.finder-types .finder-name::after {border-color: #fff;}
.finder-makers a {align-items: center; min-height: 56px; padding-left: 6px;}
.finder-logo {position: relative; flex: 0 0 60px; height: 34px; overflow: hidden;}
.finder-logo img {position: absolute; left: -138px; top: -6px; width: 460px; max-width: none; height: 55px;}
.r-search > summary {
  position: relative;
  min-height: 78px;
  overflow: hidden;
  border-radius: 11px;
  background-color: #f8f6f3;
  color: #a51f2c;
  letter-spacing: .035em;
  transition: background-color .26s ease, color .26s ease, box-shadow .26s ease, transform .2s ease;
}
.r-search {
  border: 1px solid #c8c2be;
  transition: box-shadow .26s ease, border-color .26s ease, background-color .26s ease;
}
.r-search:is(:not([open]),.is-closing) {
  border: 0;
  border-top: 0 !important;
  background: transparent;
  box-shadow: 0 12px 30px rgba(91,18,27,.2);
}
.r-search:is(:not([open]),.is-closing) > summary {
  background-color: #ad202e;
  color: #fff;
  transition-duration: .13s;
}
.r-search > summary::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -35%;
  bottom: -35%;
  left: -48%;
  width: 38%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25) 48%, transparent);
  filter: blur(13px);
}
.r-search:is(:not([open]),.is-closing) > summary::before {
  animation: finder-spotlight 4.8s ease-in-out infinite;
}
.r-search > summary::after {
  content: "用途やメーカーから、販売中の在庫をすぐに絞り込めます";
  position: relative;
  order: 2;
  overflow: hidden;
  max-width: 0;
  margin-left: 0;
  padding-left: 0;
  border-left: 1px solid transparent;
  color: rgba(255,255,255,0);
  opacity: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  transition: max-width .26s ease, margin-left .26s ease, padding-left .26s ease, border-color .26s ease, color .2s ease, opacity .2s ease;
}
.r-search:is(:not([open]),.is-closing) > summary::after {
  max-width: 520px;
  margin-left: 12px;
  padding-left: 18px;
  border-left-color: rgba(255,255,255,.36);
  color: rgba(255,255,255,.84);
  opacity: 1;
  transition-duration: .13s;
}
.r-search > summary .r-icon {
  position: relative;
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  padding: 9px;
  border: 1px solid rgba(165,31,44,.32);
  border-radius: 50%;
  background: rgba(165,31,44,.07);
  color: #a51f2c;
  transition: color .26s ease, background-color .26s ease, border-color .26s ease, transform .26s ease;
}
.r-search:is(:not([open]),.is-closing) > summary .r-icon {
  border-color: rgba(255,255,255,.42);
  background-color: rgba(255,255,255,.1);
  color: #fff;
  transition-duration: .13s;
}
.r-search > summary .r-search-toggle {
  position: relative;
  order: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border-radius: 50%;
  background: #f7e9ea;
  color: #a51f2c;
  font-size: 25px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(61,7,13,.12);
  transition: transform .26s ease, background-color .26s ease, color .26s ease, box-shadow .26s ease;
}
.r-search:is(:not([open]),.is-closing) > summary .r-search-toggle {
  background-color: #fff;
  box-shadow: 0 5px 14px rgba(61,7,13,.25);
  transform: rotate(0deg);
  transition-duration: .13s;
}
.r-search:is(:not([open]),.is-closing) > summary:hover {
  transform: translateY(-2px);
  background-color: #b92332;
  box-shadow: 0 15px 32px rgba(91,18,27,.25);
}
@keyframes finder-spotlight {
  0%, 12% {left: -48%; opacity: 0;}
  20% {opacity: .48;}
  62% {left: 112%; opacity: .38;}
  72%, 100% {left: 112%; opacity: 0;}
}
.r-search[open] > summary {margin-bottom: 16px;}
.r-search .finder-group {border: 0; border-radius: 0; padding: 12px 0;}
.r-search .finder-group + .finder-group {border-top: 1px solid #dedbd6; padding-top: 22px;}
@media (max-width: 959px) {
  .finder-group {grid-template-columns: 1fr;}
  .finder-group header {border-top: 0; border-left: 3px solid var(--finder-red); padding: 0 0 0 12px;}
}
@media (max-width: 700px) {
  .r-search > summary {min-height: 68px; padding: 13px 14px;}
  .r-search > summary::after {display: none;}
  .r-search > summary .r-icon {width: 36px; height: 36px; flex-basis: 36px; padding: 8px;}
  .r-search > summary .r-search-toggle {width: 34px; height: 34px; font-size: 22px;}
  .stock-finder ul {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px;}
  .finder-group {padding: 14px;}
  .finder-makers a {flex-direction: column; justify-content: center; padding: 6px;}
  .finder-logo {flex: none; width: 60px;}
  .finder-makers .finder-name {flex: none; padding: 2px 0; font-size: 13px;}
  .finder-types .finder-name {min-height: 56px; font-size: 13px;}
}
@media (prefers-reduced-motion: reduce) {
  .r-search,.r-search > summary,.r-search > summary::after,.r-search > summary .r-icon,.r-search > summary .r-search-toggle {transition: none;}
  .r-search > summary::before {display: none; animation: none;}
  .r-search:is(:not([open]),.is-closing) > summary:hover {transform: none;}
}