span#tblHAdr{
	display:none;
	margin:auto;
	z-index:2;
}

label.lbadr {
	position: relative;
	display: block;
	background-color: #eee;
	margin: 10px;
	text-align: left;
}
label.lbadr:after {
	content: "";
	clear: both;
	display: block;
}

label.lbadr input {
	float: left;

 }

label.lbadr p {
	left:15%;
	float: left;
	/margin-top:4%;
	width:80%;
	margin:0px;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

.drawbox{
	margin:0px;
	padding:0px;

	display:flex;
	flex-direction: column;
	width:94%;

}
.drawboxsub{
	margin-top:5px;

	width:100%;
	padding:0%;
	height:110px;
	border:solid 1px #888888;
	background:#dddddd;
	
	flex-shrink: 1;
	min-height: 0;  /* 縦並びでの縮小バグを防ぐ重要な指定 */
	
	display:flex;
	flex-direction: row; 
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	gap: 5px; 

	user-select: none; 
}
.drawboxsub{
	/margin-top:5px;
	/margin-left:0px;
	/width:94%;
	/border:solid 1px #888888;

	/display:block;
	/float:left;
	/background:#dddddd;
}

.drawboxmain{
	margin:5px 0px 0px 0px;

	width:99.7%;
	padding:0px;

	border:solid 1px #888888;

	display:flex;
	flex-direction: column;
	float:left;
	background:#ffffff;
	text-align:center;
	position: relative;
	display: inline-block; /* 画像の幅に自動で合わせる */
	user-select: none; 
	
	
}

.drawboxmain{
	/margin-top:5px;
	/margin-left:0px;
	/width:92%;
	/padding:1%;
	/border:solid 1px #888888;

	/display:block;
	/float:left;
	/background:#dddddd;
	/text-align:center;

}

.drawboxmain-up{
	width:100%;
	
}

.drawboxmain-low{
	width:100%;
	background:#dddddd;
}

#imagebox0 {
	overflow: hidden;     /* 拡大してはみ出た部分を非表示にする */
	position: relative;
	cursor: zoom-out;
  
  
	display: block;
	max-width: 100%; 

	height: auto;  
}



#imagebox0 img {
	width: 100%;
	margin:0% 0% 0% 0%;
	display:block;
	top: 0;
	left: 0;
	margin:0 auto;  
  
	transform-origin: center center; /* 拡大の軸（最初は中央） */
	transition: transform 0.1s ease-out; /* 動きを滑らかにする */
}
#imagebox0 img{
	/width:98%;
	/margin:1% 1% 1% 1%;
}


#source-img {
	display: block;
	width: 400px; /* 例：画像のサイズ */
	height: auto;
	transition: opacity 0.1s ease; 
}

#image-cover {
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: transparent; /* 透明 */
	cursor: zoom-in;
}

#image-cover.is-zoomed {
	cursor: zoom-out; /* 虫眼鏡（－）マーク */
}

#zoom-result {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5; /* 画像の上 */
	display: none; /* 通常時は非表示 */
	background-repeat: no-repeat;
	pointer-events: none; /* マウスイベントを透過してカバーに届かせる */
	border: 1px solid #ccc; /* 必要なら枠線を追加 */
}





.zoombtn{
	user-select: none;	
	display: inline-block;
	padding: 5px 24px;
	background-color: #3b82f6;
	color: #ffffff;
	border-radius: 8px; /* 角丸の大きさ */
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.0s;
	
	margin-top:5px;
	margin-bottom:5px;
	max-height:20px;

}

.zoombtn:hover{
	background-color: #1d4ed8;

}

div.itemboxsel{
	width:32%;
	margin:0px;
	padding:0px;
	height:100px;

	overflow:hidden;
	background:#ffffff;
	/float:left;
	border:solid 1px #888888;
	display:flex;
	justify-content: center;
	align-items: center;
}

