@charset "utf-8";

html {
	width: 100%;
	height: 100%;
	font-family: "NotoSansJP", "NotoSansJPBold", Verdana, Meiryo, sans-serif;
	color: var(--font-color-base);

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
body {
	flex: 1 1 auto;
	background-color: var(--background-color-base);
	margin: 1px;
	position: relative;
}
[class*="snp-"] {
	font-size: var(--font-size-base);
}
ul, ol {
	list-style: none;
	padding: 0;
}

/* コンテンツ領域 */
.snp-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
	background-color: var(--background-color-000);
	border-radius: 12px 12px 0 0;
	box-shadow: var(--shadow-base);
	padding: 16px;
}
.snp-hseparator {
	border-top: 1px solid var(--border-color-base);
	height: 1px;
}

/* ボタン */
.btn.btn-primary.snp-button {
	padding: 8px;
	color: var(--font-color-000);
	background-color: var(--background-color-003);
	border-style: none;
}
.btn.btn-primary.snp-button:disabled {
	color: var(--font-color-010);
	background-color: var(--background-color-001);
}

.btn.btn-secondary.snp-button {
	padding: 8px;
	color: var(--font-color-011);
	background-color: var(--background-color-000);
	border: 1px solid var(--font-color-011);
}
.btn.btn-secondary.snp-button:disabled {
	color: var(--font-color-008);
	background-color: var(--background-color-001);
	border: none;
}
.btn.snp-button {
	--bs-btn-active-border-color: var(--border-color-002);
}

/* 選択ボタン */
.btn-group {
    display: flex;
    flex-direction: row;
}
.btn-group > .btn.snp-button {
    flex: 1 1 0;
    height: 40px;
    padding: 8px 4px;
}
.btn-group > .btn.btn-outline-primary.snp-button {
	color: var(--font-color-base);
	border: 1px solid var(--border-color-003);
}
.btn-group > input:checked + .btn.btn-outline-primary.snp-button {
	color: var(--font-color-000);
	background-color: var(--background-color-003);
}

/* リンク・アンカー */
.snp-link {
	color: var(--font-color-005);
	text-decoration: underline;
}

/* チェックボックス、ラジオボタン共通 */
.form-check {
	display: flex;
	flex-direction: row;
    padding-left: 0;
	margin: 0;
	align-items: center;

	cursor: pointer;
}
.form-check:hover {
	background-color: var(--background-color-005);
}
.form-check > .form-check-input {
    flex: 0 1 auto;
	margin-top: 0.125em;
	margin-left: 0;
	width: 20px;
	height: 20px;
	min-width: 20px;

	cursor: pointer;
}
.form-check > label {
    flex: 1 1 auto;
	padding-left: 12px;
	vertical-align: middle;
	word-break: keep-all;

	cursor: pointer;
}

/* ラジオボタン */
.snp-radio .form-check-input {
	position: relative;
	background-image: none;
	background-color: var(--background-color-000);
	border-color: var(--border-color-001);
	border-width: 2px;
}
.snp-radio .form-check-input:checked {
	border-color: var(--border-color-002);
}
.snp-radio .form-check-input:checked::after {
	position: absolute;
	display: block;
	content: "";
	left: 4px;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background-color: var(--background-color-003);
}
.snp-radio .form-check-input:active,
.snp-radio .form-check-input:focus {
	box-shadow: none;
}
.snp-content .snp-radio {
	padding: 12px 16px;
}
.snp-content .snp-radio-row {
	padding: 8px 0;
}
.snp-content .snp-radio:has(.form-check-input:checked) {
	background-color: var(--background-color-005);
}
.snp-content .snp-radio-row:has(.form-check-input:checked) {
	background-color: var(--background-color-000);
}
.snp-content .snp-radio:first-child {
	border-radius: 12px 12px 0 0;
}

/* チェックボックス */
.snp-checkbox .form-check-input {
	position: relative;
	border-color: var(--border-color-001);
	border-width: 2px;
}
.snp-checkbox .form-check-input:checked {
	border-color: var(--border-color-002);
	background-color: var(--background-color-003);
}
.snp-checkbox .form-check-input:checked {
	border-color: var(--border-color-002);
}
.snp-checkbox .form-check-input:focus {
	box-shadow: none;
}
.snp-content .snp-checkbox:has(.form-check-input:checked) {
	background-color: var(--background-color-000);
}

