@charset "euc-jp";

/* -----------------------------------------------------------
   0. 基本リセット (テンプレートの基本構造を残すための記述)
----------------------------------------------------------- */
#page-wrapper { position: relative; }
#wrapper { padding-top: 1em; }
.container { max-width: 900px; }

/* -----------------------------------------------------------
   PYRAMIDIA 完全強制デザイン適用パッチ
----------------------------------------------------------- */

/* 1. サイト全体の背景を「漆黒」に強制固定 */
body, html {
    background-color: #050505 !important;
    background-image: none !important; /* 水玉などの画像を消去 */
    color: #f0f0f0 !important;
    font-family: "Shippori Mincho", "Yu Mincho", "Zen Old Mincho", serif !important;
    font-size: 16px !important;
    line-height: 2.2 !important;
    letter-spacing: 0.1em !important;
}

/* 2. あらゆる要素の背景を透明化 (黒背景を透けさせる) */
#wrapper, #page-wrapper, .container, .header, .footer, .main, .contents,
div, section, article, header, footer, main, aside,
table, tr, th, td, ul, li, dl, dt, dd,
p, span, label, h1, h2, h3, h4, h5, h6 {
    background-color: transparent !important;
    background-image: none !important;
    border-color: #444 !important;
    box-shadow: none !important;
}

/* 3. 店名・見出しを「ゴールド＆大文字」に */
.shop-name, h1, h2, .ttl-h2, .head {
    text-transform: uppercase !important;
    color: #d4af37 !important;
}

/* 4. リンク文字を「ゴールド」に */
a {
    color: #d4af37 !important;
    text-decoration: none !important;
}
a:hover {
    color: #fff !important;
    text-shadow: 0 0 8px #d4af37;
}

/* 5. 価格表示を「特大ゴールド」に */
.price, .sales-price, .regular-price, .prd-lst-price {
    font-size: 22px !important;
    color: #ffd700 !important;
    font-family: "Times New Roman", serif !important;
    font-weight: bold !important;
}

/* 6. 入力フォームは見やすく「黒背景・白文字」 */
input[type="text"], input[type="number"], input[type="email"], textarea, select {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #d4af37 !important;
    border-radius: 4px;
    padding: 10px !important;
}

/* 7. ボタン類は「ゴールドグラデーション」 */
input[type="submit"], button, .btn, .btn-viewcart {
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: 1px solid #ffd700 !important;
}

/* 8. テキストの視認性確保 (強制白文字) */
p, li, td, th, dd, dt, div {
    color: #f0f0f0 !important;
}

/* 9. スマホメニューなどのアイコン色 */
.icon-menu, .nav-icon, svg {
    fill: #d4af37 !important;
}
/* =========================================
   スマートフォン表示不具合修正用 汎用CSSパッチ
   作成日時: 2025-12-10
   ※これをCSSファイルの末尾、またはCMSの
   「カスタムCSS」入力欄などに貼り付けてください。
========================================= */

/* 画面幅が768px以下（一般的なスマホ・タブレット縦）の場合にのみ適用 */
@media screen and (max-width: 768px) {

  /* --- 1. 全体のリセットと基本設定 --- */

  /* 画面全体が横幅からはみ出して横スクロールが発生するのを防ぐ */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 全ての要素で、余白(padding)と枠線(border)を幅の計算に含める */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* スマホでの基本文字サイズと行間を読みやすく調整 */
  body {
    font-size: 16px !important; /* 文字サイズを少し大きめに */
    line-height: 1.7 !important; /* 行間を適度に空ける */
    -webkit-text-size-adjust: 100%; /* スマホの自動文字サイズ調整を無効化 */
  }


  /* --- 2. コンテンツのはみ出し防止 --- */

  /* 画像が画面幅を超えないように縮小し、縦横比を維持する */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block; /* 画像の下に不要な隙間ができるのを防ぐ */
    margin: 10px auto; /* 上下に少し余白を入れ、中央寄せ */
  }

  /* YouTube、Google Mapなどの埋め込みコンテンツのはみ出し防止 */
  iframe, video, embed, object {
    max-width: 100% !important;
  }

  /* テーブルが画面からはみ出す場合、テーブル自体を横スクロール可能にする */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* スクロールを滑らかに */
  }


  /* --- 3. テキストの表示とレイアウト調整 --- */

  /* 長い英単語やURLが画面からはみ出さないように強制的に折り返す */
  p, li, h1, h2, h3, h4, h5, h6, div, span, a {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important; /* 古いブラウザ向け */
    hyphens: auto; /* 可能な場合はハイフンで繋ぐ */
  }

  /* 段落の下に適度な余白を空ける */
  p {
    margin-top: 0 !important;
    margin-bottom: 1.5em !important;
  }

  /* リストの表示を調整 */
  ul, ol {
    padding-left: 1.5em !important; /* 左側のインデントを確保 */
    margin-bottom: 1.5em !important;
  }
  li {
    margin-bottom: 0.5em !important; /* リスト項目間の余白 */
  }


  /* --- 4. ページのメイン枠（コンテナ）の調整（推測適用） --- */

  /* ページの主要な枠組みに対して、画面端との間に左右の余白（15px）を設ける。
     これにより、テキストが画面の端に張り付くのを防ぎます。
     ※サイトの構造によっては適用されない場合があります。 */
  
  /* 一般的なメインエリアのIDやクラス名に対して適用 */
  #container, #wrapper, #content, #main, .container, .wrapper, .content, .main, article, main, section {
    width: auto !important; /* 固定幅を解除 */
    max-width: 100% !important;
    padding-left: 15px !important; /* 左余白 */
    padding-right: 15px !important; /* 右余白 */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* PC用の左右配置（フロート）を解除 */
  }

  /* もしサイドバーがある場合、メインコンテンツの下に落ちるように幅を100%にする */
  #sidebar, #side, .sidebar, .side, aside {
    width: 100% !important;
    float: none !important;
    padding: 20px 15px !important;
    margin-top: 30px !important; /* メインコンテンツとの間隔 */
  }
}