@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{
	user-select: none;
	background-color: #03B;/*デフォインク色*/
	/*background-color: #D0D;*/
	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(200%) */
	/*filter: sepia(0.1) saturate(200%) hue-rotate(220deg)*/
}

.area{
	/*border: 2px solid #FF06;  エリアボーダー; */
	position: absolute;
	min-width: 30px;
	min-height: 30px;
	font-size: medium;/*子要素で使用するデフォルト文字サイズ; */
}
.text{
	position: absolute;
	text-align: center; 
	top: 0;
	left:0;
	border: 1px solid #FFF;
	background: #000A;
	color: #FFF;
	padding: clamp(1px, 0.3em, 1vw);
	font-size: clamp(4px, 1em, 1.8vw);

	z-index: 10;

	user-select: text;
}
.intext{/*エリア内 インラインテキスト */
	position: absolute;
	text-align: center; 
	top: 0;
	left:0;
	width:100%;
	font-size: clamp(4px, 1em, 1.8vw);
	z-index: 9;
	display: block;
	user-select: text;
	mix-blend-mode:multiply;
}
.inimg{/*エリア内 インラインイメージ */
	position: absolute;
	text-align: center; 
	top: 0;
	left:0;
	width:100%;
	color: #FFF;

	z-index: 9;
}
/* スマホ */
@media (max-width: 768px) {

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

.page{
	margin:0 0.5vw 1.2vw;
}
}