/*
		popup
				2024 - 05 - 15
							*/

@charset "utf-8";

._PopupArea{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: pink;*/
	display: none;
	user-select: none;
	font-size: 1vmin;	/* 基準サイズ */

	z-index: 9999;
}.SP ._PopupArea{
	font-size: 1.5vmin;	/* 基準サイズ */
}

._PopupArea.switch{

}
._PopupArea.input{

}
._PopupArea.loading{

}
._PopupArea.confirm{

}
._PopupArea.alert{

}
._PopupArea > .cover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0.3;
}
._PopupArea > .item{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;	/* flex = 子を左右上下中央に配置 */
        align-items: center;
        justify-content: center;
}
._PopupArea > .item > div{
	position: relative;
	display: inline-block;
	padding: 5em;
	background: white;
	border-radius: 1em;
	text-align: center;
	max-width: 90%;
	max-height: 80%;
	overflow-y: auto;
	overflow-wrap: break-word;
	word-break: break-word;
}
@media screen and (orientation: portrait){
	._PopupArea > .item > div{
		max-width: 100%;
		max-height: 100%;
	}
}
._PopupArea .msg_div{
	position: relative;
	display: block;
	margin: 0 0 2em 0;
}
._PopupArea .loadmsg_div{
	position: relative;
	display: block;
}
._PopupArea .input_div{
	position: relative;
	display: block;
	margin: 0 0 2em 0;
	/*margin: 2em 0 0 0;*/
}
._PopupArea .btn_div{
	position: relative;
	display: block;
	/*margin: 2em 0 0 0;*/
}
._PopupArea .pop_msg{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	/*margin: 0 0 2em 0;*/
	text-align: left;
	/*background: yellow;*/
}
._PopupArea .pop_msg > span{
	line-height: 150%;
	font-size: 3em;
	/*border: solid 1px red;*/
}
._PopupArea .pop_btn{
	display: inline-block;
	line-height:100%;
	color: gray;
	padding: 2em;
	margin: 0 1em;
	border: solid 1px gray;
	border-radius: 100vh;
	background: white;
	text-align: center;
}
._PopupArea .pop_btn > span{
	line-height: 100%;
	font-size: 3em;
}
@media screen and (orientation: landscape){	/* 横 */
	._PopupArea .pop_btn:hover{
		cursor: pointer;
		color: white;
		background: gray;
	}
}
@media screen and (orientation: portrait){	/* 縦 */
	._PopupArea .pop_btn:active{
		cursor: pointer;
		color: white;
		background: gray;
	}
}
._PopupArea .pop_table{	/* table */
	line-height: 100%;
	border: none;
	/*border-collapse: collapse;*/
	border-collapse: collapse; /* セルの線を重ねる */
	/*border-collapse: separate;*/  /* 表の線と線の間を空ける */
	border-spacing: 0;       /* 表の線と線の間の幅 */
	table-layout: fixed;
	display: inline-block;
	margin: 0 0 3em 0;
}
._PopupArea .pop_btn2{	/* td */
	line-height:100%;
	color: gray;
	padding: 2em;
	border: solid 1px gray;
	background: white;
	/*background: linear-gradient(135deg,gray 5%,white 5%);*/
}
._PopupArea .pop_btn2 > span{
	line-height: 100%;
	font-size: 3em;
}
._PopupArea .pop_btn2:hover{
	cursor: pointer;
	color: white;
	background: gray;
}
._PopupArea .loadgif{
	display: inline-block;
	vertical-align: middle;
	width: 4em;
	/*background: yellow;*/
	/*border: solid 1px red;*/
}
._PopupArea .pop_cnt{
	display: inline-block;
	vertical-align: middle;
	font-size: 3em;
}
._PopupArea svg{
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	margin: 0.5em;
	line-height: 0;
}
._PopupArea .red svg .st0{
	fill: red;
}
._PopupArea .loading_s{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 5em;
	height: 5em;
	border-radius: 100%;
	border: solid 1px orange;
}
._PopupArea .loading_s > .bg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(0deg);

	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border: 1em solid rgba(255, 255, 255, 0.2);
	border-top-color: orange;
	animation: _A_loading_s 1s infinite linear;
}
@keyframes _A_loading_s{
	100% { 
		transform: translate(-50%,-50%) rotate(360deg);
	}
}
#___Circleloader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;	/* flex = 子を左右上下中央に配置 */
        align-items: center;
        justify-content: center;

	z-index: 9999;
	display: none;
}
#___Circleloader > .main{
	position: relative;
	width: 20vmin;
	height: 20vmin;
	border-radius: 100%;
	border: solid 1px orange;
}
#___Circleloader > .main > .bg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(0deg);

	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border: 2.5vmin solid rgba(255, 255, 255, 0.2);
	border-top-color: orange;
	animation: _A_Circleloader_spin 1s infinite linear;
}
@keyframes _A_Circleloader_spin{
	100% { 
		transform: translate(-50%,-50%) rotate(360deg);
	}
}
#___Circleloader > .main > .cnt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

	font-size: 5vmin;
	line-height: 100%;
	color: orange;
	/*background: white;*/
	animation: _A_Circleloader_cnt 1s linear infinite;
}
@keyframes _A_Circleloader_cnt{ 
	0% { 
		/*color: orange;*/
	}
	100% { 
		/*color: white;*/
	}
}