div.itemboxsel{
	/width:32%;
	/margin:0px;
	/padding:0px;
	/height:100px;

	/overflow:hidden;
	/background:#ffffff;

	/float:left;
	/border:solid 1px #888888;
	
	/display:flex;
	/justify-content: center;
	/align-items: center;	

}


.itemboxsel img{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;

}

.itemboxsel img{
	/width:90%;
}


#imgzoom{
	position: fixed; /* 画面に固定 */
    
    
	z-index: 999; /* 他の要素の上に表示 */
	left: 0;
	top: 0;
	width: 100%; /* 全幅 */
	height: 100%; /* 全高さ */
	overflow: auto; /* スクロール可能 */
	background-color: rgb(0,0,0); /* 背景色 */
	background-color: rgba(0,0,0,0.4); /* 透過 */

	display: flex;
	justify-content: center; /* 左右の中央揃え */
	align-items: center;    /* 上下の中央揃え */
}

.imgzoomcontent {
	z-index: 1000;
	position: fixed; /* 画面に固定 */
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);

	background-color: #fefefe;
	border: 2px solid #3b82f6;
	
	width: 90%; 
	height:90%;
	display:flex;
	flex-wrap:wrap;
	flex-wrap:nowrap;
	flex-direction: column;

}

.zdrawbox{
	display: flex;          /* A, B, Cを横並びにする */
	flex:1;	
	flex-direction:column ;
	flex-grow: 1;           /* 縦方向の余ったスペースをすべて引き受ける */
	width: 100%;
	height:100%;
	background:#dddddd;

	flex-shrink: 1; /* 縮小を許可（初期値のため省略可） */
	min-height: 0;  /* 縦並びでの縮小バグを防ぐ重要な指定 */

}


.zdrawboxsub{
	width:100%;
	flex-shrink: 1;

	padding:10px;	
	height:110px;

	background:#dddddd;
	display:flex;
	flex-direction: row; 
	align-items: center;	
	justify-content: center;
	box-sizing: border-box;
	gap: 5px; 	

	flex-shrink: 1; /* 縮小を許可（初期値のため省略可） */
	min-height: 0;  /* 縦並びでの縮小バグを防ぐ重要な指定 */

}


div.zitemboxsel{
	width:30%;
	height:100%;
	background:#ffffff;
	border:solid 1px #888888;
	
	
	user-select: none; 
	display: flex;
	justify-content: center; /* 横方向の中央揃え */
	align-items: center;      /* 縦方向の中央揃え */
	overflow: hidden; 
   
}


.zitemboxsel img{
	max-height: 100%;    /* 親要素の高さより大きくならないようにする */
	max-width: 100%;     /* 親要素の幅より大きくならないようにする */
	min-height: 0;       /* Flexアイテムの最小高さの制限を解除（縮小可能にする） */
	width:95%;
	object-fit: cover; /* 比率を保って画像を枠に合わせる場合 */
}


.zitemboxsel:hover{
	cursor:pointer;

}


.zdrawboxmain{
	position:  relative;  

	background-color:#cccccc;
	height:100%;
	width:100%;
	display:flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	user-select: none; 
	
}

#z-image-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: transparent; /* 透明 */
	cursor: grab;

}


#z-source-img{
	max-height: 95%;    /* 親要素の高さより大きくならないようにする */
	max-width: 95%;     /* 親要素の幅より大きくならないようにする */
	min-height: 0;       /* Flexアイテムの最小高さの制限を解除（縮小可能にする） */
	object-fit: contain; /* 縦横比（アスペクト比）を保ったまま綺麗に収める */

}

#z-zoom-result {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5; /* 画像の上 */
	display: none; /* 通常時は非表示 */
	background-repeat: no-repeat;
	pointer-events: none; /* マウスイベントを透過してカバーに届かせる */
	border: 1px solid #ccc; /* 必要なら枠線を追加 */

}




.zdrawbox-bottom{
	display:flex;
	flex-direction: row; 
	width:100%;
	height:auto;
	padding:0px;
	
	background:#dddddd;

	border-top:solid 1px #888888;
	user-select: none; 
	flex-shrink: 0;	
	overflow:hidden;
}

