/*
 * カテゴリーページ専用CSS (モバイルファースト対応版)
 */

/* ===========================================
   カテゴリーページ全体（ベース：スマホ表示）
   =========================================== */
.category-container { min-height: 70vh;}
.container {
	margin: 0 auto;
	width: 88%;
	max-width: 1000px;
}

/* ===========================================
   カテゴリーヘッダー（ベース：スマホ表示）
   =========================================== */
.category-header { padding: 40px 0 30px; }/* スマホ用のpadding */
.category-header-content { text-align: center;}
.category-title {
    margin-bottom: 20px;
    color: #333;
    font-size: 1.8rem; /* スマホ用のフォントサイズ */
    font-weight: bold;
    line-height: 1.3;
}

/* 階層表示スタイル */
.category-title .parent-category {
    color: #333;
    font-size: 1.8rem;
    font-weight: bold;
}

.category-title .current-category {
    margin-top: 8px;
    color: #666;
    font-size: 1.4rem;
    font-weight: normal;
}

.category-label {
    display: block;
    margin-bottom: 10px;
    color: #666;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: normal;
}

.category-description {
    margin: 0 auto 40px;
    color: #666;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 600px;
}

/* ===========================================
   子カテゴリーナビゲーション（ベース：スマホ表示）
   =========================================== */
.category-nav { margin-top: 30px;}
.category-nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .9em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.category-nav-list .nav-item a {
	display: block;
	padding: .5em 2em .6em;
	color: #454545;
	font-size: 1.35rem; 
	font-weight: 600;
	text-decoration: none;
	-webkit-mask: url("../images/mask-book-label.png") center / 100% 100% no-repeat;
	mask: url("../images/mask-book-label.png") center / 100% 100% no-repeat;
	background-color: #ccc;
	transition: all 0.3s ease;
}
/* .category-nav-list .nav-item.nav-all a { color: #fff;} */
.category-nav-list .nav-item.nav-feature a { background-color: var(--labelcolor-feature);}
.category-nav-list .nav-item.nav-column a { background-color: var(--labelcolor-column);}
.category-nav-list .nav-item.nav-talk-session a { background-color: var(--labelcolor-talk-session);}
.category-nav-list .nav-item.nav-enquete a { background-color: var(--labelcolor-enquete);}
.category-nav-list .nav-item.nav-schedule a { background-color: var(--labelcolor-schedule); padding: .5em .75em .6em;}
.category-nav-list .nav-item a:hover,
.category-nav-list .nav-item.active a {
	filter: brightness(104%) contrast(106%) saturate(110%);
}

/* お知らせ記事一覧
	--------------------------------------- */
.category-news .category-nav-list .nav-item a,
.category-info .category-nav-list .nav-item a,
.category-stage .category-nav-list .nav-item a,
.category-event .category-nav-list .nav-item a,
.category-ws .category-nav-list .nav-item a {
	padding: .15em 1.2em;
	-webkit-mask: none;
	mask: none;
	background-color: #fff;
	border: 2px solid #999;
}
.category-nav-list .nav-item.nav-info a,
.category-nav-list .nav-item.nav-news a {border-color: var(--labelcolor-news);}
.category-nav-list .nav-item.nav-event a {border-color: var(--labelcolor-event);}
.category-nav-list .nav-item.nav-ws a {border-color: var(--labelcolor-ws);}
.category-nav-list .nav-item.nav-stage a {border-color: var(--labelcolor-stage);}
.category-nav-list .nav-item.nav-all a:hover { color:#fff; background-color: var(--labelcolor-news);}
.category-nav-list .nav-item.nav-info a:hover { color:#fff; background-color: var(--labelcolor-news);}
.category-nav-list .nav-item.nav-event a:hover { color:#fff;background-color: var(--labelcolor-event);}
.category-nav-list .nav-item.nav-ws a:hover { color:#fff;background-color: var(--labelcolor-ws);}
.category-nav-list .nav-item.nav-stage a:hover { color:#fff;background-color: var(--labelcolor-stage);}

.category-news .category-nav-list .nav-item.active:after,
.category-stage .category-nav-list .nav-item.active:after,
.category-event .category-nav-list .nav-item.active:after,
.category-ws .category-nav-list .nav-item.active:after { background: none;}



/* ===========================================
   記事一覧セクション（ベース：スマホ表示）
   =========================================== */
.category-posts-section {
    padding: 40px 0; /* スマホ用のpadding */
}

.posts-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホでは1カラム */
    gap: 30px; /* スマホ用のgap */
    margin-bottom: 60px;
}

/* ===========================================
   投稿カード（ベース：スマホ表示）
   =========================================== */

.post-card {
	position: relative;
	display: flex;
	flex-direction: column; /* スマホでは常に縦型 */
	margin: 0;
/* 	height: 100%; */
	background-color: #fff;
	box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.08);
	border-radius: 2rem;
	overflow: hidden;
	transition: all 0.3s ease;

	will-change: filter, transform;/* hover時にフィルターと移動を使うためのヒント */

}

.post-card:hover {
    box-shadow: none;
    transform: translateY(-5px);
    filter:
      drop-shadow(0 3px 3px rgba(0,0,0,0))
      drop-shadow(0 6px 6px rgba(0,0,0,0.01))
      drop-shadow(0 9px 9px rgba(0,0,0,0.02))
      drop-shadow(0 12px 12px rgba(0,0,0,0.03));
}
.post-card-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
/* 	background-color: #f7f7f7; */
}
.post-card.category-column .post-card-link { padding-top: .65em;}

/* 投稿画像 */

.post-thumbnail {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    font-size: 0.001em;
    aspect-ratio: 3/2;
}

.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card:hover .post-image { transform: scale(1.05);}

/* お知らせカテゴリー */


/* ===========================================
   お知らせカテゴリー専用の透過トリミング機能
   =========================================== */
.post-card .post-thumbnail.news-category {
	position: relative;
	overflow: hidden;
	mask-image: url('../images/image-trimming.png');/* 透過トリミング機能 */
	mask-size: cover;
	mask-position: center;
	mask-repeat: no-repeat;
	-webkit-mask-image: url('../images/image-trimming.png');
	-webkit-mask-size: cover;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	transition: transform 0.3s ease;
}

/* ホバー時のトリミングエリア拡大（新着記事のみ） */
/*
.latest-post .post-card-link:hover .post-thumbnail.news-category {
    mask-size: 105%;
    -webkit-mask-size: 105%;
}
*/



.post-card:hover .post-thumbnail.news-category { transform: scale(1.05);}
.post-card:hover .post-thumbnail.news-category .post-image  { transform: none;}

.post-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #999;
    font-size: 1.2rem;
    background-color: #f0f0f0;
}

/* 投稿内容 */
.post-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 2rem;
}

