body.project h1{
width: 94%;
margin: 10px auto 5px auto;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 13px;
line-height: 1.0;
font-feature-settings: "kern";
letter-spacing: 0.00em;
}





body.project .sub_title_project{
width: 94%;
margin: 0 auto;
padding: 0;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 13px;
line-height: 1.0;
font-feature-settings: "kern";
letter-spacing: 0.00em;


user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}




/*子カテゴリーのナビ*/
.category_nav{
width: 94%;
margin: 10px auto 10px auto;
padding: 0;

list-style: none;
display: flex;
flex-wrap: wrap;
gap:20px;

overflow: hidden;
/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 13px;
line-height: 1.2;
font-feature-settings: "kern";
letter-spacing: -0.01em;
}

.category_nav li:first-child{
width: 30px;
}
.category_nav li:nth-child(2){
width: 70px;
}
.category_nav li:nth-child(3){
width: 90px;
}





#archive_project{
width: 100%;
margin: 0;
padding: 0;

border-top: 1px solid #000;
}





/*2列*/
.grid-item{
position: relative;
width: 100%;

/*全体 */
display: -webkit-flex;
display: flex;
flex-wrap: wrap;/*子要素を折り返し 複数行*/

margin: 0;
padding: 0;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-feature-settings: "kern";

font-size: 8px;
letter-spacing: 0.01em;
line-height: 1.3;

border-bottom: 1px solid #000;
}




.grid-item a.hover_area{
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}


.grid-item .photo_area{
position: relative;
z-index: 1;
flex-basis: 25%;
opacity: 0;

border-right: 1px solid #000;
box-sizing: border-box;

background: #fff;

/*天地中央*/
display: flex;
justify-content: center;
align-items: center;

user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}


.grid-item .photo_area .photo_area_layout{
width: calc( 100% - 10px );
height:calc( 100% - 10px );
overflow: hidden;
}

.grid-item .photo_area .photo_area_layout img{
width: 100%;
height: 100%;
object-fit: cover;
}


.grid-item .photo_area img{
width: 100%;
height: auto;
}


.grid-item .text_area_style .layout_style{
margin: 10px 5px 10px 10px;
}



.grid-item .text_area01{
flex-basis: 33%;
margin: 0 0 0 0;

border-right: 1px solid #000;
box-sizing: border-box;
}

.grid-item .text_area02{
flex-basis: 20%;
margin: 0 0 0 0;

border-right: 1px solid #000;
box-sizing: border-box;
}


.grid-item .text_area03{
flex-basis: 0%;
margin: 0 0 0 0;
box-sizing: border-box;
}

.grid-item .text_area04{
flex-basis: 22%;
margin: 0 0 0 0;

box-sizing: border-box;
}

.grid-item .text_area05{
display: none;
flex-basis: 0%;
margin: 0 0 0 0;

box-sizing: border-box;
}


.grid-item .text_area01 h2{
margin: 10px 0 0 0;
padding: 0;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 10px;
line-height: 1.3;
}

.grid-item .text_area05{
margin: 0px 0 0 0;
padding: 0;
font-size: 10px;
line-height: 1.2;
}





/*スマホ終了
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



/*PC開始*/
@media screen and (min-width:768px) {
body.project h1{
width: calc( 100% - 20px );
width: -webkit-calc( 100% - 20px );

margin: 60px 0 0 20px;
padding: 0;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;


font-size: 55px;
line-height: 1.0;
font-feature-settings: "kern";
letter-spacing: -0.03em;


user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}


body.project .sub_title_project{
width: calc( 100% - 20px );
width: -webkit-calc( 100% - 20px );

margin: 0 0 10px 20px;
padding: 0;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;


font-size: 55px;
line-height: 1.0;
font-feature-settings: "kern";
letter-spacing: -0.03em;


user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}



/*子カテゴリーのナビ*/
.category_nav{
width: calc( 100% - 20px );
width: -webkit-calc( 100% - 20px );
margin: 0 0 20px 20px;
padding: 0;

list-style: none;
display: flex;
flex-wrap: wrap;
gap:20px;


overflow: hidden;
/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 20px;
line-height: 1.2;
font-feature-settings: "kern";
letter-spacing: -0.02em;
}

.category_nav li:first-child{
width: 30px;
}
.category_nav li:nth-child(2){
width: 100px;
}
.category_nav li:nth-child(3){
width: 140px;
}





#archive_project{
width: 100%;
margin: 0;
padding: 0 0 0 0;
border-top: 2px solid #000;
display: block;
}


