@charset "utf-8";
/*
Theme Name: 一枚板・木材販売のダイキマン
Theme URI: https://daikiman.com/
Description: 一枚板・木材販売のダイキマンのテーマです
*/

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

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

/* 人気記事6列 */
.popular_list_wrapper {
	margin-bottom:9rem;
}

.popular_list_wrapper h2 {
	text-align:center;
	margin-bottom:6rem;
	font-size: clamp(22px, 2.4vw, 30px);
}

.popular_list_wrapper h2:after {
	content:"";
	width:60px;
	height:3px;
	background:#f76a0c;
	display:block;
	margin:2rem auto 0 auto;
}

.popular_list {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1200px) {
    .popular_list {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 900px) {
	.popular_list_wrapper {
	margin-bottom:4.5rem;
    }
    .popular_list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .popular_list {
        grid-template-columns: 1fr;
    }
	.popular_list .list_item a {
		display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	background:#FFF;
	padding:1rem;
	}
	.popular_list .list_item a figure {
		width:30%;
	}
	.popular_list .list_item a .text {
		width:65%;
	}
}

/* 記事一覧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 figure {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 1.5rem; /* 画像下余白増加 */
}
.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(16px, 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 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;
  }
}




#cpt-archive h2 {
	font-size: clamp(20px, 2.4vw, 36px);
	font-weight: 700;
	display: block;
	margin-bottom:6rem;
	line-height:1.5;
}

#cpt-archive h2 span {
	font-size:1em;
	position:relative;
	top:-0.25rem;
	color:#f76a0c;
	font-family: "Bebas Neue", "Noto Sans JP", sans-serif;
	font-weight: 400;
	text-align:right;
	display:block;
}

#cpt-archive h2 span:before {
  background-color: #f76a0c;
  content: "";
  height: 3px;
  width: 100%;
  display:block;
  margin-top:1rem;
  margin-bottom:1rem;
}

.category-list_wrapper {
	margin-bottom:9rem;
}

.category-list_wrapper ul {
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
	list-style:none !important;
	padding-left: 0 !important;
}

.category-list_wrapper ul li {
	font-size:clamp(16px, 1.8vw, 22px);
	line-height:1.2;
}

.category-list_wrapper ul li:after {
	content:" / ";
	margin:0 1.5rem;
}

.category-list_wrapper ul li:last-child:after {
	content:none;
}

.category-list_wrapper ul li a {
	text-decoration:none;
	font-weight:100;
	white-space: nowrap;
	position:relative;
	font-weight:600;
	color:#472e0b;
}

.category-list_wrapper ul li a:after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -10px;
    left: 35%;
    width: 30%;
    height: 2px;
    background:#472e0b;
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

.category-list_wrapper ul li a:hover:after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/* 納品実績 */

/* 一覧全体（article を囲む親要素） */
.cpt-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.8rem;
}

/* 記事カード */
.cpt-item {
    position: relative;
    overflow: hidden;
	border-radius:5px;
}

/* リンクを全面に */
.cpt-item a {
    display: block;
    color: inherit;
    text-decoration: none;
	position:relative;
}

/* 画像ラッパー（正方形） */
.cpt-item .img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.cpt-item .img-wrap span {
	position:absolute;
	left:0;
	bottom:0;
	display:inline-block;
	padding:0.5rem 1rem;
	background:rgba(0,0,0,0.6);
	color:#FFF;
	font-size:clamp(14px, 1.2vw, 15px);
	z-index:2;
}

/* 画像 */
.post-type-archive-achievements .cpt-item img,
.tax-achievements_type .cpt-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* ホバーでズーム */
.post-type-archive-achievements .cpt-item:hover img,
.tax-achievements_type .cpt-item:hover img {
    transform: scale(1.05);
}

/* テキストエリア（初期非表示） */
.post-type-archive-achievements .cpt-item .text,
.tax-achievements_type .cpt-item .text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0) 60%
    );
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ホバー時に表示 */
.post-type-archive-achievements .cpt-item:hover .text,
.tax-achievements_type .cpt-item:hover .text {
    opacity: 1;
}

/* タイトル */
.post-type-archive-achievements .cpt-item h3,
.tax-achievements_type .cpt-item h3 {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.4;
    margin: 0;
}


