@charset "utf-8";
/*
Theme Name: 関西金属株式会社
Theme URI: https://kansai-kinzoku.net/
Description: 関西金属株式会社のテーマです
*/

/* 見出し */
.section-title {
  font-size: clamp(18px, 2.5vw, 30px);
  margin-bottom: 2rem;
}

/* 共通リスト */
.list {
  display: grid;
  gap: 2rem;
}

/* 記事一覧3列 */
.article_list {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 9rem;
}

@media (max-width: 980px) {
  .article_list {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 4.5rem;
  }
}

@media (max-width: 600px) {
  .article_list {
    /*grid-template-columns: 1fr;*/
  }
}

/* 各アイテム */
.list_item {
  display: flex;
  flex-direction: column;
}

/* 画像 */
.list_item div.img-box {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #FAFAFA;
  /* 画像下余白増加 */
}

.list_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カテゴリータグ */
.category_tag {
  display: inline-block;
  font-size: 15px;
  /* 少し大きめ */
  color: #fff;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.8rem;
  /* タイトルとの間隔 */
  line-height: 1.4;
}

/* タイトル */
.list_item h3 {
  font-size: clamp(14px, 2vw, 18px);
  margin: 0.8rem 0 1.2rem 0;
  /* 上下余白広め */
  line-height: 1.5;
}

/* 日付 */
.list_item time {
  font-size: 14px;
  /* 少し大きめに変更 */
  color: #666;
  line-height: 1.4;
  display: block;
  text-align: right;
}

.list_item time em {
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
}

/* リンク下線なし */
.list_item a {
  text-decoration: none;
}

/* デフォルト 3列 */
.article_list .list_item:nth-child(n+4) {
  margin-top: 3rem;
}

/* 2列（幅900px以下）の場合 3番目以降に余白 */
@media (max-width: 900px) {
  .article_list .list_item:nth-child(n+3) {
    margin-top: 3rem;
  }

  .category_tag {
    font-size: 13px;
    /* 少し大きめ */
  }
}

/* 1列（幅600px以下）の場合 2番目以降に余白 */
@media (max-width: 600px) {
  .article_list .list_item:nth-child(n+2) {
    margin-top: 0;
  }
}




/* 各アイテム */
.list_item {
  display: flex;
  flex-direction: column;
}

/* 画像 */
.list_item div.img-box {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #FAFAFA;
  /* 画像下余白増加 */
}

.list_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カテゴリータグ */
.category_tag {
  display: inline-block;
  font-size: 15px;
  /* 少し大きめ */
  color: #fff;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.8rem;
  /* タイトルとの間隔 */
  line-height: 1.4;
}

/* タイトル */
.list_item h3 {
  font-size: clamp(14px, 2vw, 18px);
  margin: 0.8rem 0 1.2rem 0;
  /* 上下余白広め */
  line-height: 1.5;
}

/* 日付 */
.list_item time {
  font-size: 14px;
  /* 少し大きめに変更 */
  color: #666;
  line-height: 1.4;
  display: block;
  text-align: right;
}

.list_item time em {
  font-style: normal;
  font-family: Noto Serif JP, sans-serif;
}

/* リンク下線なし */
.list_item a {
  text-decoration: none;
}

/* デフォルト 3列 */
.article_list .list_item:nth-child(n+4) {
  margin-top: 3rem;
}

/* 2列（幅900px以下）の場合 3番目以降に余白 */
@media (max-width: 900px) {
  .article_list .list_item:nth-child(n+3) {
    margin-top: 3rem;
  }

  .category_tag {
    font-size: 13px;
    /* 少し大きめ */
  }
}

/* 1列（幅600px以下）の場合 2番目以降に余白 */
@media (max-width: 600px) {
  .article_list .list_item:nth-child(n+2) {
    margin-top: 0;
  }
}




/* index.cssと同じだが一部フォントサイズ、ブロック間隔調整 */
/* ------------------------------
   一覧
------------------------------ */
.works_list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:30px;
	margin:60px 0;
	padding:0;
	list-style:none;
}

/* ------------------------------
   カード
------------------------------ */
.works_list .works_box{
	background:#fff;
	overflow:hidden;
	box-shadow:0 5px 15px rgba(0,0,0,.08);
	transition:.3s;
	position:relative;
	display:block;
	max-width:none;
	flex:none;
}

.works_list .works_box:hover{
	transform:translateY(-5px);
	box-shadow:0 10px 25px rgba(0,0,0,.15);
}

/* 以前の縦線は非表示 */
.works_list .works_box::after{
	display:none;
}

.item_price_up {
	position:absolute;
	right:1rem;
	top:1rem;
	width:64px;
}

/* ------------------------------
   画像
------------------------------ */
.works_box .img-wrap{
	margin:0;
	padding:0;
	aspect-ratio:1 / 1;
	position:relative;
	overflow:hidden;
}

.works_box .img-wrap a{
	display:block;
	width:100%;
	height:100%;
}

.works_box .img-wrap img{
	position:static;
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	transition:transform .4s;
}

/* ホバー時の拡大（必要なければ削除）
.works_box:hover .img-wrap img{
	transform:scale(1.05);
}
*/

/* ------------------------------
   テキスト
------------------------------ */
.works_box .text{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.8);
	padding:1rem 1.5rem;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}

/* タイトル以外は非表示 */
.works_box .text .area_type,
.works_box .text p,
.works_box .text > span{
	display:none;
}

.works_box .text h3{
	margin:0;
	font-size:clamp(13px,1.2vw,16px);
	font-weight:500;
	line-height:1.3;
	color:#fff;
}

.works_box .text h3 a{
	color:inherit;
	text-decoration:none;
}

.works_box .text h3 a:hover{
	text-decoration:none;
}

/* ------------------------------
   タブレット
------------------------------ */
@media (max-width:980px){

	.works_list{
		grid-template-columns:repeat(3,1fr);
		gap:20px;
		margin-bottom:0;
	}

}

/* ------------------------------
   スマホ
------------------------------ */
@media (max-width:680px){

	.works_list{
		grid-template-columns:repeat(2,1fr);
		gap:15px;
		margin-top:4.5rem;
	}

	.works_box .text{
		padding:7.5px 5px;
	}
	
	.works_box .text h3 {
	  letter-spacing: 0;
	}

	.works_list p.w100{
		grid-column:1 / -1;
		position:static;
		width:auto;
	}

}

@media (max-width:480px){

	.works_list{
		gap:2px;
	}

}