/*==================================================
ヘッダーが邪魔にならないよう　ふわっと表示　部分
===================================*/
.header-fade {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 901;
  transition: background .8s;/*ヘッダーをふわっと表示*/
}
.header-fade_after{
  background: rgba(255, 255, 255, 1);
}
/*==================================================
ヘッダーが邪魔にならないよう　ふわっと表示　部分
===================================*/


.br-mobile{
  display: none;
}

@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .br-mobile{
    display:block;
  }
  .title-size{
    font-size: 14px;
    margin: 0;
    padding: 0;
  }
}



/*==================================================
メインビジュアルが静止画の場合はコチラ
===================================*/
.works-mainvisual{
  display: flex;
  justify-content: center;
  align-items: center;
}
.works-mainvisual img{
  width: 89vw;
  height: 85vh;
  object-fit: cover;
}
.VR-main-visual{
  width: 100vw;
  height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vr{
  height: 100%;
  aspect-ratio: 9 / 5; /* 5:3 のアスペクト比 */
}
.VR-main-visual img{
  width: 60vw;
  object-fit: cover;
  position: absolute;
  padding: 0;
  margin: 0;
}
.VR-main-visual p{
  color: rgb(255, 255, 255); 
  font-weight: bold;
  position: absolute; 
  top: 40%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  background-color: rgba(170, 170, 170, 0.2);
  border: solid 1px white;
  padding: 10px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 20px;
  z-index: 100;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); /* ドロップシャドウの設定 */
}
.works-mainvisual-ani{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.works-mainvisual-ani iframe{
  width: 87vw;
  height: 80vh;
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .vr{
    height: auto;
    width: 100vw;
    aspect-ratio: 1 / 1.5 /* 5:3 のアスペクト比 */
  }
  .works-mainvisual img{
    width: 100vw;
    height: 40vh;
    object-fit: cover;
  }
  .works-mainvisual iframe{
    width: 100vw;
    height: 40vh;
    object-fit: cover;
  }
  .VR-main-visual{
    width: 100vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .VR-main-visual img{
    width: 100vw;
    object-fit: cover;
    position: absolute;
    padding: 0;
    margin: 0;
  }
  .VR-main-visual p{
    color: white; 
    font-weight: bold;
    position: absolute; 
    top: 28%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    background-color: rgba(170, 170, 170, 0.2);
    border: solid 1px white;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
    z-index: 100;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); 
  }
  .works-mainvisual-ani{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .works-mainvisual-ani iframe{
    width: 100vw;
    height: 26vh;
  }
}
/*==================================================
メインビジュアルが静止画の場合はコチラ
===================================*/



/*==================================================
作品のタイトルやら説明文など
===================================*/
.page-caption-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-caption-layout{
  width: 60vw;
}

.caption-data{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: end;
  text-align:right;
  margin: 0;
  padding: 0;
  line-height: 16px;
}

.page-title h2{
  margin: 0;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 0px;
}
.page-subtitle h1{
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.page-subtitle-2 h3{
  margin: 0;
  padding: 0;
  margin-top: 0px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.page-subtitle-2{
  padding: 0px;
  margin: 0px;
}

@media screen and (min-width: 1025px) {/*--PCだけ--*/
  .page-caption-layout p{
    font-size: 16px;
  }
}

@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .page-caption-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .page-caption-layout{
    width: 100%;
  }
  .caption-data{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    text-align:right;
    margin: 0;
    padding: 0;
    line-height:9px;
  }
  .page-title h2{
    margin: 0;
    padding: 0;
    font-size: 20px;
    margin-top: 20px;
    line-height:25px;
  }
  .page-title span{
    font-size: 14px;
  }
  .page-subtitle h1{
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .page-caption-layout p{
    font-size: 10px;
  }
  .page-subtitle-2 h3{
    margin: 0;
    padding: 0;
    margin-top: 0px;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
  }


}
/*==================================================
作品のタイトルやら説明文など
===================================*/

.web-link p{
  font-size: 12px;
}


/*==================================================
作品羅列　（画像を１列で配置）
===================================*/
.works-img{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.works-img img,
.works-img video {
  width: 60vw;
  margin-top: 40px;
}
.works-img iframe{
  width: 60vw;
  margin-top: 40px;
  aspect-ratio: 5 / 3; /* 5:3 のアスペクト比 */
}
.caption{
  width: 60vw;
  display: flex;
  justify-content: start;
  font-size: 14px;
  margin-top: 5px;
}
.caption p{

}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .works-img{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .works-img img,.works-img video{
    width: 100%;
    margin-top: 20px;
  }
  .works-img iframe{
    width: 100%;
    margin-top: 20px;
    aspect-ratio: 5 / 7; /* 5:3 のアスペクト比 */
  }
  .caption{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
  }
  .works-img p{
    font-size: 11px;
  }
  .contents-caption p{
    font-size: 6.5px;
    padding: 0;
    margin-bottom: 50px;
  }

}
/*==================================================
作品羅列　（画像を１列で配置）
===================================*/



/*==================================================
作品羅列　（画像を２列で配置）
===================================*/
.works-img-double{
  width: 60vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.works-img-d img{
  width: 29vw;
  min-height: 300px;
}
.caption_d{
  display: flex;
  justify-content: end;
}
.yohaku{
  margin: 1vw
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .works-img-double{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 94vw;
  }
  .works-img-d img{
    width: 100%;
    min-height: 10px;
    margin-top: 20px;

  }
  .yohaku{
    margin: 0;
  }
  .works-img-d p{
    display: flex;
    justify-content: end;
    margin: 0;
    padding: 0;
  }
}
/*==================================================
作品羅列　（画像を２列で配置）
===================================*/


/*==================================================
関連ページのレイアウト
===================================*/
.related{
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: rgb(249, 249, 249);
}
.related h6{
  width: 60vw;
  padding: 0;
  margin: 0;
  margin-top: 40px;
  text-align: end;
}
.related-img{
  display: flex;
  justify-content: end;
  align-items: center;
  width: 60vw;
}

.related-img img{
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-right: 0px;
  margin-left: 20px;
  border: 6px solid #FFF;
}
.related-img-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  margin-bottom: 40px;
}
.related-img-text p{
  font-size: 14px;
  text-align: start;
}
.shadow img{
  box-shadow: 0 0 4px #999;
}
@media screen and (max-width: 1024px) {/*--タブレット・モバイル用--*/
  .related{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 15px;
  }
  .related h6{
    font-size: 14px;
    margin: 0;
    margin-top: 15px;
    text-align: center;
  }
  .related-img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .related-img img{
    width: 120px;
    height: 120px;
    margin: 15px;
    margin-left: 5px;
    margin-right: 5px;
  }
}
/*==================================================
関連ページのレイアウト
===================================*/














/*---------------------------モーダル---------------------------*/

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#4d4946;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#4d4946;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}

.size a{
  display: block;
  width: 500px;
  height: 500px;
  background-color: #ff0000;
}



/*---------------------------モーダル---------------------------*/