@charset "UTF-8";



/*top*/

  .container_top {
    display: flex;
    flex-direction: column; /* 要素を縦方向に配置 */
    align-items: center;    /* 子要素を中央揃え */
  }

  .release_set {
    display: flex;             /* フレックスボックスで配置 */
    flex-direction: row;       /* デフォルトでは横並び */
    align-items: center;       /* 中央揃え */
    justify-content: center;   /* 中央揃え */
    text-align: center;        /* テキストの中央揃え */
    margin-top: clamp(0.5rem, 1vw, 1rem); /* 上下の間隔をレスポンシブに調整 */
    font-weight: var(--font-weight-bold);
    color: var(--color-04);
    gap: 1rem; /* 要素間の余白を設定 */
  }

  ._text-icon {
    position: relative;
    display: inline-block; /* テキスト幅に合わせる */
    padding: 0.1rem 0.3rem;
    background-color: var(--color-01);
    text-align: center;
    font-size: clamp(0.7rem, 0.627rem + 0.36vw, 0.9rem);
    border: 1px solid rgba(0, 0, 0, 0.90);
    min-width: 100px;
    color: var(--color-02);
  }

  .release_date {
    font-size: clamp(0.9rem, 0.827rem + 0.36vw, 1.1rem);
  }

  .container_top-link {
    display: block; /* リンク要素をブロック要素に変換 */
    text-decoration: none; /* 下線を削除 */
    color: inherit; /* テキストの色を継承 */
     
  }

  .container_top {
    transition: opacity 0.5s ease, transform 0.5s ease; /* アニメーションの追加 */
  }


.container_top_logo{
    max-width: 1000px;
}

._img-border {
  overflow: hidden; /* はみ出た部分を隠す */
  position: relative; /* 必要に応じて追加（レイヤー制御） */
}

._img-border img.hover-img {
  transition: transform 0.5s ease; /* アニメーションの速度とタイミング */
  width: 100%; /* 親要素に収まるよう調整（必要に応じて） */
  height: auto; /* アスペクト比を維持 */
}

.container_top-link:hover ._img-border img.hover-img {
  transform: scale(1.015); /* ホバー時に画像を5%拡大 */
}

/* ダミー用 */
.container_top-link.dummy {
  visibility: hidden;   /* ← レイアウトには参加する */
  pointer-events: none; /* ← クリック不可 */
}

@media (max-width: 767px) {
  .release_set {
    flex-direction: column; /* 縦方向に並べる */
    align-items: center;    /* 横中央揃え */
    text-align: center;     /* テキスト中央揃え */
    gap: 0.5rem;            /* 縦並び時の要素間の余白 */
  }

  ._text-icon {
    margin-bottom: 0; /* 縦並び時の余計なマージンを削除 */
  }
}






/*films*/




.container_top-link.__films{
   width:22%;  
}


.films_item_title{
    font-weight: var(--font-weight-bold);
    color: var(--color-04);
     font-size:clamp(0.8rem, 0.727rem + 0.36vw, 1rem);
    text-align: center;
}



.__films.__mt{
    margin-top:0rem;
}



@media (max-width: 767px) {
    
.container_top-link.__films {
    width:48%; 
     
    }
    
    .__films.__mt{
    margin-top: 3rem;
}
    
    
}




/*films_detail*/


.films_detail_img{
    position: relative;
    width:40%;
    
}

.films_detail_text{
      position: relative;
    width:55%;
  
}


.films_detail_text .__title {
	font-family: var(--title-font-family);
	font-size: var(--title-font-size);
	text-align: left;
	color: var(--color-02);
	font-weight: var(--title-font-weight);
	letter-spacing: 0.1rem;
	line-height: 1.8;
}

.films_subtitle{
    font-size: var(--font-size-default2);
    color: var(--color-07);
    line-height: 1.6;
    margin-top: 0rem;
     padding-bottom: 1rem;
    position: relative;
    border-bottom: 1px solid hsla(0,0%,0%,0.2);
}


.films_subtitle2{
   font-size: var(--font-size-default2);
    color: var(--color-04);

}


.films__snsicon_item{
	width: 36px;
	margin:0 10px;
}


@media (max-width: 767px) {
    
  .films_detail_img{
  
    width:100%;
    
}

.films_detail_text{
     width:100%;
      margin-top: 4rem;
}
    

    
}



/*about*/


.about_img{
    position: relative;
    width:35%;
    
}

.about_text{
   position: relative;
    width:60%;
    
}

.about_title2{
    text-align: center;
    color:var(--color-04);
}


@media (max-width: 767px) {
    
    .about_title2{
    text-align: left;
 
}
    
    
   .about_img{
    position: relative;
    width:100%;
    
}

.about_text{
   position: relative;
     width:100%;
   
} 
    
}