a:hover .post-content {
    opacity: 0.9;
}

.post-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}
.post-categories { margin-bottom: 0;}
.post-categories .category-label {
    display: inline-block;
    margin-right: 0.8rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 1.2rem;
    color: #666;
    font-size: 1.2rem;
    background-color: #f8f9fa;
}
.post-title {
    margin:0 0 .4rem;
    color: #333;
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 1.4;
    transition: color 0.3s ease;
}

/* .post-card-link:hover .post-title { color: #666;} */

.post-subtitle {
	margin-bottom: .45em;
	color: #444;
	font-size: 1.6rem;
	font-family: var(--noto-heading-font);
	line-height: 1.4;
}

.post-meta {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 5px; /* スマホ用にgapを詰める */
    color: #999;
    font-size: 1.2rem;
}
.post-date {
	color: #777;
	font-size: 1.35rem;
	font-family: var(--noto-heading-font);
}
.post-date:before {
/* 	content: "更新日："; */
	font-size: 1.2rem;
}

.post-excerpt {
    color: #666;
    font-size: 1.6rem;
    line-height: 1.45;
    display: none;
}

/* タグ（一覧はフラット表示・ホバー変化なし） */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .6rem;
	margin: 0.4rem 0 0.8rem;
/* 	padding: .3em 0; */
/*
	border-top: 1px dashed #333;
	border-bottom: 1px dashed #333;
*/
}
.post-tags-label { margin-right: .4rem; color: #888; font-size: 1.2rem; }
.tag-chip {
    display: inline-block;
    margin: 0;
    padding: .5rem .95rem;
    color: #666;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
/*     background: rgba(255,255,255,.35); */
    border: 1px solid #666;
    border-radius: 1.2rem;
}
/* タグの先頭に装飾ハッシュを付与（控えめ） */
.tag-chip::before { content: "#";}

/* 「続きを読む」ボタンはスマホでは通常表示 */
.post-more {
    margin-top: auto;
    padding-top: 1rem;
    text-align: right;
}

.read-more-link {
    display: inline-block;
    padding: 0.8rem 2rem;
/*     border: 9px solid #fff; */
    box-shadow : 0px 0px 3px 0px rgba(255,255,255,1);
    border-radius: 3rem;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
    text-decoration: none;
    background-color: #333;
}
.no-posts {
    padding: 60px 20px;
    text-align: center;
}
.no-posts h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 1.8rem;
}
.no-posts p {
    margin-bottom: 30px;
    color: #666;
    font-size: 1.1rem;
}



/* ===========================================
   レスポンシブ対応 (モバイルファースト)
   =========================================== */

