@charset "UTF-8";

/*全体色宣言、変数宣言
:root {
	color: #FFF;
	background-color: #444;
}*/
body{
	margin: 0;
	background-color: #222;
}


.spread {
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	height: auto;
	margin:0 6px 10px;
	
	/*flex-direction:row ; 横向き 初期値*/
}
.page{
	
	background-color: rgb(1, 34, 185);
	position: relative;
	display: flex;
	align-items: center;
}
.page2{
	
	background-color: rgb(213, 0, 145);
	position: relative;
	display: flex;
	align-items: center;
}
.ink {
	position: absolute;
	top: 0px;
	left: 0px;
	
	height: auto;
	width: 100%;
	max-width: 720px;
	/*min-width: 200px;*/
	mix-blend-mode: screen;
}
.tex{
	display: block;
	height: auto;
	width: 100%;
	max-width: 720px;
	mix-blend-mode:multiply;
	filter: sepia(0.1) hue-rotate(280deg);/* saturate(150%) */
}
.tex2{
	display: block;
	height: auto;
	width: 100%;
	max-width: 720px;
	mix-blend-mode:multiply;
	filter: sepia(0.1) hue-rotate( 130deg);/* saturate(150%) */
}
.tex3{
	display: block;
	height: auto;
	width: 100%;
	max-width: 720px;
	mix-blend-mode:multiply;
	filter: sepia(0.1) hue-rotate(100deg) ;/* saturate(150%) */
}
.area {
	border: 0px solid rgba(255, 255, 254, 0.4);
	position: absolute;
	min-width: 30px;
	min-height: 30px;
	font-size: medium;/*子要素で使用するデフォルト文字サイズ */
}
.text {
	position: absolute;
	top: 0;
	left:0;

	background: rgba(34, 34, 34, 0.7);
	color: #eaeaea;
	padding: clamp(1px, 0.3em, 1vw);
	border: 1px solid rgb(000);
	/*border-width: 1px;
	border-color:#FFF;*/
	font-size: clamp(4px, 1em, 1.8vw);

	z-index: 10;

	user-select: text;
}

a{
	 color: rgb(213, 242, 253); 
	 text-decoration: none;
}

/* スマホ */
@media (max-width: 768px) {
#gallery {
	/*gap: 20px;*/
}

.spread {
	flex-direction: column-reverse; 
	height: auto;
	margin: 0;
}

.page {
	margin:0 0.5vw 1.2vw;
}
.pageimg {
	width: 100%;
	/*min-width: 200px;*/
	height: auto;
}
}