@charset "UTF-8";
html {
-webkit-text-size-adjust: 100%;
}

body {
display: none;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}


/* カテゴリー--------------------------------------------- */


.category-box {
	display: flex;
    flex-flow: column;
    min-height: 100%;
}


.category-box-group{
	width: 100%;
	margin: 0 auto;
	
	@media screen and (min-width: 961px)/*ウィンドウ幅が961px以上の場合に適用*/
{
	background-size: cover;
	height: auto;}
	
	@media screen and (max-width: 960px)/*ウィンドウ幅が（TAB）最大960pxまでの場合に適用*/
{
	background-size: cover;
	height: auto;}
	
	@media screen and (max-width: 767px)/*ウィンドウ幅が（SP）最大767pxまでの場合に適用*/
{
	background-size: cover;
	height: auto;}
}


/* タイトル--------------------------------------------- */


.title_bl {
max-width: 1100px;
align-items: center;
margin-right: auto;
margin-left : auto;
margin-top: 50px;
margin-bottom: 20px;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
width: 100%;
height: auto;
.title_pc {display: block !important; }
.title_sp {display: none !important; }
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 1000px;
width: 90vw;
height: auto;
.title_pc {display: block !important; }
.title_sp {display: none !important; }
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 720px;
width: 100%;
height: auto;
.title_pc {display: none !important; }
.title_sp {display: block !important; }
}
}
	
.title_img{
img {
width: auto;
max-width: 100%;
height: auto;}
}


/* カテゴリーイメージ--------------------------------------------- */


.works_contents {
display : block;
Width:1100px;
justify-content: center;
margin-right: auto;
margin-left : auto;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 1100px;
width: 100%;
height: auto;
.img_pc {display: block !important; }
.img_sp {display: none !important; }
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 1100px;
width: 90%;
height: auto;
.img_pc {display: block !important; }
.img_sp {display: none !important; }
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 700px;
width: 90%;
height: auto;
.img_pc {display: none !important; }
.img_sp {display: block !important; }
}
}

.works_img {
img {
width: auto;
max-width: 100%;
height: auto;
margin-top: 80px;
margin-bottom: 50px;}
}


/* パララックス--------------------------------------------- */


.works_parallax-group {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    height: auto;
}


/* パララックス背景--------------------------------------------- */


.bg-white {/* モバイルファースト式記述 */
    background-image: url(https://humanfactory.net/image/index_img/pbg_a.webp);
    
	@media screen and (max-width: 767px)/*ウィンドウ幅が（SP）最大767pxまでの場合に適用*/
    {
	background-image: url(https://humanfactory.net/image/index_img/pbg_a_sp.webp);}
}

.bg-black {
    background-image: url(https://humanfactory.net/image/index_img/pbg_f.webp);
    
	@media screen and (max-width: 767px)/*ウィンドウ幅が（SP）最大767pxまでの場合に適用*/
    {
	background-image: url(https://humanfactory.net/image/index_img/pbg_f_sp.webp);}
}


/* ポートフォリオ関連ページタイトル--------------------------------------------- */


.connection_bl {
max-width: 960px;
align-items: center;
margin-right: auto;
margin-left : auto;
margin-top: 15px;
margin-bottom: 15px;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 960px;
width:  50vw;
height: auto;
.connection_pc {display: block !important; }
.connection_sp {display: none !important; }
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 680px;
width: 70vw;
height: auto;
.connection_pc {display: none !important; }
.connection_sp {display: block !important; }
}
}
	
.connection_img{
img {
width: auto;
max-width:  100%;
height: auto;}
}


/* ポートフォリオコンテナー--------------------------------------------- */


.container-group-box{
max-width: 960px;
max-height: 1000px;
justify-content: space-between;
align-items: center;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
}


.container-group{
max-width: 960px;
max-height: 1000px;
justify-content: space-between;
align-items: center;
margin: 0 auto;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 960px;
width: 50vw;
height: auto;}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 680px;
width: 70vw;
height: auto;}
}

.container-bl{
display: flex;
max-width: 240;
margin-top: -6px}

.container{
img {
width: auto;
max-width: 100%;
height: auto;}}


.works_titletop_space{
height:20px;
}/*OK*/


/* コンテナー下スペース--------------------------------------------- */


.works_space-bottom{
margin: 100px;}/*OK*/


/* ポートフォリオまとめ--------------------------------------------- */


.portfolio_container-group{
max-width: 680px;
max-height: auto;
align-items: center;
margin-right: auto;
margin-left : auto;
margin-top: 100px;
margin-bottom: 100px;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 960px;
width: 100%;
height: auto;
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 960px;
width: 100%;
height: auto;
}
@media screen and (max-width: 1074px)/*ウィンドウ幅が最大1074pxまでの場合に適用*/
{
max-width: 575px;
width: 90%;
height: auto;
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 100%;
width: 80vw;
height: auto;
}
}

.portfolio_container-bl{
display:flex;
flex-wrap: wrap;
justify-content: center;
}

.portfolio_container{
text-align:center;
margin:0;
}