/* ===== DMC CLASSIC モバイル対応 ===== */

@media screen and (max-width: 960px) {

  body { overflow-x: hidden !important; }

  /* 装飾帯（920px固定画像）非表示 */
  .contants-wrapper-top,
  .contants-wrapper-bottom { display: none !important; }

  /* ラッパー全体 */
  #wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ヘッダー */
  #head {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
  }
  .logo {
    width: 160px !important;
    height: 32px !important;
    margin: 8px 0 0 0 !important;
    background-size: 160px auto !important;
  }
  .logo a { width: 160px !important; height: 32px !important; }

  /* h-navi モバイル：DMCカラーボタン */
  .h-navi {
    float: right !important;
    width: auto !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  .h-navi ul {
    display: flex !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .h-navi li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .h-navi li a {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 6px 10px !important;
    background: linear-gradient(to bottom, #c84a4a, #a22f2f) !important;
    border: 1px solid #8a2020 !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    position: static !important;
  }
  .h-navi li a::before {
    display: none !important;
  }
  .h-navi li a:active {
    background: #7a1f1f !important;
    box-shadow: none !important;
  }

  /* コンテンツ */
  #contents {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* グローバルナビ モバイル：PCと同デザイン・2行グリッド */
  .global-navi {
    width: 100% !important;
    max-width: 100% !important;
    background: #111 !important;
    border-top: 2px solid #a22f2f !important;
    padding: 0 !important;
    overflow: visible !important;
    margin: 6px 0 0 !important;
  }
  .global-navi ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .global-navi ul li,
  .global-navi li#gnavi001,
  .global-navi li#gnavi002,
  .global-navi li#gnavi003,
  .global-navi li#gnavi004,
  .global-navi li#gnavi005 {
    flex: 1 1 33% !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    text-indent: 0 !important;
    margin: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    border-right: 1px solid #2a2a2a !important;
    border-bottom: 1px solid #2a2a2a !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .global-navi ul li a,
  .global-navi li#gnavi001 a,
  .global-navi li#gnavi002 a,
  .global-navi li#gnavi003 a,
  .global-navi li#gnavi004 a,
  .global-navi li#gnavi005 a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;
    text-indent: 0 !important;
    color: #bbb !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 11px 4px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border-bottom: 2px solid transparent !important;
  }
  .global-navi ul li:active a,
  .global-navi li#gnavi001:active a,
  .global-navi li#gnavi002:active a,
  .global-navi li#gnavi003:active a,
  .global-navi li#gnavi004:active a,
  .global-navi li#gnavi005:active a {
    background: #a22f2f !important;
    color: #fff !important;
  }
  .global-navi .lineup { display: none !important; }

  /* メインコンテンツ */
  #main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* 全画像・iframe */
  img { max-width: 100% !important; height: auto !important; }
  iframe { max-width: 100% !important; }

  /* テーブル */
  .table-gray,
  .table-gray td { width: auto !important; max-width: 100% !important; }

  /* 各ページ固有の幅指定 */
  .spec-list,
  .spec-list2,
  .detail-navi-black,
  .result-wrap,
  .outline-wrap,
  .history-wrap { width: 100% !important; max-width: 100% !important; }

  /* フッター */
  #footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
  }
  #footer address {
    font-size: 11px !important;
    line-height: 1.7 !important;
    color: #fff !important;
  }
  #footer .copyright {
    font-size: 10px !important;
  }

  /* TOPページ：ニュース・トピックス縦積み */
  .top-hero-wrap { margin: 0 0 10px !important; }
  .top-hero-wrap img { width: 100% !important; height: auto !important; display: block !important; }
  .index-news-left {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 10px !important;
    box-sizing: border-box !important;
  }
  .index-bn-right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .index-bn-right img { max-width: 100% !important; height: auto !important; }
  .dmc-news-panel,
  .dmc-topics-panel { width: 100% !important; box-sizing: border-box !important; }

  /* エントリーページ手順カード */
  .dl-guide-card { flex-direction: column !important; }
  .guide-photo { width: 100% !important; flex: none !important; }
  .guide-photo img { width: 100% !important; }
  .store-links { flex-direction: column !important; align-items: center !important; }

  /* ロゴ（h1.logo）はモバイルでも背景画像を維持 */
  h1.logo {
    width: 160px !important;
    height: 32px !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    background: url(../images/logo.gif) no-repeat left top !important;
    background-size: 160px auto !important;
    border-left: none !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
  }

  /* 見出し：PCと完全同一デザインを強制（ロゴ以外） */
  h1:not(.logo) {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 8px 0 8px 14px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #222 !important;
    background: #f7f7f7 !important;
    border-left: 4px solid #a22f2f !important;
    letter-spacing: 1px !important;
    height: auto !important;
  }
  h2 {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 10px !important;
    padding: 7px 0 7px 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #333 !important;
    background: none !important;
    border-left: 3px solid #a22f2f !important;
    letter-spacing: 0.5px !important;
    background-image: none !important;
  }
  h3 {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 12px 0 8px !important;
    padding: 4px 0 4px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #555 !important;
    background: none !important;
    border-left: 2px solid #ccc !important;
    background-image: none !important;
  }
}

/* ===== 小さい画面（iPhone SE等 375px以下）対応 ===== */
@media screen and (max-width: 375px) {
  .logo {
    width: 130px !important;
    height: 26px !important;
    background-size: 130px auto !important;
  }
  .logo a { width: 130px !important; height: 26px !important; }
  h1.logo {
    width: 130px !important;
    height: 26px !important;
    background-size: 130px auto !important;
  }
  .h-navi ul { gap: 3px !important; }
  .h-navi li a {
    font-size: 9px !important;
    padding: 5px 7px !important;
  }
}