/*.topsection {
   color: #000;
}*/

.table{
   text-align: center;
}

.li { margin-bottom: 1.5rem
}


 .LINE  img{
   display: block;
   margin: 0 auto;
}

.line-it-button {
     margin: 0 auto;
}

.line2 {
   display: none;
   margin: 0 auto;
}
  
.under {
  border-bottom: dotted 2px #000000;
}
.a{color:black;
}

.fb_iframe_widget {
    width: 100%;
}

.fb-page {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

.twitter-timeline {
  max-width: 90%;
  margin: 0 auto;
}

.SNS {
  width: 100%;
  max-width: 500px;
 margin: 0 auto;
}


.xslider {
  display:  none;

}

.twrsection-inner ul {
      padding-inline-start: 20px;
}

.twrsection-inner a {
      color: #212121;
}

.horizontal-scroll {
  display: flex; /* 横並びにする */
  flex-wrap: nowrap; /* 折り返さない */
  overflow-x: auto; /* 横スクロールを有効にする */
  padding-bottom: 15px; /* スクロールバーが見やすいように下部に余白を追加 */
  margin-bottom: 20px; /* 下の要素との間隔 */
}

.horizontal-scroll .box {
  width: auto; /* 各ボックスの幅をコンテンツに合わせて自動調整 */
  margin-right: 20px; /* ボックス間の右側の余白 */
  flex-shrink: 0; /* ボックスが縮小しないように */
}

.horizontal-scroll .box:last-child {
  margin-right: 0; /* 最後のボックスの右側の余白をなくす */
}

/* 必要に応じて、box--full のスタイルを調整 */
.horizontal-scroll .box--full {
  width: auto; /* 横スクロール時は auto にすることが多い */
}

/* その他の既存のスタイル (.box-inner, .box-image など) はそのまま */

.box-title {
  font-weight: bold;
  margin-bottom: 5px;
  word-break: break-word; /* 長い単語も途中で改行 */
  font-size: 1em; /* おすすめ商品のフォントサイズに合わせてください (例) */
  line-height: 1.4; /* 行の高さ (必要に応じて調整) */
}

.box-image {
  text-align: center;
  margin-bottom: 10px;
  /* 必要に応じてbox-imageの幅が固定されているか、最大幅があるかを確認 */
}

.box-image img {
  max-width: 120%;
  height: auto;
  /* 必要に応じて画像の幅が固定されているか、最大幅があるかを確認 */
}

.horizontal-scroll .box .box-inner {
  display: flex; /* 内部要素を横並びにする */
  flex-direction: column; /* 画像、タイトル、価格などを縦に並べる */
  align-items: center; /* 中央揃え（必要に応じて） */
  text-align: center; /* テキスト中央揃え（必要に応じて） */
}

.horizontal-scroll .box .box-title {
  /* box-imageの幅に合わせてmax-widthを設定 */
  max-width: 100%; /* デフォルトで親要素の幅いっぱい */
}

/* box-imageの幅が固定されている場合（例: 100px） */
.horizontal-scroll .box .box-image {
  width: 100px; /* 画像コンテナの固定幅 */
  margin-left: auto;
  margin-right: auto;
}

.horizontal-scroll .box .box-title {
  max-width: 100px; /* 画像コンテナの幅に合わせる */
}

/* レスポンシブ対応で画像幅が変わる場合は、メディアクエリで調整が必要 */
@media screen and (min-width: 768px) {
  /* 例: 画面幅が768px以上の場合の調整 */
  .horizontal-scroll .box .box-image {
    width: 120px;
  }
  .horizontal-scroll .box .box-title {
    max-width: 120px;
  }
}

/* スライドショーコンテナ */
.slideshow-container {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  height: auto; /* 高さを自動に設定 */
  margin-bottom: 10px; /* ドットとの間隔を調整 */
  width: 100%;
}

.mySlides {
  position: relative; /* ここを'relative'に変更 */
  display: none; /* 初期状態では非表示 */
  width: 100%;
}

.mySlides.active {
  display: block; /* activeクラスが付いたら表示 */
  opacity: 1; /* フェード効果のため、常に1 */
}

.mySlides img {
  width: 100%;
  height: auto; /* 画像の縦横比を維持 */
}

.dot-container {
    text-align: center;
}

/* ドットナビゲーション */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
    background-color: #717171;
}

 /* ホバー効果を適用するためのCSS */
    .image-container {
        flex: 0 0 calc(25% - 15px); /* 横4列のレイアウトを維持 */
        max-width: 250px; /* 最大幅を設定 */
        width: 100%; /* 親要素の幅に合わせる */
        position: relative; /* z-indexのために必要 */
        overflow: hidden; /* 拡大した画像がはみ出さないように */
        transition: transform 0.3s ease, z-index 0.3s ease; /* スムーズなアニメーション */
    }

    .image-container img {
        width: 100%; /* 画像の幅を親要素に合わせる */
        height: auto; /* 高さを自動調整 */
        display: block; /* 画像下の余白をなくす */
        transition: transform 0.3s ease; /* スムーズなアニメーション */
    }