/* =========================
   スマホ（インスタ風3列）
========================= */
@media screen and (max-width: 980px) {
.category-list_wrapper {
  margin-bottom: 6rem;
}

.cpt-list {
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

/* スマホは文字なし */
.post-type-archive-achievements .cpt-item .text {
	display:none;
}
}

/* =========================
   タブレット調整（任意）
========================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .cpt-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
}







/* =========================
   在庫一覧
   ========================= */
.stock_caution {
	margin-top:-6rem;
	margin-bottom:7.5rem;
	line-height:2;
}

.post-type-archive-stock .cpt-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
}

.post-type-archive-stock .cpt-list:nth-child(2) {
	margin-bottom:6rem;
}

.post-type-archive-stock .cpt-item {
  margin-bottom: 6rem;
}

/* =========================
   画像ラッパー
   ========================= */

.post-type-archive-stock .cpt-item .img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

/* =========================
   商品番号（#0012 など）
   ========================= */

.post-type-archive-stock .cpt-item .img-wrap span.font-bn {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: clamp(14px, 1.2vw, 15px);
  z-index: 10;              /* ← 画像より必ず上 */
  pointer-events: none;     /* ← hover/tap の邪魔をしない */
}

/* =========================
   画像共通
   ========================= */

.post-type-archive-stock .cpt-item .img-wrap .stock-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* 1枚目 */
.post-type-archive-stock .cpt-item .img-wrap .stock-img.is-first {
  opacity: 1;
  z-index: 1;
}

/* 2枚目 */
.post-type-archive-stock .cpt-item .img-wrap .stock-img.is-second {
  opacity: 0;
  z-index: 2;
}

/* =========================
   PC：2枚目がある場合のみ hover 切替
   ========================= */

@media (hover: hover) and (pointer: fine) {
  .post-type-archive-stock
  .cpt-item
  .img-wrap:has(.stock-img.is-second):hover
  .stock-img.is-first {
    opacity: 0;
  }

  .post-type-archive-stock
  .cpt-item
  .img-wrap:has(.stock-img.is-second):hover
  .stock-img.is-second {
    opacity: 1;
  }
}

/* 切替可能なときだけカーソル変更 */
.post-type-archive-stock
.cpt-item
.img-wrap:has(.stock-img.is-second) {
}

/* =========================
   チェック画像（新着・商談中・売り切れ）
   ========================= */

.post-type-archive-stock .cpt-item span.check {
  width: 27%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
}

/* =========================
   テキスト
   ========================= */

.post-type-archive-stock .cpt-item .text {
  padding: 1.5rem 0 0.5rem 0;
  font-weight: 600;
  letter-spacing: 0.2rem;
}

.post-type-archive-stock .cpt-item .text h3 {
  font-size: clamp(15px, 1.4vw, 16px);
}

.post-type-archive-stock .cpt-item .text_detail {
	margin-bottom:1.5rem;
}

.post-type-archive-stock .cpt-item .text_detail ul li {
  margin: 0 0 0.5rem 0;
  font-size: clamp(15px, 1.2vw, 16px);
  font-weight: 600;
  letter-spacing: 0.2rem;
}

.post-type-archive-stock .cpt-item .text_detail ul li.size {
  margin-bottom: 0;
  letter-spacing: 0.1rem;
}

.post-type-archive-stock .cpt-item .text_detail ul li span {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: normal;
}

/* =========================
   SP
   ========================= */

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

#cpt-archive h2 {
  margin-bottom: 3rem;
}

.stock_caution {
  margin-top: -3rem;
  margin-bottom: 4.5rem;
}

.post-type-archive-stock .cpt-list {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.post-type-archive-stock .cpt-item {
  margin-bottom: 3rem;
}

.post-type-archive-stock .cpt-item .text {
    display: inherit;
}

}

.contact_btn_stock {
	text-align:center;
}

.contact_btn_stock a {
	padding:1rem 3rem;
	text-align:center;
	display:inline-block;
	border:1px solid #f76a0c;
	color:#f76a0c;
	border-radius:6rem;
	font-size:clamp(14px, 1.1vw, 15px);
	font-weight:600;
}

@media screen and (max-width: 980px) {
.contact_btn_stock a {
	padding:1rem 1.5rem;
}
}