/* テキスト入力 */
textarea {
	resize: none;
	border: 1px solid var(--border-color-001);
	border-radius: 4px;
	padding: 8px;
}

input[type=number] {
	text-align: center;
}

textarea:active,
textarea:focus,
input[type=text]:active,
input[type=text]:focus,
input[type=number]:active,
input[type=number]:focus,
input[type=email]:active,
input[type=email]:focus {
	outline-color: var(--border-color-004);
}

textarea::placeholder {
	color: var(--font-color-009);
}
input::placeholder {
	color: var(--font-color-010);
}

/* フォーム */
.snp-form-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 40px;
	padding: 8px;
	border: 1px solid var(--border-color-003);
	border-radius: 4px;
}
.snp-form-item + .snp-form-item {
	margin-top: 12px;
}
.snp-form-item:has(select) {
	padding-right: 0;
}

.snp-form-item-input {
	height: 40px;
	padding: 8px;
	border: 1px solid var(--border-color-003);
	border-radius: 4px;
}

.snp-form-item .snp-form-item-title {
	flex: 0 1 auto;
	margin-right: 12px;
    white-space: nowrap;
}
.snp-form-item .snp-form-item-input {
	flex: 1 1 auto;
	height: initial;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background-color: transparent;
}
.snp-form-item input.snp-form-item-input {
	width: 0;
}
.snp-form-item select.form-select.snp-form-item-input {
	border: none;
	box-shadow: none;
}
select.form-select > option {
	color: var(--font-color-base);
}
select.form-select.snp-form-item-input:invalid,
select.form-select > option.snp-placeholder {
	color: var(--font-color-009);
}
.snp-form-item:has(.snp-form-item-input:active),
.snp-form-item:has(.snp-form-item-input:focus) {
	outline: 1.5px solid var(--border-color-004);
}

/* dropdown */
.dropdown-menu.snp-dropdown-menu {
	--bs-dropdown-link-hover-bg: var(--background-color-005);
	--bs-dropdown-font-size: var(--font-size-base);
	--bs-dropdown-link-active-bg: var(--background-color-003);
	--bs-dropdown-box-shadow: var(--dropdown-shadow-base);
}

/* Bottom Sheet */
.snp-bottom-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: -24px;
	display: flex;
	flex-direction: column;
	background-color: var(--background-color-000);
	border-radius: 12px 12px 0 0;
	box-shadow: var(--shadow-base);
	padding: 0;
	z-index: 2;

	transition: bottom 0.2s ease;
}
.snp-bottom-sheet.offscreen {
	bottom: -100%;
	box-shadow: none;
}
.snp-bottom-sheet-header {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 16px 16px 12px 16px;
}
.snp-bottom-sheet-close {
	position: absolute;
	right: 0;
	top: 4px;
	padding: 0;
	z-index: 2;
}
.snp-bottom-sheet-return {
	position: absolute;
	left: 16px;
	padding: 0;
	height: 28px;
	border: 0 none;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.snp-bottom-sheet-button-ico {
	flex: 0 0 24px;
	height: 24px;
	margin-right: 4px;
}
.snp-bottom-sheet-return .snp-bottom-sheet-button-label {
	flex: 1 1 auto;
	line-height: 0.8;
}

/* モーダル背景 */
.modal-backdrop.fade {
	opacity: 0.8;
}

/* モーダルダイアログ */
.modal-dialog.snp-modal-dialog .modal-header.snp-modal-header {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 28px;
	border-bottom: none;
}
.modal-dialog.snp-modal-dialog .modal-header.snp-modal-header img.snp-dialog-header-ico {
	flex: 0 0 58px;
	width: 58px;
}
.modal-dialog.snp-modal-dialog .modal-header.snp-modal-header .modal-title.snp-modal-title {
	font-family: "NotoSansJPBold";
	font-size: var(--font-size-medium);
	color: var(--font-color-001);
	text-align: center;
	margin-top: 16px;
	margin-bottom: 0;
}
.modal-dialog.snp-modal-dialog .modal-body.snp-modal-body {
	flex-direction: column;
	padding-top: 8px;
	padding-bottom: 8px;
}
.modal-dialog.snp-modal-dialog .modal-body.snp-modal-body .snp-modal-message {
	text-align: center;
	margin-bottom: 0;
}
.modal-dialog.snp-modal-dialog .modal-footer.snp-modal-footer {
	flex-direction: column;
	padding-top: 16px;
	padding-bottom: 30px;
	border-top: none;
}
.modal-dialog.snp-modal-dialog .modal-footer.snp-modal-footer .snp-button {
	min-width: 200px;
	height: 40px;
	border-radius: 20px;
	margin-top: 0;
	margin-bottom: 0;
}
.modal-dialog.snp-modal-dialog .modal-footer.snp-modal-footer .snp-button.btn-primary {
	font-family: "NotoSansJPBold";
}
.modal-dialog.snp-modal-dialog .modal-footer.snp-modal-footer .snp-button.btn-secondary {
	border-color: var(--border-color-003);
	color: var(--font-color-base);
}
.modal-dialog.snp-modal-dialog .modal-footer.snp-modal-footer .snp-button:not(:first-child) {
	margin-top: 16px;
}

/* モーダルダイアログの埋め込み SVG の場合 */
.modal-dialog.snp-modal-dialog .modal-header.snp-modal-header .snp-svg-ico {
	flex: 0 0 58px;
	width: 58px;
	margin: 0;
}
.modal-dialog.snp-modal-dialog .modal-header.snp-modal-header .snp-svg-ico .snp-svg-ico-fill-theme-color {
    fill: var(--background-color-003);
}

/* 画像表示 */
dialog.snp-image-viewer {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	border: none;
	flex-direction: column;
	justify-content: center;
	background-color: var(--background-color-overlay);
	z-index: 100;
}
dialog.snp-image-viewer[open] {
	display: flex;
	animation: snp-image-viewer-show 0.25s ease 0s;
}
@keyframes snp-image-viewer-show {
	from {
	  	opacity: 0;
	}
	to {
	  	opacity: 1;
	}
}
.snp-image-viewer .snp-image-viewer-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	font-size: var(--font-size-medium);
	color: var(--font-color-000);
	border: none;
}
.snp-image-viewer > img {
	flex: 0 1 auto;
	width: 100%;
	object-fit: contain;
}