/*3列*/
.grid-item{
position: relative;
width: 100%;
margin: 0;
padding: 0 0 0 0;
border-bottom: 1px solid #000;

/*全体 */
display: -webkit-flex;
display: flex;
flex-wrap: wrap;/*子要素を折り返し 複数行*/

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-feature-settings: "kern";
letter-spacing: 0.03em;
}

.grid-item:first-child{
border-bottom: 2px solid #000;
}

.grid-item a.hover_area{
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}


/*背景*/
.grid-item .each_bg{
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;



}

.grid-item a.hover_area + .each_bg {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: #eee; /* 常に持たせておく */
opacity: 0;
will-change: opacity;
mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;

transform: translateZ(0);/*Safariのmix-blend-modeバグ対応*/
backface-visibility: hidden;/*Safariのmix-blend-modeバグ対応*/

/*マスク*/
-webkit-mask-image: url(mask01.png);
mask-image: url(mask01.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/*マスクのサイズと位置を動かすのよ*/
-webkit-mask-size: 100% 250%;
mask-size: 100% 250%;
-webkit-mask-position: 0 0;
mask-position: 0 0;
transition: opacity 2s, mask-size 1s ease-out, mask-position 1s ease-out;
-webkit-transition: opacity 2s, -webkit-mask-size 1s ease-out, -webkit-mask-position 1s ease-out;
}




.grid-item a.hover_area:hover + .each_bg{
opacity: 1;
transition: opacity 1s, mask-size 1s ease-out, mask-position 1s ease-out;
-webkit-transition: opacity 1s, -webkit-mask-size 1s ease-out, -webkit-mask-position 1s ease-out;


mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;



/*マスクのサイズと位置を動かすのよ*/
-webkit-mask-size: 100% 550%;
mask-size: 100% 550%;
-webkit-mask-position: 100% 100%;
mask-position: 100% 100%;
}




@supports (-webkit-appearance: none) {
/* Safari にだけ適用される CSS */
.grid-item a.hover_area + .each_bg {
mask-image:none;
-webkit-mask-image:none;
}

.grid-item a.hover_area:hover + .each_bg{
opacity: 0.6;
mask-image:none;
-webkit-mask-image:none;
}

}/*end @suppots*/








.grid-item:nth-child(2n+1){
margin: 0 0 0 0;
}


.grid-item:nth-child(2n+0){
margin: 0 0 0 0;
}

.grid-item:first-child .photo_area{
/*height: auto;*/
}

.grid-item .photo_area{
position: relative;
z-index: 1;
flex: 0 0 170px;
height: 100px;

overflow: hidden;

border-right: 1px solid #000;
background: #fff;

/*天地中央*/
display: flex;
justify-content: center;
align-items: center;

user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}

.grid-item .photo_area .photo_area_layout{
width: 150px;
height: 80px;
overflow: hidden;
}

.grid-item .photo_area .photo_area_layout img{
width: 100%;
height: 100%;
object-fit: cover;
}





.grid-item .text_area00{
flex: 0 0 20px;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-sizing: border-box;

/*天地中央*/
display: flex;
justify-content: center;
align-items: center;

font-size: 10px;
}

.grid-item .text_area00 .select_point{
opacity: 0;
}


.grid-item .text_area01{
flex: 0 0 300px;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-sizing: border-box;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 13px;
line-height: 1.4;
}


.grid-item .text_area01 h2{
margin: 10px 0 0 0;
padding: 0;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 13px;
line-height: 1.4;
}


.grid-item .text_area_style .layout_style{
margin: 10px 0 0 10px;
}



.grid-item .text_area02{
flex: 1;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-sizing: border-box;

font-size: 13px;
line-height: 1.4;
}

.grid-item .text_area03{
display: block;

flex: 0 0 150px;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-sizing: border-box;

font-size: 13px;
line-height: 1.4;
}

/*hover area とのかねあい*/
.grid-item .text_area03 .layout_style{
position: relative;
z-index: 1;
}

.grid-item .text_area04{
flex: 0 0 150px;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-sizing: border-box;

font-size: 13px;
line-height: 1.4;
}




.grid-item .text_area05{
flex: 0 0 60px;
margin: 0 0 0 0;
box-sizing: border-box;

font-size: 13px;
line-height: 1.4;
}








.grid-item .text_area h2{
margin: 0 0 0 0;
padding: 0;

/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-feature-settings: "kern";
letter-spacing: 0.03em;

font-size: 14px;
line-height: 1.3;
}







}/*PC終了*/





@media screen and (min-width: 768px) and (max-width: 900px) {
/* ここに、画面幅が768px以上 900px以下の場合に適用したいCSSを書きます */

.grid-item .text_area03{
display: none;
}

}