.mar5{margin:0px 0 5px 0;}
.mar10{margin:0px 0 10px 0;}
.mar10tb{margin:10px;}

body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 85%; /* Safari */
}



/******************************/
/* TOP用*★横スクロール★/
/******************************/
.scroll_content { /* リスト全体のスタイル */
  display: flex;
  max-width: 800px;
  margin: auto;
  overflow-x: auto;
}
 
.scroll_content li { /* 各リストのスタイル */
  width: 100%;
  padding: 8px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
}
 
.scroll_content img { /* 画像のスタイル */
  width: 33%;
  height: 33%;
  object-fit: cover;
}
 
.scroll_content::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}
 
.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}
 
.scroll_content::-webkit-scrollbar-track {
  background: #ddd; /* トラックの色 */
  border-radius: 6px; /* トラック両端の丸み */
}
 
 
@media screen and (min-width: 450px) {
 
  .scroll_content li {
    width: 45%;
  }
 
}




/******************************/
/* 2並び商品(@_@)TOP用*★スマホだと縦並び★/
/******************************/
@media screen and (min-width:300px) {
.item2_t {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:auto;
    margin-bottom:0px;
    margin-top:0px;
}
.item_contents2_t {
   flex-basis: calc(100% - 8px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
  border:2px solid #e7e6e6;
}
}
@media screen and (min-width:1024px){ 
  .item2_t {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:100%;
    margin-bottom:7px;
    margin-top:7px;
}
.item_contents2_t {
   flex-basis: calc(100%/2 - 8px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
  border:1px solid #e7e6e6;
}
}






/******************************/
/* 3並び商品(@_@)TOP用*/
/******************************/
@media screen and (min-width:300px) {
.item3_t {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:auto;
    margin-bottom:7px;
    margin-top:7px;
}
.item_contents3_t {
   flex-basis: calc(100%/3 - 8px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
  border:1px solid #e7e6e6;
}
}
@media screen and (min-width:1024px){ 
  .item3_t {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:710px;
    margin-bottom:7px;
    margin-top:7px;
}
.item_contents3_t {
   flex-basis: calc(100%/3 - 8px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
  border:1px solid #e7e6e6;
}
}
/******************************/
/* 3並び商品(@_@) */
/******************************/
@media screen and (min-width:300px) {
.item3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:auto;
    margin-bottom:7px;
    margin-top:7px;
}
.item_contents3 {
padding-top:5px;
   flex-basis: calc(100%/3 - 4px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
}
}
@media screen and (min-width:1024px){ 
  .item3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:710px;
    margin-bottom:7px;
    margin-top:7px;
}
.item_contents3 {
padding-top:5px;
   flex-basis: calc(100%/3 - 4px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
}
}
/******************************/
/* 4並び商品(@_@) */
/******************************/
@media screen and (min-width:300px) {
.item4 {
 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:auto;
    margin-bottom:7px;
    margin-top:7px;
}
  .item5{
    display:block;
    height:auto;
    margin-left: auto; 
    margin-right: auto;
    margin-bottom:7px;
    margin-top:7px;
    text-align: center;
    width:90%;
  }
.item_contents4 {
  padding-top:5px;
   flex-basis: calc(25% - 4px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
}

.item_contents5 {
  flex-basis: calc(20% - 4px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;}
}
@media screen and (min-width:1024px){ 
  .item4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:710px;
   margin-bottom:7px;
   margin-top:7px;
}

 .item5{
    display:block;
    height:auto;
    margin-left: auto; 
    margin-right: auto;
    margin-bottom:7px;
    margin-top:7px;
    text-align: center;
    width:90%;
  }

.item_contents4 {  
  padding-top:5px;
   flex-basis: calc(25% - 4px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
}
.item_contents5 {
   flex-basis: calc(20% - 4px);
   text-align: center;
     margin-right: 2px;
  margin-left:2px;
}  
}
@media screen and (min-width:300px) {
.item6 {
  background-color:#c6edfc;
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:auto;
    margin-top:12px;
}
  .item_contents6 {
      margin-top:-1px;
   flex-basis: calc(100%/3 - 20px);
   text-align: center;
     margin-right: 10px;
  margin-left:10px;
    margin-bottom:15px;}
}
  @media screen and (min-width:1024px){ 
  .item6 {
    background-color:#c6edfc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:710px;
    margin-top:12px;
}
.item_contents6 {
  margin-top:-1px;
   flex-basis: calc(100%/3 - 20px);
   text-align: center;
     margin-right: 10px;
  margin-left:10px;
  margin-bottom:15px;}
}


/******************************/
/* 4並び商品(@_@)TOP用 */
/******************************/
@media screen and (min-width:300px) {
.item4_t {
 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   width:auto;
    margin-bottom:7px;
    margin-top:7px;
}
 
.item_contents4_t {
   flex-basis: calc(25% - 8px);
   text-align: left;
     margin-right: 2px;
  margin-left:2px;
  border:1px solid #e7e6e6;
}


@media screen and (min-width:1024px){ 
  .item4_t {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   width:710px;
   margin-bottom:7px;
   margin-top:7px;
}

.item_contents4_t {  
   flex-basis: calc(25% - 8px));
   text-align: left;
     margin-right: 2px;
  margin-left:2px;
  border:1px solid #e7e6e6;
  }}

.new1{
  position: relative;
}
.new2{
  position: absolute;top:0px;left:0px;
    background:red;padding:5px;
   color:#fff;font-weight:bold;font-size:1.1em;
}
  
  
 /******************************/
/* 動画用 */
/******************************/ 
.hoge { text-align: center; }  
  
.iframe-css {
  position: relative;
  width: 100%;
  padding-top:56.25%;
}

.iframe-css iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  
 
 /******************************/
/* ゾゾタウン風ランキング */
/******************************/   
/* ランキングコンテナの基本設定 */
.rankingSwiper {
    width: 90%; /* 幅を調整 */
    height: auto;
    margin: 30px auto;
    padding-bottom: 30px; /* ナビゲーションスペース確保のため */
}

/* 各ランキングアイテムのスタイル */
.ranking-item {
    text-align: center;
    position: relative; /* 順位バッジの基準 */
}

.ranking-item img {
    width: 100%;
    height: auto;
}

/* 順位バッジのスタイル（ゾゾタウン風） */
.rank-number {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #333;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 2px 8px;
    z-index: 10;
}  
  
/* ランキングアイテム全体の背景色を設定 */
.ranking-item {
    /* 背景色を白に設定（例: #ffffff, white, または好きな色） */
    background-color: #f4f4f4; 
    
    /* 必要に応じてパディング（内側の余白）を追加 */
    padding: 10px; 
    
    /* 要素間の区切りをわかりやすくするための影（任意） */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    
    /* 順位バッジの基準として設定済み */
    position: relative; 
    
    /* 画像やテキストを中央揃えにするための設定 */
    text-align: center; 
}  

/* 🔴 1位アイテム特有のスタイルをリセット（原因調査のため） */
/* もし1位だけに特別なCSSを適用していたら、line-heightやfont-weightを統一します */
.ranking-item:first-child .item-name {
    /* フォントサイズ、行の高さを標準に戻す */
    /* 例: font-size: 1rem; line-height: 1.5; */
}


/* 🔴 2. 商品名・価格を含むリンク全体をFlexboxにし、縦方向に揃える */
.ranking-item a {
    /* aタグをブロック要素にする（flexboxを適用するため） */
    display: flex;
    /* 要素を縦方向に並べる */
    flex-direction: column;
    /* 縦方向の要素を上詰めに揃える（商品画像の下から情報が始まるように） */
    /* または stretch にして高さを揃えます */
    align-items: center;
    /* ランキングアイテム全体に広げる */
    width: 100%; 
    height: 100%;
}

/* 🔴 3. 商品名と価格の余白を統一 */
.ranking-item .item-name,
.ranking-item .item-price {
    /* 上下の余白をリセットまたは統一 */
    margin: 3px 0; 
    padding: 0;
    /* 必要に応じて、フォントサイズや行の高さをここで統一します */
    /* line-height: 1.2; */
}  
  
/* 1. ボタンの基本スタイル設定 */
.swiper-button-prev,
.swiper-button-next {
    /* サイズと形状 */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 正円にする */
    
    /* 背景と色 */
    background-color: #333; /* ボタンの基本色（濃いグレー） */
    color: white; /* 矢印の色 */
    
    /* 立体感を出すための影 */
    /* x, y, ぼかし, スプレッド, 色 */
    box-shadow: 0 5px 0 0 #1a1a1a; /* 下方向に濃い影 */
    
    /* 矢印を中央に配置するための調整 */
    /* Swiperのデフォルトスタイルを上書きする必要があるため、!importantを付ける場合があります */
    top: 50% !important; 
    margin-top: -20px !important; 
    
    /* アニメーションを滑らかにする */
    transition: all 0.15s ease;
}

/* 2. マウスオーバー（ホバー）時のスタイル設定 */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: #555; /* ホバーで少し明るく */
    transform: translateY(1px); /* ボタンを1px下に移動 */
    box-shadow: 0 4px 0 0 #1a1a1a; /* 影を1px減らして、沈んだように見せる */
    cursor: pointer;
}

/* 3. クリック時（アクティブ）のスタイル設定 */
.swiper-button-prev:active,
.swiper-button-next:active {
    transform: translateY(5px); /* さらに下に移動させて完全に沈ませる */
    box-shadow: none; /* 影をなくす（完全に押された状態） */
}

/* 4. 矢印アイコンの調整（任意） */
/* 矢印のフォントサイズや太さを調整したい場合に使用 */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 16px !important;
    font-weight: bold;
}  
  
/* 1. ボタンの基本スタイル設定 */
.swiper-button-prev,
.swiper-button-next {
    /* ... その他のスタイル ... */
    
    background-color: #333; /* ボタンの背景色（濃いグレー） */
    
    /* 🔴 矢印アイコンの色を白に設定 */
    color: white; 
    
    /* ... その他のスタイル ... */
    box-shadow: 0 5px 0 0 #1a1a1a; 
    transition: all 0.15s ease;
}

/* 2. 矢印アイコンの調整（任意：矢印のフォントサイズや太さを調整したい場合） */
.swiper-button-prev::after,
.swiper-button-next::after {
    /* 矢印は疑似要素として文字コードで表示されているため、colorが適用されます */
    font-size: 16px !important;
    font-weight: bold;
    color: white; /* 念のためここにも白を指定してもOKですが、親要素のcolorが優先されます */
}