/*付箋ボックス*/
.box8 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: black;
    background: #eaeadc;
    border-left: solid 10px #eaeadc;
}
.box8 p {
    margin: 10px; 
    padding: 10px;
    text-align: left;
}

/*hr*/
hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #00592a;
}

.center {
   text-align: center;
}
.main {
	margin-bottom: 20px;
}
.sub ul {
	margin: 0 0 30px 0;
}
.sub ul li {
	width: 100px;
	float: left;
	list-style: none;
}
table.product {
	width: 100%;
	margin-bottom: 40px;
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.product th {
 padding: 10px;
 font-weight: bold;
 border-bottom: 1px solid #ccc;
}
table.product td {
 padding: 10px;
 border-bottom: 1px solid #ccc;
}
.cont table {
	width: 100px;
}
.cont table th, .cont table td {
	border-bottom: none;
}
p .product_img {
  float: left;
  margin-bottom: 1em;
}

/*product_name*/
#product_name_top { text-align: left; font: 16px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 12px; color:#ffffff;}

.detail_cont {
	margin-bottom: 50px;
}
.product_detail a {
	color: #333;
}
.detail_img_block {
	width: 325px;
	float: left;
}
.detail_txt_block {
	width: 318px;
	float: right;
}


.sub ul li {
	width: 100px;
	float: left;
	list-style: none;
}
table.product {
	width: 100%;
	margin-bottom: 40px;
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.product th {
 padding: 10px;
 font-weight: bold;
 border-bottom: 1px solid #ccc;
}
table.product td {
 padding: 10px;
 border-bottom: 1px solid #ccc;
}
.cont table {
	width: 100px;
}
.cont table th, .cont table td {
	border-bottom: none;
}
p .product_img {
  float: left;
  margin-bottom: 1em;
}

/*product_name*/
#product_name_top { text-align: left; font: 16px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 12px; color:#ffffff;}

.detail_cont {
	margin-bottom: 50px;
}
.product_detail a {
	color: #333;
}
.detail_img_block {
	width: 325px;
	float: left;
}
.detail_txt_block {
	width: 318px;
	float: right;
}

@media (max-width: 768px) {
	.detail_img_block {
		width: 100%;
		float: none;
	}
	.detail_txt_block {
		width: 100%;
		float: none;
	}
	.rs_pd_cart_btn {
		text-align: center;
	}
	.rs_pd_cart_btn input {
		margin: 0 auto;
	}
}




pc_area{
  display:block;
}
phone_area{
  display:none;
}

@media screen and (max-width: 768px){
  pc_area{
    display:none;
  }
  phone_area{
    display:block;
  }
}





    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px; /* グリッドアイテム間の余白 */
      padding: 20px; /* コンテナの余白 */
    }

    .grid-item {
      text-align: center;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .color-name {
      margin-top: 5px;
      font-weight: bold;
    }

    @media (max-width: 767px) {
      .grid-container {
        grid-template-columns: repeat(3, 1fr);
      }
    }





/*モルクラフトなど特定のカテゴリのデザイン*/
.custom_h2 { 
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  padding: 10px 15px;
  border-left: 5px solid #00592a;
}

.custom_h3 {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  padding-bottom: 5px;
  border-bottom: 2px solid #00592a;
  color: #333; /* 文字色をグレー系に変更 */
}

.custom_h4 { 
  font-size: 15px;
  font-weight: 600; /* 少し軽めにして、H3との強弱をつける */
  text-align: left;
  color: #333; /* 文字色をグレー系に変更 */
  margin-top: 10px;
  margin-bottom: 6px;
  position: relative;
  padding-left: 10px;
}


/*//////セット内容詳細の表（このclass名をdivにいれると中のtableが上手く設定できる）//////*/
  .item_set_table{
    overflow-x: auto;
    overflow-y: auto;
    max-height:300px;
  }
  .item_set_table table{
    white-space: nowrap;
  }
  .item_set_table td{
    background: #FFF;
  }
  .item_set_table th{
    background:#FFF;
  }
/*//////見出し行が灰色の通常の表（画面幅になる）//////*/
  .normal_table{
    width:100%;
  }
  .normal_table td{
    background: #FFF;
  }
  .normal_table th{
    background:#DDD;
  }




/*let's paint!の色スクエア*/
.letp_COLsmp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.letp_COLsmp_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}
.letp_COLsmp_item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 5px;
}
.letp_COLsmp p {
  font-size: 10px;
  text-align: left;
  display: inline-block;
  margin: 0 auto 10px auto;
}

/* スマホ用: 6列 → 1列の幅は約16.66% */
@media (max-width: 767px) {
  .letp_COLsmp_item {
    flex-basis: calc(16.666% - 8.33px); /* gap調整 */
  }
}

/* PC用: 12列 → 1列の幅は約8.33% */
@media (min-width: 768px) {
  .letp_COLsmp_item {
    flex-basis: calc(8.333% - 7.5px); /* gap調整 */
  }
}