@charset "UTF-8";

/*common-reset*/


.mainContents {
margin-bottom: 0px;
	
 position: relative; 
 width: 100%;
 height: auto;
	
}



/*背景固定*/


.bg-wrapper{
	position: fixed;
	width: 100%;
	top: 0;
	background-image: url(../img/about/intro_base.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: hsla(0,0%,0%,0);
	/*background-attachment: fixed;*/
	height: 100vh;
	z-index: 0;
}


.scroll-contents {
    position:relative;
    margin: auto;
    left: 0;
    right: 0;
    overflow: hidden;
	/*max-width: 1000px;*/
	width:100%;
    z-index: 10;
	height:auto;
	

}


@media screen and (max-width: 767px) {
	
	.bg-wrapper{
    position: fixed;
    width: 100%;
    top: 0;
    background-image : none;
}
    
    
      .bg-wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../img/about/intro_base_sp.webp) center no-repeat;
    background-size: cover;
    }
    
    
    .scroll-contents {

}
	

	
}




/*top設定*/


.about__layer{
	 position: absolute;
    line-height: 0;
	 top:0;
	left:0;
}


.about__layer_first{
	 position: absolute;
    line-height: 0;
	 top:0;
	left:0;
	opacity: 0;
}


:root {
  --img-width-about: 1920;
   --img-height-about: 1080;
	
	--img-width-about-sp: 1200;
   --img-height-about-sp: 2002;
}


#introduction{
position: relative;
	top:0;
	left: 0;
}


/*#about_01,
#about_02{
   opacity: 0; 
    
}
*/

/*#about_01{
	width:calc(100% * (825 / var(--img-width-about)));
	left:calc(100% * (547 / var(--img-width-about)));
	top:calc(100% * (284 / var(--img-height-about)));	
}


#about_02{
	width:calc(100% * (1567 / var(--img-width-about)));
	 left:calc(100% * (180 / var(--img-width-about)));
	  top:calc(100% * (354 / var(--img-height-about)));	
}
*/




/*#about_03{
	width:calc(100% * (1920 / var(--img-width-about)));
	 left:calc(100% * (0 / var(--img-width-about)));
	  top:calc(100% * (1157 / var(--img-height-about)));	
}



#about_04{
	width:calc(100% * (1920 / var(--img-width-about)));
	 left:calc(100% * (0 / var(--img-width-about)));
	  top:calc(100% * (1709 / var(--img-height-about)));	
}

#about_05{
	width:calc(100% * (1920 / var(--img-width-about)));
	 left:calc(100% * (94 / var(--img-width-about)));
	  top:calc(100% * (2506 / var(--img-height-about)));	
}*/




@media screen and (max-width: 767px) {
	
/*#about_01{
	width:calc(100% * (1164 / var(--img-width-about-sp)));
	 left:calc(100% * (22 / var(--img-width-about-sp)));
	  top:calc(100% * (496 / var(--img-height-about-sp)));	
}
	
#about_02{
	width:calc(100% * (1200 / var(--img-width-about-sp)));
	 left:calc(100% * (0 / var(--img-width-about-sp)));
	  top:calc(100% * (724 / var(--img-height-about-sp)));	
}*/

/*#about_03{
	width:calc(100% * (1200 / var(--img-width-about-sp)));
	 left:calc(100% * (0 / var(--img-width-about-sp)));
	  top:calc(100% * (1646 / var(--img-height-about-sp)));	
}
	
	
#about_04{
	width:calc(100% * (1200 / var(--img-width-about-sp)));
	 left:calc(100% * (0 / var(--img-width-about-sp)));
	  top:calc(100% * (3750 / var(--img-height-about-sp)));	
}
	
#about_05{
	width:calc(100% * (1200 / var(--img-width-about-sp)));
	 left:calc(100% * (0 / var(--img-width-about-sp)));
    
	  top:calc(100% * (5609 / var(--img-height-about-sp)));	
}
	*/



	
	
}






/* ===========================
   introduction section
   =========================== */

#introduction > div[id^="about_"]{opacity:0;visibility:hidden;}

/* セクションは画面サイズ分の見た目を維持 */
#introduction{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
/*  background: #000;*/ /* 任意 */
}

/* 子は絶対配置。個別の top/left/right/bottom/width は各IDで指定 */
#introduction > div[id^="about_"]{
  position: absolute;
  opacity: 0;                 /* JSで表示制御 */
  will-change: opacity, transform;
  pointer-events: none;       /* 必要ならクリック透過 */
}

/* 画像のフィット */
#introduction picture, #introduction img{
  width: 100%;
  height: auto;
  display: block;
}

/* 低視覚移動 */
@media (prefers-reduced-motion: reduce){
  #introduction{ min-height:auto; }
  #introduction > div[id^="about_"]{ position: static; opacity:1 !important; transform:none !important; }
}



#scroll{   position: absolute; width:5%;  top:15%; left:0; right:0;  margin:auto; z-index:30; }

#about_00{ width:100%; top:35%; left:0%;  z-index:5; }

#about_01{ width:32%;  top:13%; left:3%;  z-index:10; }
#about_02{ width:28%;  top:60%; left:5%;  z-index:20; }

#about_03{ width:6%;  top:60%; left:0; right:0;  margin:auto; z-index:20; }