/* 769px以上のタブレット・PCサイズ */
@media (min-width: 769px) {

	.category-header { padding: 60px 0 40px;} /* PC用のpadding */
	.category-title,
	.category-title .parent-category { font-size: 2.5rem;}
	.category-title .current-category { font-size: 1.6rem;}


    .category-posts-section {
        padding: 60px 0;
    }

    .posts-grid {
	    grid-template-columns: repeat(2, 1fr);
        gap: 2.75rem;
    }

    /* すべてカード型に統一（横長リスト化を無効化） */
.post-card {
	box-shadow: 0 0.1rem .5rem rgba(0,0,0,0.08);
	box-shadow: none;
}
.post-card .post-card-link { display: block !important; }
.post-card .post-thumbnail {
	flex-shrink: 0;
	margin-right: 0 !important;
	padding: 0;
	width: 100% !important;
	height: auto !important;
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 3/2;
}


.post-content { padding: 1rem 2rem 2rem !important; }
.post-card .post-content { display: flex; flex-direction: column; flex-grow: 1; }
.post-meta { flex-direction: column; gap: 5px; }
/* PCでは「続きを読む」をホバー時のみ表示し、テキスト上に重ねる */
.post-more {
position: absolute;
right: 2rem;
bottom: 2rem;
margin: 0;
text-align: right;
}
.read-more-link {
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.pickup-article:hover .read-more-link,
.post-card:hover .read-more-link {
opacity: 1;
pointer-events: auto;
}
.post-card .post-excerpt { display: none; overflow: visible; -webkit-line-clamp: unset; }
}

/* 992pxレイヤーはカテゴリ一覧では使用しない（769→1050→1440） */

/* 1050px以上で3カラム */
@media (min-width: 1050px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 1550px以上で余白にゆとりを追加 */
@media (min-width: 1550px) {
  .container {max-width: 1120px;}
	.posts-grid { gap: 2.4rem;}
}

/* SVGマスク方式（読みもの系子カテゴリに適用） */
.post-categories .category-label.cat-feature,
.post-categories .category-label.cat-talk-session,
.post-categories .category-label.cat-column,
.post-categories .category-label.cat-enquete,
.post-categories .category-label.cat-schedule,
.post-categories .category-label.cat-wagaya { /* 旧スラッグ互換 */
	position: relative;
	padding: 0.45rem 1.4rem 0.75rem;
	font-weight: 700;
	font-family: var(--noto-heading-font);
	text-align: center;
	-webkit-mask: url("../images/mask-book-label.png") center / 100% 100% no-repeat;
	mask: url("../images/mask-book-label.png") center / 100% 100% no-repeat;
	filter: brightness( 105% ) contrast( 105% ) saturate( 105% ) ;
	box-shadow: none;
}
.post-categories .category-label.cat-info,
.post-categories .category-label.cat-news,
.post-categories .category-label.cat-stage,
.post-categories .category-label.cat-event,
.post-categories .category-label.cat-ws { /* 旧スラッグ互換 */
	position: relative;
	padding: 0.35rem .8rem;
	font-weight: 700;
	font-family: var(--noto-heading-font);
	text-align: center;
	-webkit-mask: none;
	mask: none;
	box-shadow: none;
	border:2px solid #d9d9d9;
	filter: brightness( 105% ) contrast( 105% ) saturate( 105% ) ;
}
.category-label { color: #444; font-weight: bold; }
.category-label.cat-feature { background-color:  var(--labelcolor-feature);}/* 特集 */
.category-label.cat-talk-session { background-color:  var(--labelcolor-talk-session);}/* 座談会 */
.category-label.cat-column { background-color: var(--labelcolor-column);}/* コラム */
.category-label.cat-enquete { background-color:  var(--labelcolor-enquete);}/* アンケート */
.category-label.cat-schedule { background-color:  var(--labelcolor-schedule);}/* わがやのスケジュール */
.post-categories .category-label.cat-info,
.post-categories .category-label.cat-news { border-color: var(--labelcolor-news);}/* 公演情報 */
.post-categories .category-label.cat-stage { border-color: var(--labelcolor-stage);}/* 公演情報 */
.post-categories .category-label.cat-event { border-color: var(--labelcolor-event);}/* イベント */
.post-categories .category-label.cat-ws { border-color: var(--labelcolor-ws);}/* ワークショップ */


/* ===========================================
   検索結果なしページ専用スタイル
   =========================================== */
.no-posts {
    padding: 6rem 0;
    text-align: center;
}

.no-posts h2 {
    margin: 0 0 1.6rem;
    color: #333;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-family: var(--xserver-heading-font);
    font-weight: 700;
}

.no-posts p {
    margin: 0 0 3rem;
    color: #666;
    font-size: 1.6rem;
    line-height: 1.6;
}


/* 気になるキーワード（サイドバーと同じデザイン） */
.popular-tags h3 {
    margin: 0 0 1.6rem;
    color: #333;
    font-size: 1.6rem;
    font-family: var(--xserver-heading-font);
    font-weight: 700;
}

.tag-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.tag-link {
    display: inline-block;
    padding: 0.5rem 0.95rem;
    color: #666;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 1px solid #666;
    border-radius: 1.2rem;
    transition: all 0.2s ease;
}

.tag-link::before {
    content: "#";
    margin-right: -0.1em;
}

.tag-link:hover {
    color: #333;
    background: #f8f9fb;
    border-color: #333;
}