.zdrawbox-bottom div{
	font-size:12px;
	height:auto;
}

#zdrawboxmenu-left{

	display:flex;
	flex-direction: row; 
	flex-wrap: wrap;

	width:100%;
	min-height:50px;
	margin-left:20px;
	margin-right:20px
}

#zdrawboxmenu-left div{
	margin-left:20px;
	font-size:14px;

}



#zdrawboxmenu-right{
	display:flex;
	flex-direction: row; 
	align-items: center;	
	justify-content: center;	
	width:120px;

}


#zdrawbox-closebtn{

	width:80%;
	height:150px;
	font-size:16px;
	
	padding:5px 0px;

}





.search2 .w190{
	width:95%;
}


p.search2 {
	display:block;
	float:left;
	width:95%;
	border: 1px #cecece solid;
	margin:0;
	padding:1% 1% 1% 1%;
	
}
.search2 span{
	width:100%;
	display:block;
	float:left;
	text-align:center;
}

@media screen and (min-width:768px){

.drawbox{
	margin:2px 0px 2px 10px;
	padding:0px;

	width:682px;

	display:flex;
	flex-direction: row;

}

.drawboxsub{
	width:119px;
	flex-shrink: 0;
	
	height:100%;
	
	margin-left:0px;
	padding-top:10px;
	padding-bottom:10px;

	background:#dddddd;
	display:flex;
	flex-direction: column; 
	align-items: center;	

	gap: 5px; 	
	padding-left:0;
	padding-right:0;
	user-select: none; 
}




.drawboxsub{
	/width:119px;
	/margin-left:10px;
	/padding-top:10px;
	/padding-bottom:10px;

	/background:#dddddd;
}


.drawboxmain{
	width:auto;
	height:auto;
	
	margin-left:2px;
	padding:0px 0px 0px 0px;
	display:flex;
	flex-direction: column;

	background:#ffffff;
	text-align:center;
	position: relative;
	display: inline-block; /* 画像の幅に自動で合わせる */
	user-select: none; 
	
	flex-grow: 1;
	

}

.drawboxmain{
	/width:535px;

	/margin-left:10px;
	/padding-top:10px;
	/display:block;
	/float:left;
	/background:#dddddd;
	/text-align:center;

}


.drawboxmain-up{
	width:100%;
}

.drawboxmain-low{
	width:100%;

	background:#dddddd;
}


#imagebox0 {
	width:100%;
	margin:0px 0px 0px 0px;
	display:block;
	
	max-width: 100%;
	max-height:100%;  
	
	height: auto;	
}


#imagebox0 img{
	/width:500px;
	/margin:2px 2px 2px 2px;
}


#source-img {
	/display: block;
	/width: 400px; /* 例：画像のサイズ */
	/height: auto;
	transition: opacity 0.1s ease; 
}

#image-cover {
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: transparent; /* 透明 */
	cursor: zoom-in;
}


#image-cover.is-zoomed {
	cursor: zoom-out; /* 虫眼鏡（－）マーク */
}

#zoom-result {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5; /* 画像の上 */
	display: none; /* 通常時は非表示 */
	background-repeat: no-repeat;
	pointer-events: none; /* マウスイベントを透過してカバーに届かせる */
	border: 1px solid #ccc; /* 必要なら枠線を追加 */
}

div.itemboxsel{
	width:110px;

	height:auto;
	background:#ffffff;

	display:flex;
	justify-content: center;
	align-items: center;	
}

div.itemboxsel{
	/width:108px;
	/margin:0 auto;
	/float:none;

	
	/height:100px;
	/background:#ffffff;

	/display:flex;
	/justify-content: center;
	/align-items: center;	


	/border:solid 1px #888888;
}

.itemboxsel img{
	width:95%;
	object-fit: cover; /* 比率を保って画像を枠に合わせる場合 */
}

.itemboxsel img{
	/width:95%;
}

.itemboxsel:hover{
	cursor:pointer;
}