#about_04{ width:25%;  top:15%; right:4%;  z-index:15; }
#about_05{ width:28%;  top:60%; right:0%;  z-index:20; }

#about_06{ width:40%;  top:20%; left:0; right:0;  margin:auto; z-index:30; }
#about_07{ width:3%;  top:35%; left:0; right:0;  margin:auto; z-index:30; }
#about_08{ width:40%;  top:46%; left:0; right:0;  margin:auto; z-index:30; }

#about_09{ width:30%;  top:67%; left:0; right:0;  margin:auto; z-index:30; }

#about_10{ width:7%;  top:20%; left:0; right:0;  margin:auto; z-index:30; }
#about_11{ width:50%;  top:30%; left:0; right:0;  margin:auto; z-index:30; }
#about_12{ width:80%;  top:75%; left:0; right:0;  margin:auto; z-index:30; }
#about_13{ width:100%; top:0; left:0; right:0; z-index:9; }




@media screen and (max-width: 767px) {
    
    
    #scroll{   position: absolute; width:20%;  top:30%; left:0; right:0;  margin:auto; z-index:30; }
    
#about_00{ width:105%; top:10%; left:0%;  z-index:5; }

#about_01{ width:55%;  top:12%; left:-12%;  z-index:10; }
#about_02{ width:50%;  top:30%; left:3%;  z-index:20; }

#about_03{ width:13%;  top:20%; left:0; right:0;  margin:auto; z-index:20; }

#about_04{ width:42%;  top:12%; right:-11%;  z-index:15; }
#about_05{ width:47%;  top:33%; right:-15%;  z-index:20; }

#about_06{ width:90%;  top:52%; left:0; right:0;  margin:auto; z-index:30; }
#about_07{ width:7%;  top:61%; left:0; right:0;  margin:auto; z-index:30; }
#about_08{ width:90%;  top:68%; left:0; right:0;  margin:auto; z-index:30; }

#about_09{ width:80%;  top:80%; left:0; right:0;  margin:auto; z-index:30; }

#about_10{ width:20%;  top:25%; left:0; right:0;  margin:auto; z-index:30; }
#about_11{ width:80%;  top:31%; left:0; right:0;  margin:auto; z-index:30; }
#about_12{ width:90%;  top:85%; left:0; right:0;  margin:auto; z-index:30; }
#about_13{ width:100%; top:0; left:0; right:0; z-index:9; }  
    
}





/*cast*/

#cast{
    background-image: url(../img/cast/intro_00.png);
    background-repeat: no-repeat;
    background-position: center 63%;
    background-size: 100% auto;
}

.cast-large{
    width:100%;
    max-width: 1200px;
}

.cast-small{
    width:70%;
    max-width:900px;
}

.cast-item {
  width: 32%;
  border: 8px solid #000000;
 /* transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border 0.3s ease; */
  /* transformはオリジナル感のあるeasingに */
}

.cast-item:hover {
  border: 8px solid var(--color-07);
  transform: scale(1.07);
}


@media (max-width: 767px){
    
    #cast{
    background-image: url(../img/cast/intro_00.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
    
    .flex-main{
          justify-content: center;
    } 
    
    .cast-small{
    width:100%;
        padding:0 5px;
    max-width:100%;
}
    
.cast-item {
  width:50%;
     border: 4px solid #000000;
  border:5px solid #000000; 
/*    margin-top:10px;*/
}
    
    .cast-item2 {
  width: 32%;
   border: 0px solid #000000;
}

.cast-item:hover {
  border: 4px solid var(--color-07);
  transform: scale(1.3);
}
    
    
}


/* モーダル内の画像をきれいにフィット */
.cast__modaal .modaal-content-container {
  padding: 0; /* 余白をなくす（好みで） */
}
.cast-modal__picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* モーダルの最大幅を広げる（最大800pxまで） */
.cast__modaal .modaal-container {
  max-width: 90vw;   /* 画面幅の90% */
  width: 1200px;      /* PCでは最大800px */
}
/* モーダル内の画像をフィット＆基準を作る */
.cast__modaal .modaal-content-container{
  position: relative;  /* ← クローズボタンのabsolute基準 */
  padding: 0;
}
.cast__modaal .cast-modal__picture img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;   /* ← デフォルトの制限を解除 */
}

/* クローズボタンを画像右上に重ねる（大きめ） */
.cast__modaal .modaal-close{
  position: absolute;
  top: 12px;      /* 画像の内側に余白を残す */
  right: 12px;
  width: 64px;    /* 大きめサイズ */
  height: 64px;
  background: url('../img/cast/close_icon.png') no-repeat center center;
  background-size: contain;
  text-indent: -9999px;     /* テキストは視覚的に非表示 */
  overflow: hidden;
  border: none;
  outline: none;
  z-index: 5;               /* 画像より前面 */
  cursor: pointer;
  transition: transform .25s ease, opacity .25s ease;
}
.cast__modaal .modaal-close:hover,
.cast__modaal .modaal-close:focus{
  transform: scale(1.06);
  opacity: .85;
}

/* モバイルは少し小さく・余白も詰める */
@media (max-width: 767px){
  .cast__modaal .modaal-close{
    top: 8px;
    right: 8px;
    width: 48px;
    height: 48px;
  }
}





/*castモーダル*/