:root {
  --color-theme: #d92130;
  --y-px: calc(150 / 1920 * 100vw);
  --y-form-size: max(40px, calc(45 / 1920 * 100vw));
}
@media screen and (max-width: 980px) {
  :root {--y-px: 5%; }
}
a{text-decoration:none;transition:ease .65s; color:#333333; outline:none;}
.clearfix:after{content:""; display:block; clear:both;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
input[type="text"],input[type="password"],input[type="search"],textarea,select{outline: none; font-family: "NotoSansHans";-webkit-appearance: none;border-radius: 0; font-size:14px; display:block; width:100%; border:none; background:none; transition:ease .45s;}
input[type="radio"]{display:inline-block; width:20px; height:20px; position:relative; top:0px; margin-right:5px; cursor:pointer;}
[icon] {width: 1em;height: 1em;display: block;object-fit: contain;}
.y-input,
.y-select {display: flex;align-items: center;background: #fff;cursor: pointer;border-radius: 99px;height: var(--y-form-size);position: relative;border: 1px solid #fff;}
.y-select:focus-within,
.y-input:focus-within {border-color: var(--color-theme);}
.y-select select {cursor: inherit;width: 100%;height: 100%;padding-left: 1.5em;padding-right: 2.5em;}
.y-select::after {content: '';background-image: url(../images/arrow.png);width: 6px;height: 10px;display: block;background-size: cover;background-position: center;background-repeat: no-repeat;transform: rotate(90deg);transition: 0.3s;z-index: 1;margin-left: 1em;position: absolute;right: 1.5em;}
.y-input input {padding: 0 1.5em;}
.y-navbar {padding: 0 var(--y-px);display: flex;align-items: center;}
.y-navbar .wrap {display: flex;align-items: center;height: clamp(60px, calc(100 / 1920 * 100vw), 120px);}
.y-navbar .link {height: 100%;display: flex;align-items: center;position: relative;}
.y-navbar .link:not(:last-child) {margin-right: calc(70 / 1920 * 100vw);}
.y-navbar .link::after {content: '';display: block;position: absolute;height: 2px;width: 100%;bottom: 0;left: 0;background: var(--color-theme);transition: opacity 0.3s;}
.y-navbar .link:not(.on, :hover)::after {opacity: 0;}
.y-store {padding: calc(55 / 1920 * 100vw) var(--y-px) calc(80 / 1920 * 100vw); background: #f5f6fa;}
@media screen and (max-width: 980px) {
  .y-store {padding: 30px var(--y-px);}
}
.y-store .filter-box {display: flex;flex-wrap: wrap;gap: 10px;}
.y-store .y-select {width: max(150px, calc(230 / 1920 * 100vw));}
.y-store button {background: unset;border: 0;outline: none;}
.y-store .submit {--_size: var(--y-form-size);width: var(--_size);height: var(--_size);border-radius: 99px;background: var(--color-theme);color: #fff;cursor: pointer;transition: 0.3s;}
.y-store .submit:hover {opacity: 0.8;}
.y-store .submit:active {opacity: 1;transition: none;}
.y-store .list {margin-top: max(20px, calc(55 / 1920 * 100vw));display: grid;gap: max(12px, calc(22 / 1920 * 100vw));grid-template-columns: repeat(var(--_cols, 1), minmax(0, 1fr));}
@media screen and (min-width: 981px) {
  .y-store .list { --_cols: 2;}
}
@media screen and (min-width: 1440px) {
  .y-store .list {--_cols: 3;}
}
@media screen and (min-width: 1920px) {
.y-store .list {--_cols: 4;}
}
.y-store .list .item {background: #fff;padding: max(20px, calc(40 / 1920 * 100vw)); transition: 0.3s;cursor: pointer;}
.y-store .list .item:hover {--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);box-shadow: var(--shadow);}
.y-store .list .item .name {font-size: max(17px, calc(20 / 1920 * 100vw));margin-bottom: max(18px, calc(30 / 1920 * 100vw));}
.y-store .list .item .info {display: flex; font-size: 14px;}
.y-store .list .item .info span:last-child {flex: 1;margin-left: 1em;}
.y-store .list .item .info:not(:last-child) {margin-bottom: .5em;}