/* 画像拡大表示（スワイプ機能付き） */
dialog.snp-image-swipe-viewer {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	border: none;
	flex-direction: column;
	justify-content: center;
	background-color: var(--background-color-overlay);
	z-index: 100;
}
dialog.snp-image-swipe-viewer[open] {
	display: flex;
	animation: snp-image-swipe-viewer-show 0.25s ease 0s;
}
@keyframes snp-image-swipe-viewer-show {
	from {
	  	opacity: 0;
	}
	to {
	  	opacity: 1;
	}
}
.snp-image-swipe-viewer .snp-image-swipe-viewer-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	font-size: var(--font-size-medium);
	color: var(--font-color-000);
	flex: 0 0 48px;
	height: 48px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	border: none;

	z-index: 9999;
}
.snp-image-swipe-viewer .carousel-item img {
	flex: 0 1 auto;
	width: 100%;
	object-fit: contain;
}
.snp-image-viewer .snp-button .snp-viewer-button-ico,
.snp-image-swipe-viewer .snp-button .snp-viewer-button-ico {
	flex: 0 0 48px;
	height: 48px;
}

dialog.snp-image-swipe-viewer p {
	margin: 0;
	color: var(--font-color-000);
}

.snp-image-swipe-viewer .snp-carousel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.snp-image-swipe-viewer .snp-carousel .snp-carousel-inner {
	display: flex;
	flex: 1 1 auto;

}
.snp-image-swipe-viewer .snp-carousel .snp-carousel-inner .snp-carousel-item {
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
}
.snp-image-swipe-viewer .snp-carousel .snp-carousel-inner .snp-carousel-item.active {
	display: flex;
}
.snp-image-swipe-viewer .snp-carousel .snp-carousel-inner .snp-carousel-item .snp-carousel-title {
	text-align: center;
	padding: 16px 48px;
	word-break: keep-all;
}
.snp-image-swipe-viewer .snp-carousel .snp-carousel-inner .snp-carousel-item .snp-carousel-caption {
	position: relative;
	right: auto;
	left: auto;
	bottom: auto;
	padding-bottom: 16px;
	text-align: center;
	word-break: keep-all;
}

