/* =====================================
   フローティングリンク（固定）
===================================== */
.floating-link {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 8px 16px;
  font-size: 0.75rem;
  border-radius: 20px;
  text-decoration: none;
  z-index: 1000;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.floating-link:hover {
  opacity: 1;
  background-color: #000;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 500px) {
  .floating-link {
    font-size: 0.65rem; /* スマホでは少し文字を小さく */
    padding: 6px 12px;  /* 余白も小さく */
    bottom: 16px;       /* 右下への固定位置を少し内側に */
    right: 16px;        /* 右下への固定位置を少し内側に */
  }
}

/* ===============================
   基本画像スタイル
=============================== */
.main-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===============================
   セクション背景色の切り替え（KNITセクション）
=============================== */
.main-content.white-bg {
    background-color: #fff;
    opacity: 0;
    transition: opacity 2s ease;
    padding-top: 40px; 
    padding-bottom: 40px; 
}

.main-content.white-bg.visible {
    opacity: 1;
}

@media (max-width: 600px) {
    .main-content.white-bg {
        padding-bottom: 15px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .knit-layout {
        margin: 15px auto 15px; 
    }

    .main-content.white-bg .main-content {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ===============================
   メインビジュアル（トップ画像と重ねる要素）
=============================== */
.example {
  position: relative;
}

.example p { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
}

/* ===============================
   キャプション（雑誌風）
=============================== */
.product-caption {
  max-width: 400px;
  margin: 40px auto 40px;
  padding: 0;                 
  text-align: justify;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 0.9rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: #333;
}

@media (max-width: 600px) {
  .product-caption {
    padding: 0 16px; 
    max-width: 100%; 
    font-size: 0.85rem;
    line-height: 1.6; 
    text-align: left; 
    margin-top: 15px;
    margin-bottom: 30px;
  }
}


/* ===============================
   全体基本フォント
=============================== */
body {
  font-family: 'Hiragino Mincho ProN', 'serif'; /* 上品な明朝体系 */
  font-size: 15px; /* ベースサイズ */
  line-height: 1.8;
  color: #333;
  background-color: #baccd1;
}

/* ===============================
   LP冒頭（イントロメッセージ）
=============================== */
.intro-message {
  text-align: center;
  padding: 140px 16px;
  max-width: 800px;
  margin: 0 auto;
}

.intro-message p {
  word-break: keep-all;
  white-space: normal;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

@media (max-width: 600px) {
  .intro-message p {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* ===============================
   セクション大見出し (LIGHT OUTER)
=============================== */
.section-title {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem; 
  font-weight: 700;
  color: #333;
  letter-spacing: 0.15em;
  text-transform: uppercase; 
  margin: 100px auto 30px; 
  padding: 0 16px; 
  max-width: 900px;
}


@media (max-width: 600px) {
    .section-title {
        font-size: 1.5rem; 
        letter-spacing: 0.1em;
        margin: 60px auto 20px;
    }
}
.delay-0 {
    transition-delay: 0s;
}

/* ===============================
   メインコンテンツ
=============================== */
.main-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px; /* PCで固定感 */
  margin: 0 auto;
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.main-description {
  text-align: center;
  padding: 40px 16px;
  max-width: 800px;
  margin: 0 auto;
}

.main-description p {
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
  white-space: normal;
}

@media (max-width: 600px) {
  .main-label {
    font-size: 7rem;
    top: -100px;
    left: -12px;
  }

  .main-image {
    max-width: 100%; /* スマホは全幅 */
  }
}


/* ===============================
   固定リンクボタン
=============================== */
.floating-link {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #000;
  color: #fff;
  padding: 10px 14px;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.3s ease;
  z-index: 999;
}

.floating-link:hover {
  opacity: 1;
  background-color: #111;
}


/* ===============================
   メイン画像の説明（sub-description）
=============================== */
.sub-description {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  max-width: 800px;
  margin: 40px auto 0;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: 13px;
  line-height: 1.8;
  color: #444;
  text-align: left;
  text-indent: 1em;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 600px) {
  .sub-description {
    font-size: 12px;
    
    /* 1. 幅の設定: 親の幅を上限として、左右のマージンで余白を確保 */
    width: auto;
    max-width: 100%;
    
    /* 2. 左右のマージンで、画面端との間に余白を確保し、はみ出しを防ぐ */
    margin: 30px 16px 0 16px; 
    
    /* 3. Paddingを幅に含めることで、左右の余白が幅オーバーの原因になるのを防ぐ */
    box-sizing: border-box; 
    
    /* 4. 内側の余白 */
    padding: 16px; 
    
    position: static;
  }

  /* 2. リスト要素の余白リセット */
  .sub-description .point-list {
    padding-left: 0; 
    margin: 0;        
    list-style: none; 
  }
}

/* ===== PC版だけの重なり表示設定 ===== */
@media (min-width: 601px) {
  .sub-slider-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 60px auto;
  }

  .sub-slider {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .sub-description {
    position: absolute;
    bottom: 20px;
    right: 0; /* デフォルトは右下 */
    width: 400px;
    margin: 0;
    padding-top: 16px;
    z-index: 10;
  }

  /* 偶数番目の main-content 内だけ左下に */
  .main-content:nth-of-type(even) .sub-description {
    right: auto;
    left: 0;
  }
}

.sub-description p {
  word-break: keep-all;
  white-space: normal;
}

@media (max-width: 600px) {
  .sub-description {
    font-size: 12px;
    padding: 16px;
    margin: 10px auto 0;
    max-width: 400px; /* ← 画像（sub-slider）のmax-widthに揃える */
    width: 100%;
  }
}


/* ===============================
   ★FEATURED商品（is-featured）の強調装飾★
=============================== */
/* 1. Jacketのチェックボタンを常時鮮やかに */
.product-row.is-featured .price-check .check-btn { 
    /* ↓↓↓ 修正: 通常時から鮮やかな背景色を適用 ↓↓↓ */
    background-color: #A00000; /* 例: 少し暗めの赤 */
    color: #fff; 
    
    
    /* ホバー時の設定があれば、それをさらに濃くすると良い */
}

/* Jacketの行全体に下線を追加 */
.product-row.is-featured {
    /* ↓↓↓ 追記: 細い黒線を下に追加 ↓↓↓ */
    border-bottom: 1px solid #000; 
    padding-bottom: 8px;
    padding-top: 8px;
    
    /* 他の is-featured のスタイルがあればここに維持 */
}

/* ホバー時の設定 (任意: さらに濃くする) */
.product-row.is-featured .price-check .check-btn:hover {
    background-color: #C00000; 
    opacity: 1; 
}
/* ... (その他の is-featured のスタイルがあれば維持) ... */
@media (max-width: 600px) {
  /* ... (既存の .product-row, .product-name などのスマホ設定は維持) ... */
  
  /* ↓↓↓ FEATURED商品（ジャケット）のスマホでの線と余白の設定を再定義 ↓↓↓ */
  .product-row.is-featured {
    /* 1. 下線: 黒の細い線 */
    border-bottom: 1px solid #000 !important; 
    
    /* 2. 上下の余白: 行間を広げ、線とコンテンツの隙間を作る */
    /* 左右の 16px はそのまま維持 */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    
    /* PC版の設定を上書きするため !important を追加しています */
  }
  
  /* ... (その他のスマホの設定は維持) ... */
}

/* ===============================
   Style キャプション
=============================== */
.style-caption {
  /* 中央揃え */
  text-align: center;
  
  /* 大きくなくてよい、とのご要望なのでフォントサイズを調整 */
  font-size: 2rem; 
  
  /* ご希望に応じてフォントを明朝体にするなど調整 */
  font-family: 'Hiragino Mincho ProN', 'serif'; 
  font-weight: normal; 
  color: #333;
  letter-spacing: 0.1em;
  
  /* 画像との間隔を調整 */
  margin-top: 60px; /* セクションの上部の余白として */
  margin-bottom: 8px; /* 画像との間に少し隙間を空ける */
  padding: 0 16px; /* スマホでの左右余白を確保 */
  
  /* 最大幅を画像の最大幅に合わせる（任意） */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* スマホでの調整 (任意: 600px以下) */
@media (max-width: 600px) {
    .style-caption {
        font-size: 1rem;
        margin-top: 40px;
        /* 左右のパディングは既に基本設定で入っています */
    }
}

/* ===============================
   商品名と金額
=============================== */

/* 商品行全体 */
.product-row {
  max-width: 600px;
  margin: 3px auto;
  padding: 0px 0; 
}
/* リンク要素 (a.product-link) - 【★★★ここでPC/スマホ共通の横並びを設定★★★】 */
.product-row .product-link {
  /* ↓↓↓ 修正1: Flexboxをここに移動し、アイテム名と価格を横並びにする ↓↓↓ */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 親の幅いっぱいに広げる */
  
  text-decoration: none; /* リンクの下線などを除去 */
  color: inherit; /* テキストの色を親から継承 */
}

/* 商品名 (h1.product-name) */
.product-name {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    font-size: 0.8rem;
    color: #333;
    letter-spacing: 0.05em;
    margin: 0;
    
    /* ↓↓↓ 修正: フォントウェイトを標準〜細字に設定 ↓↓↓ */
    font-weight: normal; /* または 400 */
    /* より細くしたい場合は: font-weight: 300; */
    
    flex: 1 1 auto;
    min-width: 0; 
    white-space: normal; 
}

/* 金額 */
.price-check .price {
  /* ↓↓↓ 修正2: サイズを 0.8rem に統一 ↓↓↓ */
  font-size: 0.8rem;
  
  font-weight: 700;
  color: #000;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.price-check .price:hover {
  opacity: 0.7;
}

/* CHECKボタン */
.price-check .check-btn {
  background-color: #000;
  color: #fff;
  padding: 4px 8px;
  
  /* ↓↓↓ 修正2: サイズを 0.8rem に統一 (paddingはそのまま) ↓↓↓ */
  font-size: 0.8rem; 
  
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  transition: opacity 0.2s ease;
}

.price-check .check-btn:hover {
  opacity: 0.7;
}


/* 金額＋Check (div.price-check) */
.price-check {
  display: flex;
  align-items: center;
  gap: 8px;
  
  /* ↓↓↓ 修正3: 縮小を禁止し、常に横並びを維持 (PC/スマホ共通) ↓↓↓ */
  flex-shrink: 0; 
  white-space: nowrap; 
}

/* 金額とボタンのサイズ (PC版サイズ) */
.price-check .price,
.price-check .check-btn {
  font-size: 0.8rem;
  font-weight: 700;
  /* (その他のスタイルはそのまま) */
}

/* ↓↓↓ 追記: FEATUREDではない行（ブラウス、パンツなど）の文字色をグレーに変更 ↓↓↓ */
.product-row:not(.is-featured) .product-name,
.product-row:not(.is-featured) .price-check .price {
    color: #666; /* 例: 少し濃いめのグレー。お好みの色に調整してください */
}


/* 2. チェックボタンの色をグレーアウトする */
.product-row:not(.is-featured) .price-check .check-btn {
    /* 背景色を明るいグレーに */
    background-color: #aaa;
    /* 文字色を白または濃いグレーに */
    color: #fff; 
    
    /* ホバー時の設定を追記 (任意: 少し暗くする) */
    opacity: 1; /* 通常時の不透明度を維持 */
}

/* ホバー時の設定 (任意: 濃いグレーにする) */
.product-row:not(.is-featured) .price-check .check-btn:hover {
    background-color: #888; /* 少し暗めのグレー */
    opacity: 1; 
}



/* スマホでは縦並びに変更 (元の設定) */

@media (max-width: 600px) {
  .product-row {
    /* ↓↓↓ 修正: 横一列表示のため、縦並び (column) を解除 ↓↓↓ */
    flex-direction: row; 
    align-items: center; 
    text-align: left; 
    
    border-bottom: none !important; 
    
    /* KNITセクション以外の商品行のためのパディングは削除し、
       KNITセクション専用のCSSに統一させる（中央寄せ問題の解決のため） */
    /* padding-left: 16px; は削除 */
    /* padding-right: 16px; は削除 */

    /* ↓↓↓ 追記: KNITセクション以外のリストに影響を与える max-width をリセット ↓↓↓ */
    max-width: none !important; 
  }

  /* 線の調整（KNITセクション「以外」のリストに影響） */
  /* ↓↓↓ 削除: KNITセクションと競合するため、汎用的な線の設定を削除 ↓↓↓ */
  /* .product-row::after {
      width: calc(100% - 32px); 
      left: 16px; 
  } */
  
  /* .product-row 内に .product-link がある場合は、その padding をリセットすると良い */
  .product-row .product-link {
    padding-left: 0;
    padding-right: 0;
  }

  /* ★【修正箇所】★ */
  .product-name {
    /* ↓↓↓ 修正1: フォントサイズを極限まで縮小 (0.7remに) ↓↓↓ */
    font-size: 10px !important; 
    
    /* 縦並びの際に幅いっぱいに広げ、中央揃えを維持 */
    width: auto !important; 
    flex: 1 1 auto; /* 商品名に優先的に幅を与える */
    white-space: normal !important;
    margin: 0 !important;
  }

  /* ↓↓↓ 修正2: 金額とチェックボタンのサイズも縮小 (0.7remに) ↓↓↓ */
  .price-check .price,
  .price-check .check-btn {
      font-size: 10px !important;
  }

  .price-check {
    /* ↓↓↓ 修正3: 商品名との間隔 (margin-top) を削除し、間隔 (gap) を詰める ↓↓↓ */
    margin-top: 0; 
    gap: 2px; 
    flex-shrink: 0; 
  }
}


/* ===============================
   KNITセクション (Style 4以降) - 2カラムレイアウト
=============================== */
.knit-layout {
    /* PCでは2カラム、スマホでは縦積みにするためFlexboxを使用 */
    display: flex;
    flex-direction: column; /* スマホは縦積み */
    max-width: 900px;
    margin: 30px auto 30px;
}

.knit-img-column {
    flex: 1 1 50%;
    order: 1;
    position: relative; 
    overflow: visible; 
    
    /* ↓↓↓ 修正: padding-left/right を削除し、margin-left/right に変更 ↓↓↓ */
    /* padding: 25px; は削除 */
    padding-left: 0;
    padding-right: 0;

    margin-left: 25px; /* ボタンの飛び出しスペースをマージンで確保 */
    margin-right: 25px; 
}

.knit-info-column {
    flex: 1 1 50%; /* 情報カラムの基本幅 */
    order: 2; /* スマホでは下部 */
    padding-top: 20px; /* スマホ時の隙間 */
}

/* ===============================
   KNIT 画像スライダー (切り替え機能)
=============================== */
.knit-image-wrapper {
    position: relative;
    width: 100%; /* 画像の比率を維持 */
    overflow: hidden; /* 画像がはみ出さないように */
    margin-bottom: 0;
    padding-bottom: 0;
    /* position: absolute の基準は不要になるので、overflow: hidden に戻す */
}

/* ↓↓↓ 【新規追加】メイン画像（スライド機能なし）のスタイル ↓↓↓ */
.main-knit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.knit-slide.active {
    opacity: 1;
}

/* スマートフォンでの調整（もし必要なら） */
@media (max-width: 600px) {
    .slider-btn {
        font-size: 2rem;
        width: 36px;
        height: 36px;
        line-height: 36px;
    }
    .prev-btn {
        left: 5px; /* スマホでは画像に少し寄せる */
    }
    .next-btn {
        right: 5px; /* スマホでは画像に少し寄せる */
    }
}


/* ===============================
   KNITセクション - サブ画像（横並び）
=============================== */
.knit-sub-images {
    display: flex;
    gap: 10px; 
    margin-top: 15px; 
    width: 100%;
    flex-wrap: wrap; 
    
    /* ↓↓↓ 追記: 画像を中央に配置する ↓↓↓ */
    justify-content: center; 
}

.sub-knit-image {
    /* 2枚横並びを想定し、幅を調整 (50%から隙間を引いたサイズ) */
    width: calc(50% - 5px); 
    height: auto;
    object-fit: cover;
    display: block;
}

/* スマホでの調整 (縦積みに戻す必要があれば) */
@media (max-width: 600px) {
    .knit-sub-images {
        flex-direction: row; /* スマホでも横並びを維持 */
        justify-content: space-between;
    }
    .sub-knit-image {
        width: calc(50% - 5px); /* 2枚横並びを維持 */
    }
}

/* ===============================
   PC版: 2カラムレイアウト適用
=============================== */
@media (min-width: 801px) {
    .knit-layout {
        flex-direction: row; /* 横並びに戻す */
        gap: 40px; /* 左右カラムの間隔 */
    }

    .knit-img-column {
        order: 1;
        max-width: 50%; 
    }

    .knit-info-column {
        order: 2;
        max-width: 50%;
        padding-top: 0; /* PCでは上部の余白をリセット */
        
        /* 情報を画像と縦位置で揃えるためにFlexboxを使う（任意） */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        
        /* ↓↓↓ 追記: 高さを揃え、コンテンツが溢れたらスクロールバーを表示 ↓↓↓ */
        height: 100%; /* 親要素(knit-layout)の高さ全体を使う */
        overflow-y: auto; /* コンテンツが溢れた場合にスクロールバーを表示 */
        align-self: stretch; /* 念のため高さを親に合わせる */
    }

    /* 商品キャプションの最大幅をリセット */
    /* ↓↓↓ 修正: KNITセクション（.knit-layout内）のキャプションにのみ適用 ↓↓↓ */
    .knit-layout .product-caption {
        max-width: none; 
    }

    /* ↓↓↓ レイアウトを左右反転させる設定 ↓↓↓ */
    .knit-layout.reverse-layout .knit-img-column {
        order: 2; /* 画像を右に移動 */
    }

    .knit-layout.reverse-layout .knit-info-column {
        order: 1; /* 情報を左に移動 */
    }
  }

  /* ----------------------------------------------------------------- */
    /* ↓↓↓ PC版: 商品名と金額を横幅いっぱいに広げ、両端寄せを復元する設定 ↓↓↓ */
    /* ----------------------------------------------------------------- */

    /* 1. product-row 自体の幅を強制的に 100% に広げ、余白をリセット */
    .knit-info-column .product-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* 2. product-link（アイテム名と金額）に両端寄せを適用 */
    .knit-info-column .product-row .product-link {
        display: flex; 
        align-items: center; 
        
        /* アイテム名と金額を左右の端に寄せる */
        justify-content: space-between; 
        
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    

/* ===============================
   アニメーション（フェードイン）
=============================== */
.fade-in-section {
  opacity: 0;
  
  /* ↓↓↓ 修正1: transform の行を削除またはコメントアウト（位置移動をなくす）↓↓↓ */
  /* transform: translateY(40px); */ 
  
  /* ↓↓↓ 修正2: transition の秒数を長くする（3sに延長）↓↓↓ */
  /* transform も削除したので、transition からも transform を削除します */
  transition: opacity 3s ease; 
}

.fade-in-section.visible {
  opacity: 1;
  /* transform: none; は transform: translateY(40px) を削除したので不要です */
}

/* ===============================
   フェードイン遅延設定（再設定）
=============================== */

/* 白い背景が出現するまでの時間（アニメーションの起点） */
.bg-delay {
    transition-delay: 0s; /* KNITセクションに入ったらすぐに開始 */
}

/* KNIT 見出し */
.delay-1 {
    transition-delay: 0.8s; /* 背景が少し出てから見出しが出現 */
}

/* Style 4 キャプション */
.delay-2 {
    transition-delay: 1.3s; /* 見出しの 0.5秒後に出現 */
}

/* メインコンテンツ（商品リストや画像） */
.delay-3 {
    transition-delay: 1.8s; 
}

/* サブスライダー */
.delay-4 {
    transition-delay: 2.3s;
}

.fade-in-section {
    transition: opacity 3s ease; 
    transition-property: opacity, transform;
}

/* ===============================
   KNITセクション - メイン画像リンク効果
=============================== */

/* リンクをブロック要素にし、親要素のサイズに合わせる */
.main-image-link {
    display: block;
    text-decoration: none; /* リンクの下線を非表示に */
    
    /* ↓↓↓ 追記: ホバー効果のアニメーション設定 ↓↓↓ */
    transition: opacity 0.3s ease; /* 0.3秒かけてゆっくり変化 */
}

/* 画像自体にもトランジションを設定する（念のため） */
.main-knit-image {
    /* 既存のスタイルを維持 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* ↓↓↓ 追記: リンク経由で不透明度を操作するため、初期状態の不透明度は 1 に設定 ↓↓↓ */
    opacity: 1;
    transition: opacity 0.3s ease; /* 0.3秒かけてゆっくり変化 */
}

/* マウスオーバー時の効果 */
.main-image-link:hover {
    /* ↓↓↓ 追記: マウスオーバーで不透明度を下げて色を薄くする ↓↓↓ */
    opacity: 0.8; /* 20%薄くする (値は0から1の間) */
    cursor: pointer; /* マウスカーソルをリンクの手に変更 */
}

/* ===============================
   【最終最終手段】商品2以降のリストの物理的な位置矯正
=============================== */
@media (max-width: 600px) {
    
    /* 1. knit-layout（親要素）の中央寄せを完全に無効化 */
    .knit-layout {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }
    
    /* 2. knit-info-column（商品2以降のリストを囲むカラム）に負のマージンを設定 */
    /* これで、カラム全体を左に強制的にずらします。 */
    .knit-info-column {
        /* ずれている量に合わせて、この -10px の値を調整してください。 */
        /* 例: ズレが大きい場合 -> -20px にする */
        margin-left: -10px !important; 
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    
    /* 3. リスト行も念のため左寄せを強制 */
    .knit-info-column .product-row {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }
}