/* product_list */
#product_list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin: 2vw 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 .price_box { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
#product_list .price_box .info { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
#product_list .price_box .info p { position: relative; display: inline-flex; align-items: center; margin: 0 10px 0 0; padding: 0 10px 0 0; }
#product_list .price_box .info p:not(:last-child)::after { position: absolute; top: 50%; right: 0; width: 1px; height: 13px; background: rgba(16,38,61,.28); content: ""; transform: translateY(-50%); }
#product_list .price_box p { margin: 0; }
#product_list .price_box .txt_num { display: inline-block; padding: 0; border: 0; background: transparent; color: #313b45; font-size: 15px; font-weight: 500; line-height: 1.7; letter-spacing: .02em; }
#product_list .price_box > p .txt_num { color: #db0a1a; font-weight: 500; }
#product_list .atag_item { position: absolute; inset: 0; z-index: 3; display: block; }

/* productdetail */
#productdetail { display: grid; grid-template-columns: minmax(0,1fr) 340px; align-items: start; gap: 30px; margin: 0; padding: 0; white-space: normal; }
#productdetail #productinfo { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 42px; padding: 38px 42px; border: 1px solid rgba(16,38,61,.12); border-top: 3px solid #db0a1a; background: #ffffff; }
#productdetail #productinfo > p { position: relative; z-index: 1; margin: 0; padding: 16px 0 16px 20px; border-bottom: 1px solid rgba(16,38,61,.1); color: #313b45; font-size: 15px; line-height: 1.7; letter-spacing: .02em; }
#productdetail #productinfo > p::before {position: absolute;top: 25px;left: 0;width: 4px;height: 4px;border: 1px solid #db0a1a;content: "";transform: rotate(45deg);}
#productdetail #productinfo > p:nth-of-type(1),#productdetail #productinfo > p:nth-of-type(2) { color: #10263d; font-weight: 700; }
#productdetail #productinfo > div {position: relative;z-index: 1;grid-column: 1/-1;margin-top: 36px;padding-top: 30px;}
#productdetail #productinfo > div > p:first-child {position: relative;margin: 0 0 22px;color: #10263d;font-size: 19px;font-weight: 700;line-height: 1.5;letter-spacing: .04em;}
#productdetail #productinfo > div > p:not(:first-child) { margin: 0 0 14px; color: #6f7881; font-size: 15px; line-height: 1.9; letter-spacing: .02em; }
#productdetail #productinfo > div > p *{vertical-align:baseline}
#productdetail #productinfo > div span { font-weight: 500; }
#productdetail .other {position: sticky;top: 110px;padding: 20px 10px;border-top: 3px solid #10263d;background: #ffffff;}
#productdetail .other > p:first-child {position: relative;margin: 0 0 24px;color: #10263d;font-size: 18px;font-weight: 700;line-height: 1.45;letter-spacing: .04em;}
#productdetail .other > div { position: relative; margin-bottom: 18px; padding: 20px 18px 18px; border: 1px solid rgba(16,38,61,.1); background: #ffffff; overflow: hidden; transition: border-color .35s ease,transform .35s ease; }
#productdetail .other > div:last-child { margin-bottom: 0; }
#productdetail .other > div::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: #db0a1a; content: ""; transform: scaleX(0); transform-origin: right center; transition: transform .4s cubic-bezier(.75,0,.35,1); }
#productdetail .other > div p { margin: 0 0 8px; color: #6f7881; font-size: 14px; line-height: 1.65; letter-spacing: .015em; }
#productdetail .other > div p:nth-child(1),#productdetail .other > div p:nth-child(2),#productdetail .other > div p:nth-child(3) { color: #313b45; }
#productdetail .other > div p:last-child { margin-top: 15px; margin-bottom: 0; }
#productdetail .other > div p:last-child a {position: relative;display: inline-flex;align-items: center;justify-content: space-between;gap: 30px;width: 100%;padding: 10px 14px;border: 1px solid #10263d;color: #10263d;font-size: 14px;font-weight: 600;line-height: 1.4;text-decoration: none;transition: color .35s ease,background-color .35s ease,border-color .35s ease;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#productdetail .other > div p:last-child a::after { width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; content: ""; transform: rotate(45deg); transition: transform .35s ease; }
#productdetail a { color: #db0a1a; }
@media (hover:hover) {
  #product_list > li:hover { transform: translateY(-4px); }
  #product_list > li:hover::before { transform: scaleX(1); transform-origin: left center; }
  #productdetail .other > div:hover::before { transform: scaleX(1); transform-origin: left center; }
  #productdetail .other > div:hover p:last-child a { border-color: #db0a1a; background: #db0a1a; color: #ffffff; }
  #productdetail .other > div:hover p:last-child a::after { transform: translateX(3px) rotate(45deg); }
}
@media screen and (max-width:1100px) {
  #productdetail {grid-template-columns: 1fr;gap: 22px;}
  #productdetail #productinfo { column-gap: 28px; padding: 32px 30px; }
  #productdetail .other { padding: 24px 20px; }
  #product_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
}
@media screen and (max-width:900px) {
    #productdetail #productinfo, #productdetail { grid-template-columns: 1fr; }
  #productdetail .other { position: relative; top: auto; }
  #productdetail .other {display: grid;padding: 24px 0px;gap: 16px;}
  #productdetail .other > p:first-child { grid-column: 1/-1; margin-bottom: 4px; }
  #productdetail .other > div { margin-bottom: 0; }
}
@media screen and (max-width:700px) {
    #wrap #product_list > li{border-top: 3px solid var(--complement);}
  #productdetail #productinfo { grid-template-columns: 1fr; padding: 28px 22px; }
  #productdetail #productinfo > p {padding: 14px 0 14px 19px;}
  #productdetail #productinfo > p::before { top: 22px; }
  #productdetail #productinfo > div { grid-column: auto; margin-top: 28px; padding-top: 24px; }
  #productdetail .other {grid-template-columns: 1fr;}
  #product_list {grid-template-columns: 1fr;gap: 30px;margin: 6vw 0 50px;}
  #product_list .info_box {padding: 20px 20px 18px;}
  #product_list .h3 {font-size: 19px;}
}
@media screen and (max-width:480px) {
  #productdetail { gap: 16px; }
  #productdetail #productinfo { padding: 24px 18px; }
  #productdetail #productinfo > div > p:first-child { font-size: 19px; }
  #productdetail .other > p:first-child { font-size: 18px; }
  #productdetail .other > div { padding: 18px 15px; }
  #product_list .price_box .info { row-gap: 3px; }
  #product_list .price_box .info p { margin-right: 8px; padding-right: 8px; }
}