@charset "utf-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden="until-found"])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable;interpolate-size:allow-keywords;line-height:1.5}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:inherit;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;font-feature-settings:inherit;font-variation-settings:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role="button"],[role="option"]){cursor:pointer}:where(:disabled,label:has(>:disabled,+:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog,[popover]){border:none;background:none;color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important;user-select:none!important}


/*************************************************************************************************************/

body{
	overflow-x: hidden;
	background-color: #000;
	margin: 0 0 5em 0 ;
}

.swiper {
	width: 50%;
	height: auto;	
	margin: 5% 0 ;
}

.swiper  img{	width: 100%;}
.swiper .swiper-pagination{	bottom:20px !important;}
.swiper .swiper-pagination-bullet {	background-color:#fff;}

.connect{
	position: relative;
	height: 100vw;
}

.glitch-img {
   position: absolute; 
   width : 100%; 
   height : 100%; 
   top: 0 ; 
   left : 0; 
   background-position:center;  
   -moz-background-size:cover;
   -o-background-size:cover;
   -webkit-background-size:cover;
   background-size:cover;
   opacity : 1
 } 

.connect01{
	background-image: url("../narrative/narrative_0/connect1.gif");
	background-position: center;
	background-repeat: no-repeat;
	width: 100vw;
	height:  100vw;
}
.connect02{
	background-image: url("../narrative/narrative_0/connect2.gif");
	background-position: center;
	background-repeat: no-repeat;
	width: 100vw;
	height:  100vw;
}

.connect img{	width: 100vw;}
input {  display: none;}

label {
	width: 20%;
	height: auto;
	margin: 0 auto;
	display: block;
	text-align: center;
	cursor: pointer;
}

.content {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  overflow: hidden;
}
.content p {
  margin: 0;
  padding: 1em;
}

input:checked ~ .content {
  max-height:600em;
  opacity: 1;
  visibility: visible;
}

.link{	
	position: relative;
	width: 20em;
	height: 60em;
	margin:  0 auto;
}
.link01 {
	background-image: url("../narrative/narrative_0/link01.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
	margin: 0 auto;
	text-align: center;
	padding: 50em 0 0 0 ;
	}
.link01  img{	width: 100%	;}

.white{
	text-align: center;
	width: 100vw;
	padding: 10em 0 20em 0 ;
	background-image: linear-gradient(#ffffff 80%, #000000);
}
.black{
	text-align: center;
	width: 100vw;
	padding: 10em 0 20em 0 ;background-color: #000;
}
.talk01{
	text-align: center;
	width: 100vw;
	padding: 10em 0 50rem 0 ;
	background-image: linear-gradient(#ffffff 94%, #000000);
}
.talk02{
	text-align: center;
	width: 100vw;
	padding: 10em 0 ;
}
.talk01 img, .talk02 img{width: 100%;}

.pc{display: block;}
.sp{display: none;}

	
@media screen and (max-width: 751px){
	
	.pc{display: none;}
	.sp{display: block;}
		
	.swiper {	width: 100%; }	
	.swiper  img{	width: 100%;}	
	.connect{
		position: relative;
		height: 40em;
	}
	.connect01{
		background-size: 200%;
		width: 100%;
		height:  40em;
	}
	.connect02{
		background-size: 200%;
		width: 100%;
		height:  40em;
	}
	label {
		  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	label img {		width: 10em	;	}
	.link{	
		position: relative;
		width: 40%;
		height: 40em;
		margin:  0 auto;
	}	
	.link01 {
		background-image: url("../narrative/narrative_0/link01.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
		margin: 0 auto;
		text-align: center;
		padding:27em 0 0 0 ;
		}	
	.link01  img{	width: 100%	;}
	
	.talk01{
		padding: 10em 0 10rem 0 ;
		background-image: linear-gradient(#ffffff 94%, #000000);
	}
}


/******************************************************************************************************************/


.e_memo{
	background-image: url("../narrative/narrative_0_2/e_memo01.png"), url("../narrative/narrative_0_2/e_memo02.png");
	background-position: top center, bottom center;
	background-size: contain;
	background-repeat: no-repeat;
	padding:8em 8% 4em 8%;
	width: 70%;
	margin: 0 auto;
	text-align: left;
}

.e_memo p{	margin: 0 0 2em 0;}
.e_memo .memo_naka{	text-align: center;}


.e_talk{
	background-image: url("../narrative/narrative_0_2/e_talk01.png"), url("../narrative/narrative_0_2/e_talk02.png");
	background-position: top center, bottom center;
	background-size: contain;
	background-repeat: no-repeat;
	padding:8em 8% 4em 8%;
	width: 70%;
	margin: 20em auto 10em auto;
}
.e_talk02{
	width: 70%;	
	margin: 0 auto;
}


.flex01{
	text-align: left;
    display: flex;
	align-items: flex-end;
}
.flex02{
	text-align: left;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.faceicon img{
	width: 3em;
	height: auto;
}
.fukidashi-l,.fukidashi-r{
	width: 50%;
	display: flex;
	position: relative;
	border-bottom: 1px solid #333333;
}
.fukidashi-l {	margin: 0 0 4em 2em;}
.fukidashi-r {	margin: 0 2em 4em 0;}

.fukidashi-r::before,.fukidashi-l::before {
    content: "";
    position: absolute;
    bottom: -13px;
    width: 30px;
    height: 1px;
    box-sizing: border-box;
    background-color: #333333;
  }

.fukidashi-r::before{
    right: -1.5em;
    rotate: 50deg;
  }
.fukidashi-l::before {
    left: -1.5em;
    rotate: -50deg;
  }

.fukidashi-r::after,.fukidashi-l::after {
    content: "";
    position: absolute;
    bottom: -28px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #333333;
  }
.fukidashi-r::after{    right: -1.4em;  }
.fukidashi-l::after {    left: -1.4em;  }

/******************************************************************************************************************/

.black .fukidashi-l,.black .fukidashi-r{color: #fff;	border-bottom: 1px solid #FFFFFF;}
.black .fukidashi-r::before,.black .fukidashi-l::before {    background-color: #fff;  }
.black .fukidashi-r::after,.black .fukidashi-l::after {    background-color: #fff;  }

	
@media screen and (max-width: 751px){
	
	.e_memo{
		padding:3em 8%;
		width: 94%;}	
	.e_talk{	
		padding:4em 10% ;
		width: 94%;}	
	.flex01,.flex02{	margin: 0 0 3em 0;}
	.fukidashi-l,.fukidashi-r{	width: 100%;}

 }


/******************************************************************************************************************/

.ml_intro{
	color: #fff;
	width: 600px;
	margin: 3em auto;
}
.ml_intro01 p{
	color: #545454;
	margin: 0 0 0.3em 0;
}
.ml_intro label{
	text-decoration: underline;
	color: #fd3447;
	width: 100%;
	margin: 0 0 0.3em 0;
	text-align: left;
}
.ac-label{    display: block;}

.ac-content{
    height: 0;
    opacity: 0;
    padding: 0;
    transition: .5s;
    visibility: hidden;
}
.ac-check:checked + .ac-label + .ac-content{
    height: 45em;
    opacity: 1;
    visibility: visible;
}

.ml_report{
	padding:2vw ;	
	background-color: #000;}

.ml_report img{	width: 100%;}

.ml_report_window{
	width: 600px;
	height: 500px;
	margin: 3em auto;
	padding: 1em 0;
	border: 1px solid #fff;
	background-image:url("../narrative/ml_report_window.png");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
}

.ml_report_contents{
	height: 410px;
	margin: 4em 1% 0 1%;
	overflow: hidden scroll ;
  scrollbar-color:  #fff #000;
}
.ml_report_contents table{
	margin: 1em auto;
	border-collapse:  collapse;
	border: 1px solid #fff;
}
.ml_report_contents th{		padding: 0.2em;}
.ml_report_contents td{	
	border: 1px solid #fff;
	text-align: center;
}
.ml_report_contents .right_text{	text-align: right;}

.noise-lines {
	padding: 0.5em;
	inset: 0;
	background: repeating-linear-gradient(
      0deg,
      rgba(200,200,200,0.25) 0px,   /* ラインを濃くする */
      rgba(200,200,200,0.25) 2px,   /* ラインの太さ */
      rgba(0,0,0,0) 5px             /* ライン間隔 */
  );
  animation: noiseMove 3s linear infinite;
}

@keyframes noiseMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 300px; }
}

.ml_report_flex{
	display: flex;
	gap:2%;
}
.ml_report_flex .left{	width: 62%;}
.ml_report_flex .right{	width: 25%;}

.ml_report h3 {
	height: auto;
	width: auto;
	background-image:none;
	padding:2em 0 0.5em 0;
	margin: 0 0 0.5em 0 ;
	text-align:left;
	border-bottom: 4px solid #fff;
}

.ml_report .error{
	cursor: not-allowed;
	text-decoration: underline;
}

.ml_report hr{	margin: 1em 0;}

.ml_report_frame{
	background-color:rgba(255, 255, 255, 0.5);
	color: #000;
	margin: 1em;
	padding: 1em;
}
.ml_report_frame p{	margin: 0 0 1em 0 ;}

.related01 h3 {
	text-align: center;
	border: none;
}
.related02{	
	background-color:#585858;
	border: 1px solid #fff;	
	display: flex; 
	gap:1em;
	margin: 1em 0;
	padding: 0.2em 0.2em 0 0.2em;
}
.related02 p {font-size:75%;}
.related02 p  img{width: 5em; height: auto;}
.related03 {text-align: center;}



@media screen and (max-width: 751px){

	.ml_report_window,.ml_intro{
		width: 98%;
		font-size: 80%;
	}
	.ml_report_contents{	height: 86%;}	
	.ml_report_flex{		display: block;}	
	.ml_report_flex .left{	width: 100%;}	
	.ml_report_flex .right{	
		width: 80%;
		margin: 1em auto;
	}
}