@charset "utf-8";

:root {
}

.pc_only { display: block; }
.sp_only { display: none !important; }
th.pc_only, td.pc_only { display: table-cell; }
div.pc_only {
	display: flex;
	justify-content: center;
}
span.pc_only { display: inline-block; }

/* モバイル */
@media screen and (max-width: 1024px) {
	.pc_only { display: none !important; }
	.sp_only { display: block !important; }
	th.sp_only, td.sp_only { display: table-cell !important; }
	div.sp_only {
		display: flex !important;
		justify-content: center;
	}
	span.sp_only { display: inline-block !important; }

	:root {
	}
}

/* PC */
@media screen and (min-width: 1025px) {
	:root {
	}
}






section#Admin {
	& label {
		font-size: calc( .8 * var(--BaseSize) );
	}
	& input[type=checkbox]:checked {
		background: var(--Theme-100);
	}

	& button,
	& input,
	& select,
	& textarea {
		padding: calc( .25 * var(--BaseSize) ) calc( .5 * var(--BaseSize) );
		font-size: calc( .8 * var(--BaseSize) );
		backgrouond: var(--Color_FF100);
		border-radius: calc( .25 * var(--BaseSize) );
		appearance: none;
		outline: none;
		cursor: pointer;
		transition: var(--Transition_04s);
	}

	& td {
		& button,
		& input,
		& select,
		& textarea {
			font-size: calc( .8 * var(--BaseSize) );
			background: none;
			appearance: none;
			outline: none;
			cursor: pointer;
			
		}
	}

	& input,
	& select,
	& textarea {
		border: var(--Border);
	}

	& input[type=checkbox] {
		position: relative;
		width: calc( 1 * var(--BaseSize) );
		height: calc( 1.1 * var(--BaseSize) );
		border: var(--Border);
		background: var(--Color_FF100);
		border-radius: var(--Border-radius_L);
	}

	& input[type=checkbox]:checked::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-image: url('https://rokuten.jp/wp-content/themes/Rokuten/svg/mon_ff.svg');
		background-size: 70%;
		background-repeat: no-repeat;
		background-position: center;
		aspect-ratio: 1 / 1;
	}

	& input[type=text],
	& input[type=number] {
		width: 100%;
		min-width: 80px;
		border: var(--Border);
		cursor: text;
		word-break: break-all; 
		overflow-wrap: break-word;
		white-space: pre-wrap;
	}
	& input::placeholder,
	& textarea::placeholder {
		color: var(--Theme-040);
		opacity: 1;
	}

	& td {
		& input[type=text],
		& input[type=number] {
			height: var(--Table_SakeName_Figure_width);
			border: none;
		}
		& input[type=text].No {
			text-align: center;
		}
		& input[type=text]:hover,
		& input[type=number]:hover,
		& textarea:hover {
			background: var(--Color_FF100);
			box-shadow: 0 0 0 1px var(--Color_D4);
		}

		& input[type=text]:focus,
		& input[type=number]:focus,
		& textarea:focus {
			background: var(--Color_FF100);
			box-shadow: 0 0 0 2px var(--Theme-100);
			outline: none;
		}
	}

	& td.KRO {

		& input[type=checkbox]:checked {
			background: var(--Color_K100);
		}
	}

	& td.ORO {

		& input[type=checkbox]:checked {
			background: var(--Color_O100);
		}
	}

	& td.NRO {

		& input[type=checkbox]:checked {
			background: var(--Color_N100);
		}
	}

	& select {
		position: relative;
		width: 100%;
		min-width: 80px;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); 
		background-repeat: no-repeat;
		background-position: right calc( .2 * var(--BaseSize) ) center;
		background-size: 16px 12px;
	}

	& td {
		& select {
			height: var(--Table_SakeName_Figure_width);
			background: transparent; 
			background-repeat: no-repeat;
			background-position: right calc( .2 * var(--BaseSize) ) center;
			background-size: 16px 12px;
			border: none;
		}
		& select:hover {
			background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), var(--Color_FF100);
			background-repeat: no-repeat;
			background-position: right calc( .2 * var(--BaseSize) ) center;
			background-size: 16px 12px;
			border: none;
		}
	}
	
	& textarea {
        width: 100%;
        height: 100%;
        border: var(--Border);
        background: var(--Color_FF100);
        white-space: pre-wrap;
        word-break: break-all;
		resize: none;
    }
	& td {
		& textarea {
			display: flex;
			align-items: center;
			width: 100%;
			height: var(--Table_SakeName_Figure_width);
			line-height: normal;
			border: none;
			background: transparent;
			resize: none;
		}
		& textarea:hover {
			background: var(--Color_FF100);
			resize: vertical;
		}
	}

	& button {
	}

	& a.btn,
	& a.Header {
		font-size: calc( .8 * var(--BaseSize) );
		color: var(--Color_FF);
		background: var(--Theme-100);
		border-radius: calc( .25 * var(--BaseSize) );
		text-decoration: none;
	}

	& button,
	& a.btn,
	& a.Header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: calc( .5 * var(--BaseSize) ) calc( .5 * var(--BaseSize) );
		border: none;
		transition: var(--Transition_04s);
		cursor: pointer;
		& i {
			font-size: calc( 1 * var(--BaseSize) );
			overflow: visible;
			& em {
				position: absolute;
				bottom: calc(100% + 10px);
				left: 50%;
				transform: translateX(-50%);
				padding: calc( .25 * var(--BaseSize) ) calc( .5 * var(--BaseSize) );
				color: var(--Color_FF100);
				font-size: calc( .6 * var(--BaseSize) );
				font-style: normal;
				white-space: nowrap;
				font-weight: bold;
				background-color: var(--Color_1D100);
				border-radius: var(--Border-radius_S);
				pointer-events: none;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
				overflow: hidden;
				opacity: 0;
				z-index: 9999;
			}
			& em:after {
				content: '';
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
				border: 6px solid transparent;
				border-top-color: var(--Color_1D100);
				overflow: hidden;
				opacity: 0;
			}
		}
		& strong {
			font-size: calc( .8 * var(--BaseSize) );
		}
	}
	
	& button:hover,
	& a.btn:hover,
	& a.Header:hover {
		& i {
			& em {
				overflow: visible;
				opacity: 1;
			}
			& em::after {
				overflow: visible;
				opacity: 1;
			}
		}
		& strong {
		}
	}

	& a.btn {
		color: var(--Color_FF);
		background: var(--Theme-100);
	}

	& a.btn:hover {
		color: var(--Color_FF);
		background: var(--Color_1D100);
	}

	/* ヘッダー用 */
	& button.Header,
	& a.Header {
		color: var(--Theme-100);
		background: var(--Color_FF100);
		border: 1px var(--Theme-040) solid;
	}

	& button.Header:hover,
	& a.Header:hover {
		color: var(--Color_FF100);
		background: var(--Theme-100);
		border: 1px var(--Theme-100) solid;
	}


	

	& button.detail {
		color: var(--Color_FF);
		background: var(--Theme-100);
	}

	& button.detail:hover {
		color: var(--Color_FF100);
		background: var(--Color_1D100);
	}

	& button.Copy {
		color: var(--Color_1D040);
		background: transparent;
	}

	& button.Copy:hover {
		color: var(--Theme-100);
	}

	& button.Delete {
		color: var(--Color_1D040);
		background: transparent;
	}

	& button.Delete:hover {
		color: #dc3545;
	}
	
	/* モーダル用 */

	& button.Close {
		font-size: calc( 1 * var(--BaseSize) );
		color: var(--Color_FF100);
		background: transparent;
	}

	& button.Close:hover {
		color: var(--Theme-080);
		background: var(--Color_FF100);
	}
	
	& button.Registration {
		color: var(--Color_FF100);
		background: var(--Theme-100);
		& i {
			font-size: calc( .8 * var(--BaseSize) )
		}
	}

	& button.Registration:hover {
		color: var(--Color_FF100);
		background: var(--Color_1D100);
	}

	& button.Save {
		color: var(--Theme-100);
		background: var(--Color_FF100);
		border: 1px var(--Color_FF100) solid;
	}

	& button.Save:hover {
		color: var(--Color_FF100);
		background: var(--Color_1D100);
	}

	& button.Cancel {
		font-size: calc( .8 * var(--BaseSize) );
		color: var(--Color_FF100);
		background: transparent;
		border: 1px var(--Color_FF100) solid;
	}

	& button.Cancel:hover {
		color: var(--Theme-100);
		background: var(--Color_FF100);
	}

	& button.ModalCopy {
		color: var(--Color_FF100);
		background: transparent;
	}

	& button.ModalCopy:hover {
		color: var(--Theme-100);
		background: var(--Color_FF100);
	}

	& button.ModalDelete {
		color: var(--Color_FF100);
		background: transparent;
	}

	& button.ModalDelete:hover {
		color: var(--Color_FF100);
		background: #dc3545;
	}
}




section#Admin {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 100vw;
	& div#app {
		position: relative;
		max-width: 100vw;

		& div#Loading {
			padding: calc( 1 * var(--BaseSize) );
		}

		& div#Data {
			display: flex;
			flex-direction: column;
			padding: 0;
			max-width: 100vw;
			height: calc( 100vh - var(--Header_height) );
			overflow-x: scroll;
			overflow-y: scroll;
		}
	}
}