/* 4. フッターナビゲーションのデザイン */
        #el_footer_nav2 {
            padding: 80px 0 40px;
            background: #ffffff;
            border-top: 1px solid #f0f0f0;
        }
.elf_btn_list2 {
          list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .elf_btn_item2 {
            flex: 0 1 220px;
            width: 220px;
        }

        .elf_btn_link2 {
            display: block;
            padding: 18px 10px;
            border: none;
            background: #f9f7f2;
            color: #8e744a;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.2em;
            text-align: center;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .elf_btn_link2:hover {
            background: #8e744a;
            color: #ffffff;
        }

@media screen and (max-width: 767px) {
  /* 1. 外側のブロックを画面いっぱいに広げる */
  #el_footer_nav2 {
    width: 100% !important;
    padding: 0 !important;
    margin: 40px 0 !important;
    display: block !important;
  }

  /* 2. リスト全体：オレンジ色の余白を消して中央へ */
  ul.elf_btn_list2 {
    display: block !important;
    width: 85% !important;      /* 画面幅の85%にする */
    max-width: 300px !important; /* 広がりすぎないように制限 */
    /* ↓↓ これが「オレンジ色の余白」を左右均等にして中央に寄せる魔法です ↓↓ */
    margin: 0 auto !important;   
    padding: 0 !important;       /* 内側の余計な隙間をリセット */
    list-style: none !important;
  }

  /* 3. 各ボタンの項目 */
  li.elf_btn_item2 {
    width: 100% !important;
    margin: 0 0 10px 0 !important; /* ボタン同士の上下の間隔 */
    padding: 0 !important;
  }

  /* 4. ボタンの中のリンク（見た目の調整） */
  a.elf_btn_link2 {
    display: block !important;
    width: 100% !important;
    text-align: center !important; /* 文字を真ん中に */
    padding: 15px 0 !important;    /* 押しやすい高さ */
    background: #fbfaf8 !important; /* エリッツらしい薄いベージュ */
    color: #8e744a !important;      /* 上品な茶色 */
    text-decoration: none !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    border: 1px solid #f0eee8 !important; /* 軽い枠線 */
  }
}




/* PC専用：ページ全体の余白調整 */
@media screen and (min-width: 768px) {
  
  /* 1. ページ全体を中央に寄せ、両サイドにゆとりを持たせる */
  #container, 
  .recommend-items, 
  .new_item-items, 
  .contents {
    max-width: 1000px; /* 1200pxから1000pxに絞ることで余白を強調 */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  /* 2. セクションごとの上下余白を拡大（80px〜120px程度） */
  .recommend-items, 
  .new_item-items {
    margin-top: 100px !important;
    margin-bottom: 150px !important; /* 次のセクションまでの間隔 */
  }



  /* 4. タイトル周りの余白（RECOMMENDED / NEW ARRIVALS） */
  .ttl-h2 {
    margin-bottom: 80px !important; /* タイトルと商品の間をゆったりと */
  }

  /* 5. 商品グリッドの間隔をさらに広げる */
  .el-product-grid {
    gap: 100px 50px !important; /* 上下100px、左右50px */
  }
}



/* 商品の並べ方を洗練させるスタイル */
  .el-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PCで4列 */
    gap: 60px 30px;
    list-style: none;
    padding: 0;
    margin: 40px 0;
  }
  .el-product-item { text-align: center; }
  .el-image-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4; /* 縦長に固定 */
    background-color: #f9f9f9;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .el-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .el-name {
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #333;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 1行で省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .el-price { font-size: 11px; color: #8e744a; letter-spacing: 0.1em; }
  .el-soldout { font-size: 10px; color: #999; letter-spacing: 0.1em; }

  @media screen and (max-width: 767px) {
    .el-product-grid {
      grid-template-columns: repeat(2, 1fr); /* スマホで2列 */
      gap: 30px 15px;
    }
  }



@media (min-width: 481px){
  #slide-show_smartphone{
    display:none;
  }
}

@media (max-width: 480px) {
    .slider{
    display: none;
  }
  .top_smartphone {
    max-width: 100%; 
    margin: 10px auto; 
    padding-top: 5px;
    border: 0.5px solid #c9c9c9;
  }