/* 通常の画像 */


p>img.4x3 {
	cursor:			pointer;
}
p>img.3x4 {
	cursor:			pointer;
}
p>img.16x9 {
	cursor:			pointer;
}
p>img.9x16 {
	cursor:			pointer;
}

img.smallable {
	max-width: fit-content(90vw);
	height: auto;
}

/* チャットのクローズアップ */

p.img0x0chat {
	--org-width:	1200px;
	--org-height:	900px;
	--crop-left:	15px;
	--crop-top:		620px;
	--crop-right:	435px;
	--crop-bottom:	855px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}


p.img800x600chat {
	--org-width:	800px;
	--org-height:	600px;
	--crop-left:	10px;
	--crop-top:		414px;
	--crop-right:	300px;
	--crop-bottom:	564px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

p.img800x600half {
	--org-width:	800px;
	--org-height:	600px;
	--crop-left:	10px;
	--crop-top:		464px;
	--crop-right:	300px;
	--crop-bottom:	564px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

/*	p.img1024x768chat {		}
	org	1024	768
	topleft	12	580
	bottomright	300	732
*/			

p.img1024x768chat {		/*	900	*/
	--org-width:	1024px;		
	--org-height:	768px;		
	--crop-left:	12px;		
	--crop-top:	580px;		
	--crop-right:	300px;		
	--crop-bottom:	732px;		
	position:	relative;		
	width:	calc(var(--crop-right) - var(--crop-left));		
	height:	calc(var(--crop-bottom) - var(--crop-top));		
}				


/*	p.img1024x768half {		}
	org	1024	768
	topleft	12	630
	bottomright	300	732
*/			

p.img1024x768half {		/*	900	*/
	--org-width:	1024px;		
	--org-height:	768px;		
	--crop-left:	12px;		
	--crop-top:	630px;		
	--crop-right:	300px;		
	--crop-bottom:	732px;		
	position:	relative;		
	width:	calc(var(--crop-right) - var(--crop-left));		
	height:	calc(var(--crop-bottom) - var(--crop-top));		
}				


/* *チャットプラスアルファ */

p.img800x600chatitem {
	--org-width:	800px;
	--org-height:	600px;
	--crop-left:	0px;
	--crop-top:		300px;
	--crop-right:	300px;
	--crop-bottom:	600px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

p.img800x600chatbuy {
	--org-width:	800px;
	--org-height:	600px;
	--crop-left:	0px;
	--crop-top:		50px;
	--crop-right:	350px;
	--crop-bottom:	420px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

p.img1024x768chatitem {
	--org-width:	1024px;
	--org-height:	768px;
	--crop-left:	0px;
	--crop-top:		470px;
	--crop-right:	300px;
	--crop-bottom:	768px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

p.img1024x768chatbuy {
	--org-width:	1024px;
	--org-height:	768px;
	--crop-left:	0px;
	--crop-top:		0px;
	--crop-right:	350px;
	--crop-bottom:	578px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

/* 画面中央のクローズアップ */

p.img800x600spot {
	--org-width:	800px;
	--org-height:	600px;
	--crop-left:	150px;
	--crop-top:		150px;
	--crop-right:	650px;
	--crop-bottom:	450px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

/*	p.img1024x768spot {		}
	org	1024	768
	topleft	212	184
	bottomright	812	584
*/			
p.img1024x768spot {		/*	900	*/
	--org-width:	1024px;		
	--org-height:	768px;		
	--crop-left:	212px;		
	--crop-top:	184px;		
	--crop-right:	812px;		
	--crop-bottom:	584px;		
	position:	relative;		
	width:	calc(var(--crop-right) - var(--crop-left));		
	height:	calc(var(--crop-bottom) - var(--crop-top));		
}				

p.img800x600spotwide {			/* width 600 */
	--org-width:	800px;
	--org-height:	600px;
	--crop-left:	100px;
	--crop-top:		100px;
	--crop-right:	700px;
	--crop-bottom:	500px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

/*	p.img1024x768spotwide {		}
	org	1024	768
	topleft	200	100
	bottomright	824	668
*/			
p.img1024x768spotwide {		/*	900	*/
	--org-width:	1024px;		
	--org-height:	768px;		
	--crop-left:	200px;		
	--crop-top:	100px;		
	--crop-right:	824px;		
	--crop-bottom:	668px;		
	position:	relative;		
	width:	calc(var(--crop-right) - var(--crop-left));		
	height:	calc(var(--crop-bottom) - var(--crop-top));		
}				

/* 画面左右 */

p.img800x600left {			/* width 350 */
	--org-width:	400px;
	--org-height:	300px;
	--crop-left:	0px;
	--crop-top:		0px;
	--crop-right:	350px;
	--crop-bottom:	250px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}
p.img800x600right {			/* width 350 */
	--org-width:	400px;
	--org-height:	300px;
	--crop-left:	50px;
	--crop-top:		0px;
	--crop-right:	400px;
	--crop-bottom:	250px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

/*	p.img1024x768left		}
	org	1024	768
	topleft	0	0
	bottomright	600	450
*/			
p.img1024x768left		/*	900	*/
	--org-width:	1024px;		
	--org-height:	768px;		
	--crop-left:	0px;		
	--crop-top:	0px;		
	--crop-right:	600px;		
	--crop-bottom:	450px;		
	position:	relative;		
	width:	calc(var(--crop-right) - var(--crop-left));		
	height:	calc(var(--crop-bottom) - var(--crop-top));		
}				



/* Smartphone < 960px, fit to 500px  */
@media screen and (max-width: 960px) { /* Tablet Virtical */

	p.img1024x768chat {		/*	500	*/
		--org-width:	1024px;		
		--org-height:	768px;		
		--crop-left:	12px;		
		--crop-top:	580px;		
		--crop-right:	300px;		
		--crop-bottom:	732px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				

	p.img1024x768half {		/*	500	*/
		--org-width:	1024px;		
		--org-height:	768px;		
		--crop-left:	12px;		
		--crop-top:	630px;		
		--crop-right:	300px;		
		--crop-bottom:	732px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768spot {		/*	500	*/
		--org-width:	853px;		
		--org-height:	640px;		
		--crop-left:	177px;		
		--crop-top:	153px;		
		--crop-right:	677px;		
		--crop-bottom:	487px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768spotwide {		/*	500	*/
		--org-width:	821px;		
		--org-height:	615px;		
		--crop-left:	160px;		
		--crop-top:	80px;		
		--crop-right:	660px;		
		--crop-bottom:	535px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				


}

/* Smartphone < 428px, fit to 340px  */
@media screen and (max-width: 428px) {
	p.img1024x768chat {		/*	340	*/
		--org-width:	1024px;		
		--org-height:	768px;		
		--crop-left:	12px;		
		--crop-top:	580px;		
		--crop-right:	300px;		
		--crop-bottom:	732px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768half {		/*	340	*/
		--org-width:	1024px;		
		--org-height:	768px;		
		--crop-left:	12px;		
		--crop-top:	630px;		
		--crop-right:	300px;		
		--crop-bottom:	732px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768spot {		/*	340	*/
		--org-width:	580px;		
		--org-height:	435px;		
		--crop-left:	120px;		
		--crop-top:	104px;		
		--crop-right:	460px;		
		--crop-bottom:	331px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768spotwide {		/*	340	*/
		--org-width:	558px;		
		--org-height:	418px;		
		--crop-left:	109px;		
		--crop-top:	54px;		
		--crop-right:	449px;		
		--crop-bottom:	364px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				


	p.img800x600spot {
		--org-width:	400px;
		--org-height:	300px;
		--crop-left:	50px;
		--crop-top:		50px;
		--crop-right:	350px;
		--crop-bottom:	250px;
		position: relative;
		width: calc(var(--crop-right) - var(--crop-left));
		height: calc(var(--crop-bottom) - var(--crop-top));
	}
	p.img800x600spotwide {
		--org-width:	400px;
		--org-height:	300px;
		--crop-left:	50px;
		--crop-top:		50px;
		--crop-right:	350px;
		--crop-bottom:	250px;
		position: relative;
		width: calc(var(--crop-right) - var(--crop-left));
		height: calc(var(--crop-bottom) - var(--crop-top));
	}
}

/* Smartphone < 300px, fit to 280px  */
@media screen and (max-width: 300px) {
	p.img1024x768chat {		/*	280	*/
		--org-width:	996px;		
		--org-height:	747px;		
		--crop-left:	12px;		
		--crop-top:	564px;		
		--crop-right:	292px;		
		--crop-bottom:	712px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768half {		/*	280	*/
		--org-width:	996px;		
		--org-height:	747px;		
		--crop-left:	12px;		
		--crop-top:	613px;		
		--crop-right:	292px;		
		--crop-bottom:	712px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768spot {		/*	280	*/
		--org-width:	478px;		
		--org-height:	358px;		
		--crop-left:	99px;		
		--crop-top:	86px;		
		--crop-right:	379px;		
		--crop-bottom:	273px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				
	p.img1024x768spotwide {		/*	280	*/
		--org-width:	459px;		
		--org-height:	345px;		
		--crop-left:	90px;		
		--crop-top:	45px;		
		--crop-right:	370px;		
		--crop-bottom:	300px;		
		position:	relative;		
		width:	calc(var(--crop-right) - var(--crop-left));		
		height:	calc(var(--crop-bottom) - var(--crop-top));		
	}				


	p.img800x600spot {
		--org-width:	400px;
		--org-height:	300px;
		--crop-left:	50px;
		--crop-top:		50px;
		--crop-right:	350px;
		--crop-bottom:	250px;
		position: relative;
		width: calc(var(--crop-right) - var(--crop-left));
		height: calc(var(--crop-bottom) - var(--crop-top));
	}
	p.img800x600spotwide {
		--org-width:	200px;
		--org-height:	150px;
		--crop-left:	0px;
		--crop-top:		0px;
		--crop-right:	200px;
		--crop-bottom:	150px;
		position: relative;
		width: calc(var(--crop-right) - var(--crop-left));
		height: calc(var(--crop-bottom) - var(--crop-top));
	}

}


/* キャラ窓のクローズアップ */


p.img800x600win {
	--org-width:	800px;
	--org-height:	600px;
	--crop-left:	680px;
	--crop-top:		0px;
	--crop-right:	790px;
	--crop-bottom:	115px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

p.img1024x768win {
	--org-width:	1024px;
	--org-height:	768px;
	--crop-left:	872px;
	--crop-top:		0px;
	--crop-right:	1012px;
	--crop-bottom:	152px;
	position: relative;
	width: calc(var(--crop-right) - var(--crop-left));
	height: calc(var(--crop-bottom) - var(--crop-top));
}

/* 共通 */
p>img.cropped {
	position: absolute;
	clip: rect(var(--crop-top), var(--crop-right), var(--crop-bottom), var(--crop-left));
	margin-left:	calc(0px - var(--crop-left));
	margin-top:		calc(0px - var(--crop-top));
	width:			var(--org-width);
	height:			var(--org-height);
	cursor:			pointer;
}

/* ポップアップ用 */

<style type="text/css" media="screen">
.c {
    text-align: center;
}
.overlay { /* グレーの背景 */
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.5s 0s ease;
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#pop-up {
  display: none;
}
#pop-up:checked + .overlay {
  visibility: visible;
  opacity: 1;
  z-index: 100000;
  background-color: #000000D0;
  width: 100%;
}
.popWindow {
  border-radius: 5px;
  overflow: auto; /* スクロールバー用 */
  max-height: 95%; /* すき間 */
  min-width: fit-content; /* 横幅が広い時に白の部分が大きくならないため */
  max-width: 95%; /* すき間 */
  position: fixed;
  top: 50%; /* 中央に */
  left: 50%; /* 中央に */
  transform: translate(-50%, -50%); /* 中央に */
  z-index: 100010;
  font-size: 13px;
  line-height: 18px;
  margin: 10px auto;
  padding: 4px 10px;
  background: #FFFD; /* 枠の色 */
  text-align: center; /* 文字を中央寄せ */
  transition: all 500ms ease-in-out;
}
.popWindow .ptitle {
  font-size: 15px;
  margin: 8px;
  color: #333;
}
.popWindow .close {
  position: absolute;
  top: 8px;
  right: 10px;
  transition: all 300ms;
  font-size: 24px;
  line-height: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  padding: 2px;
}
.popWindow .close:hover {
  color: #06D85F;
}
.popWindow::-webkit-scrollbar-track {
  background: none;
}
.popWindow::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.popWindow::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 5px;
}
.clickable:hover {
  cursor: pointer;
}
@media screen and (max-width: 700px){
  #pop-up:checked + .overlay {
    visibility: hidden;
    opacity: 0;
  }
}
</style>