@charset "UTF-8";


.cat_project{
width: 94vw;
margin: 0 auto;
}




/* -------------------------------------------
   通常の挿入画像
------------------------------------------- */
.cat_project .text_area_layout > img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 30px 0;
  border-radius: 0;
}



/* ===== 基本タイポグラフィ ===== */


.cat_project h1{
margin: 25px 0 20px 0;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 10px;
font-size: 2.6666667vw;
font-size: clamp(9px, 2.6666667vw, 11px);

line-height: 1.1;
color: #000;

letter-spacing: -0.02em;
font-feature-settings: "liga" 1, "pnum" 1;
}


.cat_project h2 {
margin: 25px 0 20px 0;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 27px;
font-size: 7.2vw;
font-size: clamp(26px, 7.2vw, 28px);

line-height: 1.1;
color: #000;

letter-spacing: -0.01em;
font-feature-settings: "liga" 1, "pnum" 1;
}




/* --- スマホ用：リスト構造 --- */
ul.cat_project-list {
list-style: none;
margin: 30px auto 0 auto;
padding: 0;
width: 100%;
}


ul.cat_project-list li.project-item {
position: relative; /* スマホ版は通常表示なので通常どおりでOK */
display: block;
margin: 0 0 10px 0;

display: flex;
align-items:flex-end;
flex-direction: row-reverse;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 10px;
font-size: 2.6666667vw;
font-size: clamp(9px, 2.6666667vw, 11px);

line-height: 1.1;
color: #000;
letter-spacing: -0.02em;
}




.text-link {
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #000;
  line-height: 1.0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
}

.text-link .meta { display: block; }


.text-link a{
color:#000;
touch-action: manipulation; /* スマホのタップ遅延を殺す */
}

.img-link {
display: block;
text-align: left;
text-decoration: none;
touch-action: manipulation; /* スマホのタップ遅延を殺す */
}

/*数字No.*/
.num {
display: none;
margin: 0;
padding: 0;
text-align: left;
}

/*TITLE*/
.title {
display: block;
margin: 0 0 1px 0;
padding: 0;
text-align: left;
}

/*カテゴリー*/
.tags {
display: inline-block;
margin: 0;
padding: 0;

font-size: 8px;
}

/*0000年*/
.date_works_archive {
display: inline-block;
margin: 0;
padding: 0;
text-align: left;

font-size: 8px;
}


.date_works_archive::before{
content:"/";
margin-right:0.3em;
}


/*画像*/
.hover-img {
display: block;
width: 31vw;

margin: 0 0 0 10px;
aspect-ratio: 4 / 2;
overflow: hidden;

user-select: none;
}

.hover-img picture, .hover-img img{
width: 100%;
height: 100%;
display: block;
-webkit-tap-highlight-color: transparent;
user-select: none;
}

.hover-img img{
object-fit: cover;
-webkit-tap-highlight-color: transparent;
user-select: none;
}


.cat_project .copy{
position: relative;
display: block;
margin: 80px 0 15px 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 7px;
font-size: 1.8666667vw;
font-size: clamp(6px, 1.8666667vw, 8px);

line-height: 1.1;
color: #000;

letter-spacing: -0.02em;
font-feature-settings: "liga" 1, "pnum" 1;
}



/* ==========================================================================
   PC版
   ========================================================================== */
@media screen and (min-width: 768px) {

.cat_project{
width: 96vw;
margin: 0 auto;
padding: 70px 0 0 0;
}

.cat_project .text_area_layout > img{
display: block;
width: 100%;
height: auto;
margin: 0 0 40px 0;
border-radius: 0;
}



/* ===== 基本タイポグラフィ ===== */
.cat_project h1, .cat_project h2 {
margin: 0 0 30px;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 1440px計算*/
font-size: 38px;
font-size: 2.6388889vw;
font-size: clamp(36px, 2.6388889vw, 40px);

font-size: 20px;

line-height: 1.3;
letter-spacing: -0.02em;
color: #000;

font-feature-settings: "liga" 1, "pnum" 1;
text-transform: uppercase;
}



/*各記事リンクエリア　リスト*/
ul.cat_project-list {
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0 0 0 0;
}


ul.cat_project-list li.project-item {
width: 100%;
margin: 0;
padding: 3px 0 3px 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 1440px計算*/
font-size: 38px;
font-size: 2.6388889vw;
font-size: clamp(36px, 2.6388889vw, 40px);

font-size: 20px;


color: #000;
line-height: 1.0;
letter-spacing: -0.02em;
font-feature-settings: "liga" 1, "pnum" 1;
}


ul.cat_project-list li.project-item:first-child{
margin: 0;
}


/* ★ PC版テキスト：白（#fff）にして背面レイヤーとブレンド */
.text-link {
    position: relative;
    color: #000;

    margin: 0;
    padding: 0;
    width: 100%;

    display: flex;
    align-items: flex-start;
    line-height: 1.1;
}

.text-link {
    position: relative;
    color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: row;          /* ← 追加：スマホ用 column を打ち消す */
    justify-content: flex-start;  /* ← 追加：スマホ用 flex-end を打ち消す */
    align-self: auto;             /* ← 追加：スマホ用 stretch を打ち消す */
    align-items: flex-start;
    line-height: 1.1;
}

.text-link .meta { display: contents; }


.text-link a{
color: #fff;
}

.text-link a:hover{
color: #fff;
}

.img-link {
pointer-events: none;
display: contents;
}



/*jsで操作しています*/
.text-link.is-active{
color: #fff;
mix-blend-mode: difference;
}

.text-link.is-active a:hover{

}




/* --- 4つのカラムの幅設定 --- */
/*No.*/
.num {
margin: 0;
padding: 0;
display: block;
flex: none;

width: 30px;
margin-right: 5px;
}

.text-link .title {
    text-align: left;
    flex: 1.5;
    min-width: 0;
    margin-right: 40px;
    overflow-wrap: break-word;
}

.tags {
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    margin-right: 40px;
    overflow-wrap: break-word;

font-size: 20px;
}

/*0000年*/
.date_works_archive {
    margin: 0;
    padding: 0;
    text-align: left;
    flex: none;
    width: 63px;

font-size: 20px;
}

.date_works_archive::before{
display: none;
  content:"";
  margin-right:0.5em;
}


.text-link:hover .num,
.text-link:hover .title,
.text-link:hover .tags,
.text-link:hover .date_works_archive {
  text-decoration: underline;
}

  /* --- CSS版、ホバー画像表示（画面中央固定） ---*/
  .hover-img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 70vw;
    max-height: 70vh;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;

    aspect-ratio: auto;
    overflow: visible;
  }

  img.hover-img {
    width: auto;
    height: auto;
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0;
  }

  .hover-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 70vw;
    max-height: 70vh;
    object-fit: fill;
    margin: 0;
    border-radius: 0;
  }

  .project-item:hover .hover-img {
    opacity: 1;
  }







.cat_project .copy{

position: relative; /* スマホ版は通常表示なので通常どおりでOK */
display: none;
margin: 30px 0 15px 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 1440px計算*/
font-size: 18px;
font-size: 1.25vw;
font-size: clamp(16px, 1.25vw, 20px);

font-size: 12px;
line-height: 1.1;
color: #000;
}





} /* PC終了 */