/* royal_patch.css
   目的: 既存のCSS/JS依存を壊さずに、まず“止めたい”領域を安全に無効化して検証する
   方針: display:none は最小範囲、レイアウトの副作用を減らすため余白も調整
*/

/* 1) border1.gif をCSSの区切りで代替 */
.hr-like {
  display: block;
  width: 100%;
  height: 1px;
  background: #e5e7eb;
  margin: 16px 0;
  clear: both;
  border: 0;
}

/* ========================================
   見出しタグ階層修正に伴うスタイル調整
   ======================================== */

/* 2) .hr-like は元々のimg（border1.gif）の代わり - flexbox orderを設定 */
#product-content > .hr-like:first-child {
  -webkit-order: -4;
  -moz-order: -4;
  -ms-order: -4;
  -o-order: -4;
  order: -4;
  margin-top: 10px;
}

/* 3) .hr-like の後に来るh2は、元々のimg + h3の関係を再現 */
#product-content .hr-like + h2 {
  -webkit-order: -2;
  -moz-order: -2;
  -ms-order: -2;
  -o-order: -2;
  order: -2;
}

/* 4) h2内のspanを中央揃えにする（元々のimg + h3 spanのスタイルを再現） */
#product-content .hr-like + h2 span {
  color: #666 !important;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
  letter-spacing: 0.2em !important;
  text-align: center !important;
  font-size: 20px !important;
  margin: 50px 0 !important;
  background: #fff !important;
  display: block !important;
  padding: 0 !important;
  border: none !important;
}

/* 5) h1（メイン商品タイトル）- 元々のh3スタイルを継承 */
#product-content h1 {
  font-size: 24px !important;
  font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif !important;
  color: #431f0f !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 25px !important;
  text-align: left !important;
}

#product-content h1 span {
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
  font-size: 12px !important;
  display: inline !important;
  padding: 5px 15px !important;
  color: #111 !important;
  margin: -5px 35px 0 0 !important;
  letter-spacing: 0.05em !important;
  vertical-align: middle !important;
  background: #f0f0f0 !important;
  border: none !important;
}

/* 6) セクション見出し（ご注文方法、商品詳細）- 元々のh4から昇格 */
#product-content .howtoorder h2,
#product-content #product-detail h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 5px 0 20px 0 !important;
  display: block !important;
  color: inherit !important;
  font-family: inherit !important;
  padding: 0 !important;
  line-height: inherit !important;
}

/* スマホ版: 商品詳細とご注文方法を常時表示 */
@media screen and (max-width: 768px) {
  /* spstyle.css の .acordion-detail { display: none; } を上書きして常時表示 */
  #product-content #product-detail .acordion-detail,
  #product-content .howtoorder .acordion-detail {
    display: block !important;
  }
  
  /* h2は通常の見出しとして表示（アコーディオン機能なし） */
  #product-content .howtoorder h2,
  #product-content #product-detail h2 {
    pointer-events: auto !important;
    cursor: default !important;
  }
}

#product-content .howtoorder h2 span,
#product-content #product-detail h2 span {
  letter-spacing: .1em !important;
  font-size: .7em !important;
  display: block !important;
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 7) h3（詳細見出し - 1級遮光など）- 元々のh4から昇格 */
#product-content .order-dedail:nth-of-type(odd) h3,
#product-content .order-dedail:nth-of-type(even) h3 {
  vertical-align: middle !important;
  display: block !important;
  font-weight: normal !important;
  font-size: 17px !important;
  width: 150px !important;
  padding: 15px 30px 0 !important;
  position: relative !important;
  height: 50px !important;
  margin: 0 auto !important;
}

#product-content .order-dedail:nth-of-type(odd) h3 {
  color: #333 !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #333 !important;
  z-index: 0 !important;
}

#product-content .order-dedail:nth-of-type(even) h3 {
  background: #333 !important;
  color: #fff !important;
  border: none !important;
}

/* 8) "隠したことで詰まりすぎた"場合の最低限余白 */
.howtoorder h6 {
  margin-top: 16px;
}

/* ========================================
   スマホ版のスタイル調整
   ======================================== */

@media screen and (max-width: 768px) {
  /* パンくずリストをスマホでも表示 */
  #breadCrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
    padding: 10px 0 !important;
    margin-bottom: 10px !important;
  }
  
  #breadCrumb li {
    font-size: 12px !important;
    padding: 0 5px 0 10px !important;
  }
  
  /* h1を1つの枠で囲んで中央揃えに、オーダーカーテン→ロイヤルの順に表示 */
  #product-content h1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid #dcdcdc !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #product-content h1 span {
    display: block !important;
    width: auto !important;
    margin: 0 0 5px 0 !important;
    font-size: 14px !important;
    color: #999 !important;
    background: transparent !important;
    padding: 0 !important;
  }
  
  /* キャッチコピー（.hr-like + h2）の余白を詰める */
  #product-content .hr-like + h2 span {
    margin: 20px 0 !important;
  }
  
  /* .hr-likeの余白を詰める */
  #product-content > .hr-like:first-child {
    margin-top: 5px !important;
  }
}

/* ========================================
   商品詳細の拡大アイコン（虫眼鏡）スタイル
   ======================================== */

/* 商品詳細のzoom画像を非表示にして、:after疑似要素で白い%マークを表示 */
#product-content #product-detail .detail-photo .zoom img {
  display: none !important;
}

#product-content #product-detail .detail-photo .zoom {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}

/* 白い%マークを表示（色一覧と同じスタイル） */
#product-content #product-detail .detail-photo .zoom::after {
  font-family: "linea-basic-10" !important;
  content: "%" !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  font-size: 24px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  display: block !important;
}

/* スマホでの調整（端過ぎないように） */
@media screen and (max-width: 768px) {
  #product-content #product-detail .detail-photo .zoom {
    right: 8px !important;
    bottom: 8px !important;
  }
  
  #product-content #product-detail .detail-photo .zoom::after {
    font-size: 20px !important;
  }
}

/* ========================================
   その他のレイアウト調整
   ======================================== */

/* 既存CSSが強すぎてスマホで横はみ出しする場合の保険（副作用が少ない） */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ========================================
   swipebox 不具合修正
   ======================================== */

/* 色一覧の :after 疑似要素を完全に無効化（特異性を最大化） */
body #product-content a.swipebox[rel="color"]:after,
body #product-content .color-variation a.swipebox[rel="color"]:after,
body #product-content .howtoorder .color-variation a.swipebox[rel="color"]:after {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
}

/* swipebox内部でも念のため無効化 */
#swipebox-overlay a[rel="color"]:after,
#swipebox-slider a[rel="color"]:after {
  content: none !important;
  display: none !important;
}