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

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

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

.lp_comment{
	width: 85%;
	margin: 0 auto;
	margin-bottom: 20px;
}

.lp_comment h3{
	text-align: center;
    font-size: 24px;
	font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
	color: #000;
}

.cashmere_tx01{
    text-align: center;
    font-size: 18px;
	font-weight: 600;
    line-height: 2em;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
	color: #000;
}

.cashmere_tx02{
    text-align: center;
    font-size: 34px;
	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;
}

.cashmere_image {
    width: 100%;
}

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

.cashmere_img01{
	display: flex;
	margin: 0 auto;
	align-items: center;
}

.cashmere_img01 img{
	width: 50%;
}

.cashmere-img02{
	width: 30%;
	padding: 20px 0 0 60px;
}

.cashmere_tx03{
	text-align: left;
    font-size: 11px;
    line-height: 2em;
    letter-spacing: 0.1em;
	color: #000;
    flex-grow: 1 !important;
}

.cashmere_tx04{
	text-align: center;
    font-size: 11px;
    line-height: 2em;
    letter-spacing: 0.1em;
	color: #000;
    flex-grow: 1 !important;
}

.cashmere-item {
    display: flex;
	flex-direction: row !important;
    gap: 10px;
	align-items: center;
	width: 90%; 
    margin: 0 auto;
}

.cashmere-item a {
    width: 10% !important;
	min-width: 50px;
	flex-shrink: 0;
}

.cashmere-item a img {
    width: 100%;
    height: auto;
    display: block;
}

.cashmere-list {
	width: 100%;
    display: flex;
    gap: 20px;
    flex: 1;
	margin: 0 auto;
}

.cashmere_tx06{
    text-align: center;
    font-size: 1.1rem;
	font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    padding-bottom: 5px;
	color: #000;
	margin: 70px auto 50px;
	text-decoration: none;
}
.cashmere_tx06 a:hover {
	text-decoration: underline;
}

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

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

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

  /* スマホ対応 */
  @media (max-width: 768px) {
    .cashmere-container {
      flex-direction: column;
	  width: 100%;
    }
	  .cashmere_limage {
      width: 100%;
    }
	  .cashmere-list {
      gap: 10px;
	  width: 100%;
    }
	  .cashmere-item {
      gap: 5px;
      width: 48%;
    }
	  .cashmere-item img {
      width: 100%;
    }
	  .cashmere_tx03{
      text-align: left;
      font-size: 11px;
      line-height: 2em;
      letter-spacing: 0.1em;
      padding-bottom: 5px;
      color: #000;
      width: 48%;
	  }
	.lp_comment{
      width: 100%;
      margin: 0 auto;
      margin-bottom: 20px;
	  }
	.lp_comment h3{
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5em;
      letter-spacing: 0.1em;
      padding-bottom: 5px;
      color: #000;
	  }
      .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;
      }
	  .cashmere_tx04-{
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      line-height: 2.2;
      padding-bottom: 5px;
      color: #000000;
      width: 95%;
      margin: 0 auto;
      letter-spacing: -0.04em; /* ★ -0.05emで文字間を詰める */
	  }

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

    .cashmere_2column .cashmere_2item {
        width: 48%;
    }

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

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

  #cashmere_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;
  }