@charset "utf-8";
/* CSS Document */
.columun_top_ttl{
	margin:50px auto 50px;
    padding: 15px 0 0px 0;
    font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    font-size: 200%;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.05em;font-weight: 600;
}
@media screen and (max-width:950px){
	.columun_top_ttl {line-height: 1.2; }
}
@media screen and (max-width:420px){
	.columun_top_ttl {padding:5px 0 0 0;font-size:150%; }
}


.columun_backimg {background: url("../columun/img/backimg_053.gif");}
.columun_top-txt{
	margin: 50px 0;
	padding: 10px;
	text-align: justify;
}
.columun_new_list{
	width:97%;
	margin: 50px auto;
}
.columun_new_list, .columun_list ul, .columun_recent_wrap ul{
	list-style: none; padding:0;
}
.columun_new_list li {margin-bottom: 30px;padding:20px;border:1px solid #989898;}
.columun_new_list li p.date{font-size:1em;}
.columun_new_list li img {margin:15px 0;}
.columun_new_list h2{margin:min(2vw,8px) 0;font-size:clamp(16px, 3.5vw , 18px);}
.columun_new_list .tags {color:#A4A4A4;font-size:.8em;}
.columun_new_list .columun_content_txt {margin:min(8px, 2vw) 0;padding:5px;line-height: 1.8;}
.columun_new_list li a.columun_linkbtn{display:block;width:min(300px, 60%);margin:20px auto;padding:8px;text-align: center; font-size:14px;background: #FFF; border:1px solid #BBB;border-radius: 50px;}
.columun_new_list li a.columun_linkbtn:hover {background: #BCBCBC;}
.columun_new_list picture img  {display: block;width:85%;max-width:640px;margin:15px auto;}

.columun_list {}
.columun_recent_wrap {}
.columun_ttl_line{border-bottom: solid 1px #999999; width: 60%; margin: 0 auto;}
.columun_list h3, .columun_recent_wrap h3 {font-size: 13px; text-align: center; padding-top: 5px;}
.columun_list ul{ margin: 20px 0; border: solid 1px #999999;}
.columun_list li { padding: 10px; font-size: 14px; border-bottom: dotted 1px #999999;}
.columun_list li:last-of-type { border-bottom:none;}
.columun_list ul li::before{
	content:"";
	font-size: 10px;
	color: #7DCCFF;
	font-family:fontawesome;
}
.columun_list-title{
	width: 89%; margin: 0 auto; text-align: center; font-size: 20px; color: #A9A9A9; font-weight: bold;
}
.columun_sale_bnr{
	margin: 20px 0;
}

.columun_recent_wrap{}
.columun_recent-title{}
.columun_recent_wrap ul {width:98%;margin:min(5vw, 25px) auto;}
.columun_recent_wrap ul li{margin:1.5vw auto;padding:10px;border:1px solid #999;}
.columun_recent_wrap ul li a{display: flex;align-items: center; color:var(--main-font-color);}
.columun_recent_wrap ul li img {width:min(25%, 100px);margin-right:15px;}
.columun_recent_wrap ul li p {flex:1;font-size:14px;}
.columun_recent_wrap ul li p span{display: block;font-size: 13px;}

.columun_style_wrap {
	display: flex;
	align-items: center;
	width:98%;
	margin-inline:auto;
	padding:5px;
	border:1px solid #9A9A9A;
	border-radius: 8px;
}
.columun_style_wrap img {width:clamp(90px, 28%, 150px);margin-right: 20px;}
.columun_style_wrap p{flex:1;font-size:.9em;}
.columun_style_wrap .stylename_txt {display:inline-block;margin-right: 3px; font-size:1.2em;line-height: 2;}
.columun_style_wrap .number {font-size:.85em;}
.columun_style_wrap .number {font-size:.9em;}

.columun_content_txt a {text-decoration: underline;text-decoration-color: #888;text-underline-offset:3px;}

.color_name_tbl{
   margin-inline:auto;
   text-align: left;
}
.color_name_tbl .name_before_td {width:7em;}
.color_name_tbl .arrow_td {width:1.5em;}
.color_name_tbl .name_new_td {width:10em;}

/*************************************************************/
/*************************************************************/

@media only screen and (max-width: 950px) {

.columun_new_list li {margin-bottom: 10vw;padding:5vw;}
.columun_new_list li p.date{font-size:.9em;}
.columun_new_list li img {margin:3.5vw 0;}


.columun_new_list li a.columun_linkbtn{width:min(70vw, 60%);margin:4.7vw auto;padding:2vw; font-size:3.3vw;border-radius: 11.6vw;}
.columun_new_list li a.columun_linkbtn:hover {background: #BCBCBC;}

.columun_list ul li::before{
	font-size: 2.3vw;
}

}

/*************************************************************/
/*************************************************************/

.style_list4_3_coloum {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.style_list4_3_coloum li {
  flex: 1;                 /* 横幅を均等にする */
  display: flex;
}

.img_columns {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #ddd;
  overflow: hidden;
  background: #fff;
  height: 100%;             /* 高さを親にフィットさせる */
}

.img_columns img {
  width: 100%;
  display: block;
  object-fit: cover; /* デフォは cover */
  height: 200px;     /* PC時は高さ固定で揃える */
}


.index_column_txt_box {
  padding: 12px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  flex-grow: 1;             /* テキスト部が伸びて高さを合わせる */
  display: flex;
  align-items: center;
  justify-content: center;
}
/*************************************************************/
/*************************************************************/
/*************************************************************/
@media (max-width: 599px){
	.style_list4_3_coloum {
		display: flex;
		justify-content: space-between;
		gap: 5px;
		list-style: none;
		padding: 0;
		margin: 0;
	}	
  .img_columns img {
    height: 100px;         /* スマホ用の共通高さ */
    object-fit: contain;   /* 画像を切り取らずに縮小表示 */
    background-color: #fff;/* 足りない余白は背景色で補う */
    padding: 5px 0;          /* 余白を少し追加して見栄え調整 */
    box-sizing: border-box;
  }
	.index_column_txt_box {
		padding: 5px 0;
		text-align: center;
		font-size: 0.8em;
		line-height: 1.5;
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}	
}