@charset "utf-8";
/* CSS Document */

/* root ------------------------------------------------------------- */
:root {
	--color-primary: #51afa2; /* プライマリカラー：ターコイズ */
}

/* whole style -------------------------------------------------- */
ol, li { list-style: none; }
em, srtong { font-style: normal; }
img { width: 100%; height: auto; }
a.onMousescale img { transform: scale(1.0); transition-duration: 0.25s; }
a.onMousescale:hover img { transform: scale(1.07); transition-duration: 0.25s; }
html { scroll-behavior: smooth; }
body {
	width: 100%; height: 100%;
	text-align: justify;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.5;
	font-weight: 400; font-style: normal;
	letter-spacing: 0.05em;
	background: url("../images/bg_illust_01.png") no-repeat bottom center var(--color-primary);
	background-size: cover;
	-webkit-text-size-adjust: 100%;
}
@media only screen and (min-width: 769px) {
	body { font-size: clamp(16px, 0.665rem + 0.36vw, 0.938rem); }
}
/* PCSP切り替え */
.pc { display: block !important; }
.pc_inl { display: inline !important; }
.sp { display: none !important; }
.sp_inl { display: none !important; }
@media only screen and (max-width: 768px) {
	.pc { display: none !important; }
	.pc_inl { display: none !important; } 
	.sp { display: block !important; }
	.sp_inl { display: inline !important; }
}
@keyframes slideIn {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}


/* styling ---------------------------------------------------------- */
/* FirstView -------------------------------------------------------- */
#EDICWORKS_chatLP {
	position: relative;
}
#EDICWORKS_chatLP #Firstview {
	position: fixed;
	width: calc(100vw - 150px); height: calc(100vh - 150px);
	margin: 75px;
	z-index: 5;
}
#EDICWORKS_chatLP #Firstview header > a { }
#EDICWORKS_chatLP #Firstview header > a img {
	max-width: 230px; height: auto; 
}
#EDICWORKS_chatLP #Firstview > h1 img {
	max-width: 27.5vw; height: auto; 
	margin-top: clamp(30px, 9vh, 90px);
}
#EDICWORKS_chatLP #Firstview > a img {
	max-width: 400px; height: auto; 
	margin-top: clamp(30px, 6vh, 60px);
}

/* モックダミー ------------------------------------------------------- */
#EDICWORKS_chatLP #chatLP_frame {
	float: right;
	margin-right: 80px;
	width: 440px ; height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 10;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */

}
#EDICWORKS_chatLP #chatLP_frame::-webkit-scrollbar {
	  display: none;
}
#EDICWORKS_chatLP #chatLP_frame_bg {
	position: fixed;
	z-index: -9999;
	right: 80px;
	width: 440px; height: 100%;
	-webkit-backdrop-filter: blur(5px);	
	backdrop-filter: blur(5px);
	/* モックの背景色 */
	background: rgb(0 0 0 / 30%);
}
	
@media only screen and (min-width: 1600px) {
	#EDICWORKS_chatLP #Firstview {
		width: calc(100vw - 26vw); height: calc(100vh - 150px);
		margin: 75px 13vw;
	}
	#EDICWORKS_chatLP #chatLP_frame {
		margin-right: 12vw;
	}
	#EDICWORKS_chatLP #chatLP_frame_bg {
		right: 12vw;
	}
}
@media only screen and (min-width: 1500px) and (max-width: 1599px) {
	#EDICWORKS_chatLP #Firstview {
		width: calc(100vw - 300px); height: calc(100vh - 150px);
		margin: 75px 150px;
	}
}
@media only screen and (max-width: 1499px) {
	#EDICWORKS_chatLP #Firstview {
		max-width: 30vw;
	}
	#EDICWORKS_chatLP #chatLP_frame {
		margin-right: 0;
	}
	#EDICWORKS_chatLP #chatLP_frame_bg {
		right: 0;
	}
}
@media only screen and (max-width: 1024px) {
	body#EDICWORKS_chatLP {
		background: url("../images/bg_illust_01.png") no-repeat top 50svh right -52vw var(--color-primary);
	}
	#EDICWORKS_chatLP #Firstview { display: none; }
	#EDICWORKS_chatLP #chatLP_frame {
		margin-right: 0;
		width: 100vw ; height: 100svh;
	}
	#EDICWORKS_chatLP #chatLP_frame_bg {
		right: 0;
		width: 100vw ; height: 100svh;
	}

}