@charset "UTF-8";

/* 動画を囲むdivに対して中央揃えを設定 */
.video-container {
    position: relative;
	left: -40px;
    width: 100vw; /* ビューポートの幅 */
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center;     /* 垂直方向に中央揃え */
	margin-top: -60px; /* 上部の余白を縮める */
	 margin: 0;
    padding: 0;
}

/* 動画のサイズを制限して画面内に収める */
.video-container video {
    max-width: 100%;  /* 動画が画面の幅を超えないように設定 */
    max-height: 100%; /* 動画が画面の高さを超えないように設定 */
}



/*===並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
	margin-top: 50px;
}

.sort-btn li{
	list-style: none;
	cursor: pointer;
	paddeing: 10px;
	margin: 0 10px;
}

/*ボタンに現在地=activeというクラス名が着いたら背景色を変更*/
.sort-btn li.active{
    color: gray; /* 文字色をグレーに設定 */
    /* 必要に応じて、背景色の指定を削除または透明に設定 */
    background-color: transparent;
}

/*横幅が488px以下になった際の指定*/
@media only screen and (max-width: 480px)
{
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width: 48%;
	margin: 0 0 10px 0;
	text-align: left;
}
	
}

/*===Muuriのレイアウトのための調整*/
.grid {
	position: relative;/*並べ替えの基準点を指定*/
}
	
/*各画像の横幅などの設定*/
.item{
   display: block;
	position: absolute;
	list-style: none;
	width: 33%;/*横並びで３つ表示*/
	z-index:1;
}
	
/*内側のボックスの高さが崩れないように維持*/
	.item-content{
	position: relative;
	width: 100%;
	height: 100%;
	}
	
/*画像の横幅を100%にしてレスポンシブ化*/
	.grid img{
		width: 100%;
		height: auto;
		vertical-align: bottom;/*画像の下にできる余白を削除*/
	}

	/*横幅が768px以下になった際の指定*/
	@media only screen and (max-width: 768px)
	{
		.item{
	width: 49.5%;/*横並びが2つ表示*/
	}	
	}
	

.work_wrapper{
	 margin-top:150px;
	text-align:center;
	width:100%;
		padding-left: 7%;
	padding-right: 7%;
}

.work_wrapper img{
	 margin-bottom:50px;
	 max-width: 100%;
}

.textspace{
	height: 200px;
	display: flex;
	margin-bottom:50px;
}

.textspace_left{
  width:40%;
  text-align: left;
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  font-size: 0.6rem;
	margin-left: 15px;
}

.textspace_left:before {
  margin: 0 1rem;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #000;
  position: absolute;
  left: -6%;
  top:0%;
}


.textspace_left:after {
  margin: 0 1rem;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #000;
  position: absolute;
  left: 70%;
  top:0%;
}

.textspace_right{
	text-align: justify;
	width:60%;
	font-family: 'Noto Sans JP', sans-serif;
  line-height: 2;
  font-size: 0.7rem;
}

.relatedworks{
	display: flex;
    justify-content: space-between;
	margin-bottom: 50px;
}

.relatedworks img {
max-width: 100%; /* 画像がコンテナをはみ出さないようにする */
	}

.relatedworks a {
  flex-basis: calc(33.33% - 20px); /* 画像の幅を均等に分配（20pxの隙間を差し引く） */
  margin-right: 20px; /* 右側の隙間を20pxに設定 */
}

.relatedworks a:last-child {
  margin-right: 0; /* 最後の画像の右側の隙間を0に設定 */
}

@media (max-width: 767px) {
    .textspace {
        flex-direction: column;
        height: auto;
        padding: 0; /* 余分なパディングを削除 */
    }

    .textspace_left, .textspace_right {
        width: 100%;
        margin-left: 0;
        padding: 0; /* 余分なパディングを削除 */
        position: relative;
    }

    .textspace_left:before {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #000;
        position: absolute;
        left: -15px; /* 左端から15pxずらして開始 */
        top: -10px; /* 文字ボックスの10px上に配置 */
    }

    .textspace_left:after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #000;
        position: absolute;
        left: -15px; /* 左端から15pxずらして開始 */
        top: 100%; /* ボックスの下端に配置 */
        margin-top: 10px; /* 下端から10px下に配置 */
    }

    .textspace_right {
        margin-top: 30px; /* 下のボックスとの間隔を確保 */
    }
}