/* プログレスバー */
.progress.snp-progress {
	height: 8px;
	border-radius: 4px;
	background-color: var(--background-color-000);
}
.progress.snp-progress .progress-bar.snp-progress-bar {
	border-radius: 4px;
	background-color: var(--background-color-003);
}

/* タイトル */
.snp-title {
    padding: 12px;
    flex: 0 1 auto;
    text-align: center;
    color: var(--font-color-error);
    font-size: var(--font-size-medium);
    font-weight: bold;
}

/* フッター */
.snp-footer {
	display: flex;
	justify-content: center;
	flex: 0 0 64px;
	height: 64px;
	background-color: var(--background-color-000);
	box-shadow: var(--shadow-base);
	padding: 12px 16px;
	position: relative;
}
.snp-footer > .snp-button {
	width: 180px;
	height: 40px;
	border-radius: 20px;
}


/* ヘッダー */
.snp-header {
    flex: 0 1 auto;
	display: flex;
	justify-content: space-between;
	/* flex: 0 0 40px; */
	height: 40px;
	width: 100%;
	background-color: var(--background-color-000);
	padding: 6px 20px 6px 8px;
	position: sticky;
	top: 43px;
	z-index: 1;
}
.snp-header .snp-button.snp-button-return {
	height: 28px;
	padding-top: 0;
	padding-bottom: 0;
	border: 0 none;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.snp-header .snp-button.snp-button-return .snp-header-button-ico {
	flex: 0 0 24px;
	height: 24px;
	margin-right: 4px;
}
.snp-header .snp-button.snp-button-return .snp-header-button-label {
	flex: 1 1 auto;
	line-height: 0.8;
}

.snp-button.snp-btn-label-only {
    flex: 1 1 auto;
    height: 22px;
    padding: 0;
    text-align: left;
    border: 0 none;
}

/* Toast / Snackbar */
.snp-toast-container {
	bottom: 76px;
}
.snp-toast {
	background-color: var(--background-color-011);
	width: 327px;
}
.snp-toast .snp-toast-body {
	text-align: center;
	color: var(--font-color-000);
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Tooltip */
.tooltip.snp-tooltip {
	--bs-tooltip-max-width: 250px;
	--bs-tooltip-padding-x: 16px;
	--bs-tooltip-padding-y: 12px;
	--bs-tooltip-font-size: var(--font-size-base);
	--bs-tooltip-color: var(--font-color-001);
	--bs-tooltip-bg: var(--background-color-000);
	--bs-tooltip-arrow-width: 0;
	--bs-tooltip-arrow-height: 0;
	--bs-tooltip-border-radius: 6px;
	--bs-tooltip-opacity: 1;

	font-family: "NotoSansJP", "NotoSansJPBold", Verdana, Meiryo, sans-serif;
	box-shadow: var(--tooltip-shadow-base);
	border-radius: 6px;
}


/* ステータスバーに当たる、テーマカラー着色エリア */
/* TODO スマホ用にステータスバーのスタイルを準備 */
.snp-theme-bar {
    flex: 0 1 auto;
	display: flex;
	justify-content: center;
	/* flex: 0 0 43px; */
	height: 43px;
	width: 100%;
	background-color: var(--snp-current-report-theme-color-code);
	position: sticky;
	top: 0;
	z-index: 1;
}





/* smart device */
@media screen and (max-width:480px) {
	/* モーダルダイアログ */
	.modal-dialog.snp-modal-dialog {
			margin-left: 24px;
			margin-right: 24px;
	}
	.snp-theme-bar {
		height: 6px;
	}
	.snp-header {
		top: 6px;
	}
}
@media screen and (min-width:481px) and (max-width:1024px) {
	.snp-theme-bar {
		height: 6px;
	}
	.snp-header {
		top: 6px;
	}
}
/* Desktop */
@media screen and (min-width:1025px){

	.snp-content {
		padding-left: 32px;
		padding-right: 32px;
	}

	.snp-content .snp-radio {
		padding-left: 32px;
		padding-right: 32px;
	}

	.snp-image-viewer > img {
		max-height: 60%;
	}
	.snp-image-swipe-viewer .carousel-item img {
		max-height: 60%;
		max-width: 60%;
	}

	.snp-footer {
		padding-left: 32px;
		padding-right: 32px;
	}
	.snp-header {
		padding-left: 32px;
		padding-right: 32px;
	}
}