#imgzoom{
	position: fixed; /* 画面に固定 */

	z-index: 999; /* 他の要素の上に表示 */
	left: 0;
	top: 0;
	width: 100%; /* 全幅 */
	height: 100%; /* 全高さ */
	overflow: auto; /* スクロール可能 */
	background-color: rgb(0,0,0); /* 背景色 */
	background-color: rgba(0,0,0,0.4); /* 透過 */

	display: flex;
	justify-content: center; /* 左右の中央揃え */
	align-items: center;    /* 上下の中央揃え */
}


.imgzoomcontent {
	z-index: 1000;
	position: fixed; /* 画面に固定 */
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);

	background-color: #fefefe;
	border: 2px solid #3b82f6;
	
	width: 90%; /* 幅 */
	height:90%;
	display:flex;
	flex-wrap:nowrap;
	flex-direction: column;
}


.zdrawbox{
	display: flex;          /* A, B, Cを横並びにする */
	flex-direction:row;
	flex:1;
	flex-grow: 1;           /* 縦方向の余ったスペースをすべて引き受ける */
	width: 100%;
	height:100%;
	background:#dddddd;
}


.zdrawboxsub{
	width:110px;
	flex-shrink: 0;

	height:100%;
	
	background:#dddddd;
	display:flex;
	flex-direction: column; 
	align-items: center;	
	justify-content: center;
	box-sizing: border-box;
	gap: 5px; 	

}

div.zitemboxsel{
	width:95px;
	height:auto;
	background:#ffffff;
	border:solid 1px #888888;
	user-select: none; 
}

.zitemboxsel img{
	width:95%;
	object-fit: cover; /* 比率を保って画像を枠に合わせる場合 */
}

.zitemboxsel:hover{
	cursor:pointer;

}

.zdrawboxmain{
	position:  relative;  

	background-color:#cccccc;

	height:100%;
	width:auto;
	width:100%;
	
	display:flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	user-select: none; 

	flex-grow: 1;  

}

#z-image-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: transparent; /* 透明 */
	cursor: grab;

}


#z-source-img{
	max-height: 95%;    /* 親要素の高さより大きくならないようにする */

	max-width: 95%;     /* 親要素の幅より大きくならないようにする */
	min-height: 0;       /* Flexアイテムの最小高さの制限を解除（縮小可能にする） */
	object-fit: contain; /* 縦横比（アスペクト比）を保ったまま綺麗に収める */

}



#z-zoom-result {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5; /* 画像の上 */
	display: none; /* 通常時は非表示 */
	background-repeat: no-repeat;
	pointer-events: none; /* マウスイベントを透過してカバーに届かせる */
	border: 1px solid #ccc; /* 必要なら枠線を追加 */

}


.zdrawbox-bottom{
	display:flex;
	flex-direction: row; 
	width:100%;
	height:auto;
	padding:0px;
	
	background:#dddddd;
	border-top:solid 1px #888888;
	user-select: none; 	
	flex-shrink: 0;
	overflow:hidden;
}

.zdrawbox-bottom div{
	font-size:12px;
	height:auto;
}


#zdrawboxmenu-left{

	display:flex;
	flex-direction: row; 
	flex-wrap: wrap;

	width:100%;
	min-height:50px;
	margin-left:20px;
	margin-right:20px
}

#zdrawboxmenu-left div{
	margin-left:20px;
	font-size:14px;

}



#zdrawboxmenu-right{
	display:flex;
	flex-direction: row; 
	align-items: center;	
	justify-content: center;	
	width:120px;

}


#zdrawbox-closebtn{

	width:80%;
	height:150px;
	font-size:16px;
	
	padding:5px 0px;

}


label.lbadr p {
	width:85%;
}



.search2 .w190{
	width:188px;
}


p.search2 {
	display:block;
	float:left;
	width:680px;
	border: 1px #cecece solid;
	margin:2px 5px 2px 5px;
	padding-left:5px;
	padding-right:5px;
}


.search2 span{
	width:180px;
	display:block;
	float:left;
	text-align:center;
}




}