@charset "utf-8";
/* CSS Document */

/*----------------------------------
    全体要素
----------------------------------*/
.header_area {
    padding-top: 0;
    width: 750px;
}
.milanlib_contents {
    margin-bottom: 20px;
}

@media(max-width:580px){
div#mp_ta_header {
    padding: 20px !important;
}    
}


.milanlib_tx01{
    text-align: center;
    font-size: 12px;
    line-height: 2em;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
	color: #000;
	width: 85%;
	margin: 0 auto;
}

.milanlib_tx02{
    text-align: center;
    font-size: 30px;
	font-family: "Arial Nova", Arial, sans-serif;
	font-weight: 700;
	transform   : scale(1, 0.8);   /* 変形 横,縦 */
    line-height: 1.2;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
	color: #000;
}
@font-face {
  font-family: "Arial Nova";
  src: url("fonts/ArialNova-Bold.woff2") format("woff2");
  font-weight: 700;
}

.milanlib_tx03{
    text-align: left;
    font-size: 11px;
    line-height: 2em;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
	color: #000;
}


.milanlib_img01{
	display: flex;
	margin: 0 auto;
	align-items: center;
}
.milanlib_img01 img{
	width: 50%;
}

.milanlib-container {
    display: flex;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    align-items: flex-start;
}

/* 左カラム: メイン画像 */
.milanlib_limage {
    width: 50%;
}
.milanlib_limage img {
    width: 100%;
    display: block;
}

/* 右カラム: 商品一覧 */
.milanlib-list {
	width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.milanlib-item {
    display: flex;
    gap: 10px;
}

.milanlib-item img {
    width: 100%; /* 小さい画像サイズ */
    height: auto;
	display: block;
}

.milanlib-item a {
	display: block;
	width: 30%;
	flex-shrink: 0;
}

/*----------------------------------
    4カラム表示（横に4つ並べる）用の追加スタイル
----------------------------------*/
.milanlib_4column {
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 均等な間隔で配置する */
    gap: 10px; /* アイテム間の隙間 */
    width: 100%;
    margin: 0 auto;
}

.milanlib_4item {
    width: calc(25% - 7.5px); /* gap: 10pxが3箇所あるので、これを考慮した幅 */
    text-align: center; /* 画像とテキストを中央揃えにする */
}

/*----------------------------------
    【NEW】2カラム表示（横に2つ並べる）用の追加スタイル
----------------------------------*/
.milanlib_2column {
    display: flex;
    flex-wrap: wrap; /* 2列表示にするために折り返しを許可 */
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
}

.milanlib_2column .milanlib_4item {
    /* PCの2列表示 */
    width: calc(50% - 5px); /* gap: 10pxが1箇所あるので、これを考慮した幅 */
    text-align: center;
}

/* ★★★ 画像サイズを4列表示の幅に制限して中央に配置 ★★★ */
.milanlib_2column .milanlib_4item img {
    /* 4列表示の幅に合わせて最大幅を制限（約23%） */
    max-width: 200px; /* 例として最大幅を設定 */
    width: 90%; /* 元のCSSの100%は継承させない */
    height: auto;
    display: block; 
    /* 画像をmilanlib_4itemの中で中央に寄せる */
    margin: 0 auto;
}

/* テキスト（milanlib_tx03）を画像幅に合わせて制限し中央に配置 ★★★ */
.milanlib_2column .milanlib_tx03 {
    /* 画像のmax-widthと同じか、それに近い最大幅を設定 */
    max-width: 200px; 
    /* ブロック要素として中央揃え */
    margin: 5px auto 0; /* 上に少しマージンを追加 */
    /* テキストはすでに.milanlib_4itemで中央揃えされているため、text-align: centerは不要 */
}

/* 4列表示のときの画像や、その他の共通の画像スタイル */
.milanlib_4item img:not(.milanlib_2column .milanlib_4item img) {
    width: 100%; /* 親要素（アイテム）の幅いっぱいに表示 */
    height: auto;
    display: block;
}


  /* スマホ対応 */
  @media (max-width: 768px) {
    .milanlib-container {
      flex-direction: column;
	  width: 100%;
    }
	.milanlib_limage {
      width: 100%;
    }

    .milanlib-list {
      gap: 10px;
	  width: 100%;
    }

    .milanlib-item {
      gap: 5px;
    }

    .milanlib-item img {
      width: 100%;
    }
  }
/*----------------------------------
    スマホ対応: 画面幅が狭い場合は2列にする (580px以下)
    ※スマホでは画像・テキスト幅をアイテム幅いっぱいに戻す
----------------------------------*/
@media (max-width: 580px) {
    .milanlib_4column,
    .milanlib_2column {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 10px;
    }

    .milanlib_4column .milanlib_4item,
    .milanlib_2column .milanlib_4item {
        width: 48%;
    }

    /* スマホでは画像サイズをアイテム幅いっぱいに戻す */
    .milanlib_4item img {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }

    /* 【NEW】スマホではテキスト幅の制限を解除 */
    .milanlib_tx03 {
        max-width: none;
        margin: 5px 0 0;
    }
}
/*----------------------------------
    スマホ要素
----------------------------------*/

  #milanlib_bd {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin-inline: auto;
	max-width: 500px;
	position: relative;
  }

  .swiper {
    width: 90%;
	max-width: 500px;
  }

  .swiper-slide img {
    width: 100%;
    display: block;
    border-radius: 10px;
  }

  /* ナビゲーションボタン位置調整 */
  .swiper-button-next{
	right: 30px;
	color: #000000 !important;
	}
  .swiper-button-prev {
	left: 30px;
    color: #000000 !important;
  }

  /* ページネーションの位置 */
  .swiper-pagination {
    bottom: 10px;
  }
/* 通常の丸 */
  .swiper-pagination-bullet {
	background: #000000 !important;  /* 黒にする */
	opacity: 0.3;      /* 半透明 */
  }

/* 選択中の丸 */
  .swiper-pagination-bullet-active {
	background: #000000 !important;  /* 黒にする */
	opacity: 0.7;
  }

.milanlib_tx04{
    text-align: center;
    font-size: 12px;
	font-weight: bold;
    line-height: 2.2;
    padding-bottom: 5px;
	color: #000000;
	width: 90%;
	margin: 0 auto;
}
.milanlib_tx04-{
    text-align: center;
    font-size: 12px;
	font-weight: bold;
    line-height: 2.2;
    padding-bottom: 5px;
	color: #000000;
	width: 90%;
	margin: 0 auto;
	letter-spacing: -0.2em; /* ★ -0.05emで文字間を詰める */
}