@charset "utf-8";

:root{
	/* ページャ */
	--capi-pager-text-color: #111111;
	--capi-pager-current-color: #FFFFFF;
	--capi-pager-current-bg: #0071BB;
	--capi-pager-hover: #F0F8FF;
	--capi-pager-icon-left: url(lib/icon/pager-left.svg);
	--capi-pager-icon-right: url(lib/icon/pager-right.svg);
	--capi-pager-icon-top: url(lib/icon/pager-top.svg);
	--capi-pager-icon-last: url(lib/icon/pager-last.svg);

	/* エラー表示 */
	--capi-alert: #D70000;

	/* スライドメニュー */
	--capi-slide-menu-bg: #FFFFFF;
	--capi-slide-menu-hover: #F0F8FF;
	--capi-slide-menu-border: #333;
	--capi-slide-menu-arrow: url(lib/icon/slide-arrow.svg);

	/* スライダー */
	--capi-slider-bg: #B5C6DE;
	--capi-slider-handle: #fff;
	--capi-slider-border: #ccc;

	/* スクロールバー */
	--capi-scrollbar-bg: #F3F4F8;
	--capi-scrollbar-thumb: #B8B8B8;
	--capi-scrollbar-hover: #707070;

	/* トグルスイッチ */
	--capi-toggle-switch-on: #191970;
	--capi-toggle-switch-off: #E0E0E0;
	--capi-toggle-switch-handle: #FFFFFF;

	/* 確認ダイアログ */
	--capi-confirm-dialog-bg: #FFFFFF;
	--capi-confirm-dialog-border: #CFCFCF;
	--capi-confirm-dialog-button: #0071BB;
	--capi-confirm-dialog-hover: #005E9B;

	/* スナックバー */
	--capi-snackbar-bg:#111;
	--capi-snackbar-text:#fff;
	--capi-snackbar-link:#7CC2FD;
	--capi-snackbar-shadow:0px 2px 4px -1px #00000033, 0px 4px 5px 0px #00000024, 0px 1px 10px 0px #0000001F;
}

.capi-hidden{
	display:none !important;
}

/* エラー表示 */
.capi-error-box, ::part(capi-error-box){
	margin:10px;
	text-align:center;
}
.capi-error-msg, ::part(capi-error-msg){
	display:inline-block;
	margin:0 auto;
	padding:10px;
	text-align:left;
	border:2px var(--capi-alert) solid;
	color:var(--capi-alert);
	background-color:white;
	font-size: 14px;
	line-height: 1;
}

/* ローディング */
.capi-page-loading-holder{
	position:fixed;
	display:none;
	top:0;
	bottom:0;
	left:0;
	right:0;
	pointer-events:none;
}
.capi-page-loading-holder.capi-loading{
	display:block;
}
.capi-loading::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	height:48px;
	width:48px;
	margin-top:-24px;
	margin-left:-24px;
	background-image: url(../icon/loading.svg);
	animation-name:capi-rotate;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes capi-rotate{
    from {
		transform:rotate(0deg);
	}
    to {
		transform:rotate(360deg);
	}
}

/* ダイアログ */
.capi-dialog-holder{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:none;
	align-items:center;
	overflow:auto;
	background-color:rgba(17, 17, 17, 0.3);
	z-index: var(--capi-dialog-zindex, 10);
}
body.capi-dialog-shown{
	overflow:hidden;
}
body.capi-dialog-shown .capi-dialog-holder{
	display:flex;
}
.capi-dialog{
	margin:auto;
}
.capi-dialog:not(.capi-dialog-shown),
.capi-dialog:not(:last-child){
	display:none !important;
}

.capi-dialog-confirm{
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	padding:24px;
	border-radius:4px;
	gap:24px;
	border: 1px solid var(--capi-confirm-dialog-border);
	background-color:var(--capi-confirm-dialog-bg);
}
.capi-dialog-title{
	font-size:16px;
	line-height:1;
}
.capi-dialog-text{
	white-space:pre-wrap;
	font-size:14px;
	line-height:18px;
}
.capi-dialog-button-box{
	display:flex;
	gap:16px;
	justify-content: center;
}
.capi-dialog-button{
	box-sizing:border-box;
	height:36px;
	min-width:154px;
	background-color:var(--capi-confirm-dialog-button);
	border: 1px solid var(--capi-confirm-dialog-button);
	border-radius:4px;
	font-size:14px;
	font-weight:bold;
	cursor:pointer;
	color:var(--capi-confirm-dialog-bg);
}
.capi-dialog-button.capi-dialog-close-button{
	background-color:var(--capi-confirm-dialog-bg);
	color:var(--capi-confirm-dialog-button);
}
.capi-dialog-button:not(:disabled):hover, .capi-dialog-button.capi-dialog-close-buttonnot(:disabled):hover{
	background-color:var(--capi-confirm-dialog-hover);
	color:var(--capi-confirm-dialog-bg);
}
.capi-dialog-button:not(:disabled):hover{
	background-color:var(--capi-confirm-dialog-hover);
	color:var(--capi-confirm-dialog-bg);
}