*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
    img { max-width: 100%; }
    a { color: inherit; text-decoration: none; }

   
.step-img img{
  width: 100%;
    height: 100%;
    object-fit: cover;
}
.guilty-wrap {
width: 1000px;
    max-width: 100%;
    margin-inline: auto;
    padding: 0 40px;
color: #fff;
    background: #000;}


.guilty-wrap img{
display: block; }



    .kv-catch {
      background: #0d0d0d;
      padding: 14px 20px 13px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 0.02em;
      line-height: 1.5;
    }

    /* ===== KV ===== */

    .kv-logo-overlay {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 0 0 0;
      width: 100%;
    }
    .kv-lead {
      padding: 30px 0 20px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    .kv-lead .red { color: #e10d00; font-weight: bold; }

    /* ===== SALES PERIOD ===== */
    .sales-period {
      padding: 8px 10px 30px;
    }
    .sales-period-head {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 10px;
    }
    .sales-period-en {
      font-size: 70px;
      font-weight: 900;
      line-height: 1;
    }
    .sales-period-ja {
      font-size: 16px;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }
    .sales-period-date {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
      line-height: 1.6;
    }

    /* ===== SHIPPING TIME ===== */
    .shipping {
      padding: 20px 10px 30px;
      text-align: right;
    }
    .shipping-head {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 6px;
    }
    .shipping-ja {
      font-size: 14px;
      letter-spacing: 0.1em;
    }
    .shipping-en {
      font-size: 70px;
      font-weight: 900;
      line-height: 1;
    }
    .shipping-date {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 4px;
letter-spacing: 0.1em;
    }
    .shipping-note {
      font-size: 14px;
    }







    /* ===== DESIGN SECTION ===== */
    .design-sec {
      background: url(https://gigaplus.makeshop.jp/faves2023/img/guiltygear/d1back.webp);
       background-size: cover;  
  background-position: center; 
  background-repeat: no-repeat; 
     padding: 40px;
    margin: 30px 0;
    }
       .design-sec2 {
      background: url(https://gigaplus.makeshop.jp/faves2023/img/guiltygear/d2back.webp);
       background-size: cover;  
  background-position: center; 
  background-repeat: no-repeat; 
     padding: 40px;
    }

    /* DESIGN-1*/
    .design-header-left {
      background: #161616;
      padding: 16px 20px 14px;
      display: flex;
      align-items: baseline;
      gap: 16px;
    }
    .design-num {
      font-size: 32px;
      font-weight: 900;
      letter-spacing: 0.02em;
      line-height: 1;
    }
    .design-type {
      font-size: 11px;
      letter-spacing: 0.18em;
      color: #888;
      font-weight: bold;
    }

    /* DESIGN-2 */
    .design-header-right {
      background: #161616;
      padding: 16px 20px 14px;
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 16px;
    }


    .design-visual {
      width: 100%;
      display: flex;
      position: relative;
      margin-bottom: 10px;
    }
    .design-visual img { width: 100%; height: 100%; object-fit: cover; }
    .design-visual-ph {
      color: rgba(255,255,255,0.18);
      font-size: 13px;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .design-caption {
      background: #222;
      padding: 11px 16px;
      font-size: 13px;
      color: #bbb;
      text-align: center;
      letter-spacing: 0.06em;
      border-top: 1px solid #2e2e2e;
      border-bottom: 1px solid #2e2e2e;
    }

    /* ===== products ===== */
    .products {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding-top: 20px;
    }
    .product {
      display: flex;
      flex-direction: column;
    }
    .product-name {
      background: #2a2a2a;
      padding: 10px 6px 9px;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-align: center;
      border-bottom: 2px solid #111;
    }
    .product-img {
      flex: 1;
      min-height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .product-img img { width: 100%; height: 100%; object-fit: cover; }
    .product-img-ph {
      color: rgba(255,255,255,0.12);
      font-size: 11px;
    }
    .product-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #e10d00;
      border: none;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      width: 100%;
      transition: background 0.15s;
      margin-top: 15px;
      padding: 6px 0;
    }
    .product-btn:hover { background: #aa1818; }
   
    .btn-icon {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .btn-icon::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      background: #fff;
      transform: rotate(45deg);
    }

    /* ===== PURCHASE BONUS ===== */
    .bonus {
      margin-top: 14px;
      padding: 30px 0;
      text-align: center;
    }
    .bonus-head {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .bonus-ja {
      font-size: 13px;
      color: #aaa;
      letter-spacing: 0.12em;
    }
    .bonus-en {
      font-size: 34px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1;
    }
    .bonus-desc {
      font-size: 16px;
      line-height: 1.9;
      margin-bottom: 20px;
    }
    .bonus-desc .highlight {
      color: #cc1e1e;
      font-size: 18px;
      font-weight: bold;
    }
    
    .bonus-img img { width: 100%; height: 100%; object-fit: cover; }
    .bonus-img-ph {
      color: rgba(255,255,255,0.15);
      font-size: 12px;
      letter-spacing: 0.1em;
    }
    .bonus-notes {
      text-align: left;
      font-size: 12px;
      line-height: 2;
    }
    .bonus-notes p + p { margin-top: 2px; }
    .bonus-notes p::before { content: '※'; margin-right: 3px; }

    /* ===== COPYRIGHT ===== */
    .copyright {
      padding: 14px 0;
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    /* ===== BREADCRUMB ===== */
.bread__wrap{
background-color:#fff;
    width: 1000px;
    max-width: 100%;
    margin-inline: auto;
    padding: 20px 40px;
}

    .breadcrumb {
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid #e0e0e0;
    }
    .breadcrumb a { color: #555; }
    .breadcrumb-sep { color: #bbb; font-size: 13px; }

    /* ===== SNS ===== */
    .sns {
      background: #fff;
      padding: 22px 20px 24px;
      text-align: center;
    }
    .sns a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
    }
    .sns svg { width: 30px; height: 30px; fill: #000; }

    .footer-line {
      height: 1px;
      background: #ddd;
    }

.guilty-wrap .cat .oshiga__wrap {
    margin-top: -10px;
    padding-top: 40px;}

.guiltygear .product-wrap
 {
    border-bottom: none;}


@media(max-width:x1200px){
.category-image img {
    margin-top: 150px;}
}

@media(max-width:599px){

.guiltygear .category-image img{
height: inherit;
        margin-top: 140px;}

.kv-lead {
    font-size: 18px;}

  .sales-period-en {
      font-size: 40px;}

 .sales-period-ja {
      font-size: 14px;}

  .sales-period-date {
      font-size: 16px;}

 .shipping-en {
      font-size: 40px;}

 .shipping-date {
      font-size: 15px;}

.design-sec {
padding: 10px;
    margin: 20px 0;
}
.products {
gap: 10px;
    padding-top: 10px;}

.product-btn {
gap: 10px;
font-size: 15px;
margin-top: 8px;

}

.design-sec2 {
padding: 10px;}

}


@media(max-width:500px){
.guiltygear .category-image img{
        margin-top: 60px;   }

    .guilty-wrap{
        padding: 0;}

.kv-lead {
    padding: 20px 0 10px;
    font-size: 14px;}

    .sales-period-en {
        font-size: 30px;
    }
.sales-period-ja {
        font-size: 12px;
    }
    .sales-period-date{
font-size: 14px;}
.shipping-ja {
    font-size: 12px;}
    .shipping-en{
font-size: 30px;
    }
    .shipping-date {
        font-size: 14px;
    }
shipping-note {
    font-size: 12px;
}
.product-btn {
font-size: 12px;
}

.bonus {
padding:0;}

.bread__wrap {
padding: 10px 5px;}

}

@media(max-width:350px){
    .product-btn{
        font-size: 10px;
    }
}