/* product_list */
#product_list {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 30px;margin: 0 0 50px;padding: 0;list-style: none;}
#wrap #product_list > li { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(16,38,61,.12); background: #ffffff; transition: border-color .4s ease,transform .4s cubic-bezier(.19,1,.22,1); margin: 0; }
#product_list > li::before { position: absolute; top: 0; right: 0; left: 0; z-index: 2; height: 3px; background: #db0a1a; content: ""; transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.75,0,.35,1); }
#product_list .info_box { position: relative; display: flex; flex-direction: column; padding: 30px; background: #ffffff; }
#product_list .h3 {position: relative;z-index: 1;margin: 0 0 18px;padding-bottom: 17px;color: #10263d;font-size: 24px;font-weight: 700;line-height: 1.4;letter-spacing: .04em;white-space: normal;transition: color .35s ease,transform .35s ease;height: auto;}
#product_list .h3::after { position: absolute; bottom: 0; left: 0; width: 18px; height: 2px; background: #c2c4c8; content: ""; transition: width .4s ease; }
#product_list article { position: relative; z-index: 1; flex: 1; overflow: visible; color: #6f7881; font-size: 15px; line-height: 1.85; white-space: normal; -webkit-line-clamp: initial; }
#product_list article:empty { display: block; min-height: 95px; }
#product_list article p { margin: 0 0 15px; }
#product_list article p * { vertical-align: baseline }
#product_list article p:last-child { margin-bottom: 0; }
#product_list article span { font-weight: 500; }
#product_list article p:has(img) { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; }
#product_list article img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4/3; object-fit: cover; object-position: center; border: 1px solid rgba(16,38,61,.08); transition: transform .5s cubic-bezier(.19,1,.22,1),filter .5s ease; }
#product_list .price_box { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(16,38,61,.10); }
#product_list .price_box p { display: block; margin: 0; }
#product_list .price_box .txt_num { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 7px 14px; border: 1px solid rgba(16,38,61,.18); border-radius: 100px; background: #ffffff; color: #10263d; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .05em; transition: border-color .35s ease,background-color .35s ease,color .35s ease; }
#product_list .price_box p:first-child .txt_num { border-color: #db0a1a; background: #db0a1a; color: #ffffff; }
#product_list .price_box .txt_num:empty { display: none; }
#product_list .atag_item { position: absolute; inset: 0; z-index: 3; display: block; }
/* productinfo */
#productinfo { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 40px; padding: 38px 42px; border-top: 3px solid #db0a1a; background: #ffffff; }
#productinfo > p { position: relative; z-index: 1; margin: 0; padding: 16px 0 16px 20px; border-bottom: 1px solid rgba(16,38,61,.12); color: #313b45; font-size: 15px; line-height: 1.75; letter-spacing: .025em; }
#productinfo > p::before {position: absolute;top: 24px;left: 0;width: 4px;height: 4px;border: 1px solid #db0a1a;content: "";transform: rotate(45deg);}
#productinfo > p:nth-of-type(1), #productinfo > p:nth-of-type(2) { color: #10263d; font-weight: 700; }
#productinfo > p:nth-of-type(12) { color: #10263d; font-weight: 600; }
#productinfo > div {position: relative;z-index: 1;grid-column: 1/-1;margin-top: 34px;padding-top: 28px;}
#productinfo > div > p:first-child { position: relative; margin: 0 0 20px; padding-bottom: 15px; color: #10263d; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
#productinfo > div > p:first-child::after { position: absolute; bottom: 0; left: 0; width: 45px; height: 2px; background: #db0a1a; content: ""; }
#productinfo > div > p:not(:first-child) { margin: 0 0 18px; color: #6f7881; font-size: 15px; line-height: 1.9; letter-spacing: .025em; }
#productinfo > div .img, #product_list article .img{display:grid;gap: 15px;grid-template-columns: repeat(3, 1fr);}
#productinfo > div > p *{vertical-align:baseline}
#productinfo > div img {display: block;width: 100% !important;height: auto !important;aspect-ratio: 4/3;object-fit: cover;object-position: center;transition: transform .5s cubic-bezier(.19,1,.22,1),border-color .35s ease,filter .35s ease;}
#productinfo a { color: #db0a1a; text-decoration: underline; text-underline-offset: 4px; }
#productinfo span { font-weight: 500; }
@media (hover:hover) {
  #product_list > li:hover { border-color: rgba(219,10,26,.42); transform: translateY(-7px); }
  #product_list > li:hover::before { transform: scaleX(1); transform-origin: left center; }
  #product_list > li:hover article img { transform: scale(1.035); filter: brightness(.94); }
  #productinfo > p:hover { color: #10263d; }
}
@media screen and (max-width:1100px) {
  #product_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  #product_list .info_box { padding: 26px; }
}
@media screen and (max-width:900px) {
  #productinfo {gap: 0 28px;padding: 32px 30px;grid-template-columns: 1fr;}
}
@media screen and (max-width:700px) {
    #wrap #product_list > li{border-top: 3px solid var(--complement);}
    #productinfo > div .img, #product_list article .img{grid-template-columns: repeat(2, 1fr);gap: 10px;}
  #product_list { grid-template-columns: 1fr; gap: 18px; }
  #product_list .info_box { padding: 24px 20px; }
  #product_list h3 { font-size: 21px; }
  #product_list article { font-size: 14px; }
  #product_list article:empty { min-height: 45px; }
  #productinfo { grid-template-columns: 1fr; padding: 28px 22px; }
  #productinfo > p { padding: 14px 0 14px 19px; font-size: 14px; }
  #productinfo > p::before { top: 22px; }
  #productinfo > div { grid-column: auto; margin-top: 28px; padding-top: 24px; }
  #productinfo > div > p:last-child { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
}
@media screen and (max-width:480px) {
  #product_list article p:has(img) { grid-template-columns: repeat(2,1fr); }
  #product_list article p:has(img) img:last-child:nth-child(odd) { grid-column: 1/-1; }
  #product_list .price_box .txt_num { min-width: 64px; padding: 6px 12px; font-size: 12px; }
  #productinfo {padding: 24px 10px;}
  #productinfo > div > p:first-child { font-size: 18px; }
  #productinfo > div > p:not(:first-child) { font-size: 14px; }
  #productinfo > div > p:last-child img:last-child:nth-child(odd) { grid-column: 1/-1; }
}