@charset "utf-8";

:root{
	--font-family: sans-serif;
	--max-content-width: none;
	--custom-scrollbar-width: 8px;
	--aside-top:65px;

	--background-contents-bg: #F3F3F3;
	--background-primary: #FFFFFF;
	--background-translucent: #1111114D;

	--text-blck: #000000;
	--text-primary: #111111;
	--text-link: #0153A3;
	--text-accent-primary: #0071BB;
	--text-accent-secondary: #A0B6D5;
	--text-on-fill: #FFFFFF;
	--text-alert: #D70000;
	--text-disabled: #AAAAAA;

	--surface-primary-default: #FFFFFF;
	--surface-accent-primary: #0071BB;
	--surface-primary-default: #FFFFFF;
	--surface-tertiary-default: #1111111A;
	--surface-accent-secondary-default: #E5EDF9;
	--surface-accent-primary-hover: #005E9B;
	--surface-table-header: #F3F3F3;
	--surface-primary-hover: #F3F3F3;
	--surface-secondary-hover: #DDDDDD;
	--surface-alert-hover: #E83333;
	--button-text-primary: #FFFFFF;
	--icon-primary: #111111B2;

	--border-primary: #707070;
	--border-secondary: #B8B8B8;
	--border-tertiary: #CFCFCF;
	--border-accent-primary: #005E9B;
	--border-accent-secondary: #B7C6DC;

	--icon-x: url(icon/x.svg);

	--drawing-black:#333333;
	--drawing-red:#FF0033;
	--drawing-blue:#0000CD;
	--drawing-green:#008000;
	--drawing-orange:#FF4500;
}

body{
	--aside-width: 360px;
	--aside-margin: 8px;
	--aside-current-width: var(--aside-width);
}

body{
	margin:0;
	font-family: var(--font-family);
	font-size:14px;
	line-height:1;
	min-height:100vh;
	background-color: var(--background-contents-bg);
	color: var(--text-primary);
}

.hidden{
	display:none !important;
}
.invisible{
	visibility:hidden;
}
.selectable:not(.selected) .selected-only,
.selectable.selected .not-selected-only{
	display:none;
}

a{
	color: var(--text-link);
	text-decoration:none;
}
a:not([href]){
	color: inherit !important;
}
a[href]:hover{
	text-decoration:underline;
}
select, ::part(common-select){
	box-sizing:border-box;
	height:40px;
	font-family: var(--font-family);
	font-size: 14px;
	padding-left:12px;
	padding-right:8px;
	border-radius:4px;
	border: 1px solid var(--border-primary) !important;
	background: var(--surface-primary-default);
	color: var(--text-primary);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	cursor: pointer;
}
input{
	font-family: var(--font-family);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
button{
	text-align:center;
	cursor:pointer;
	color: var(--text-primary);
	background-color: var(--surface-primary-default);
	font-family: var(--font-family);
}
button:disabled{
	cursor:not-allowed !important;
	color:var(--text-disabled) !important;
}
button:not(:disabled):hover{
	background-color: var(--surface-primary-hover);
}

button.action-button, ::part(action-button){
	box-sizing:border-box;
	font-family: var(--font-family);
	border-radius:4px;
	padding:0 16px;
	font-size:15px;
	line-height:30px;
	height:32px;
	text-align:center;
	border: 1px solid var(--border-accent-primary);
	color: var(--text-on-fill);
	background-color: var(--surface-accent-primary);
	white-space:nowrap;
	cursor:pointer;
}
button.action-button:hover, ::part(action-button):hover{
	background-color: var(--surface-accent-primary-hover);
}
button.clear-button, ::part(clear-button){
	box-sizing:border-box;
	font-family: var(--font-family);
	border-radius:4px;
	padding:0 16px;
	font-size:15px;
	line-height:30px;
	height:32px;
	text-align:center;
	border: 1px solid var(--text-primary);
	color: var(--text-primary);
	background-color: var(--surface-primary-default);
	white-space:nowrap;
	cursor:pointer;
}
button.clear-button:hover, ::part(clear-button):hover{
	background-color: var(--surface-primary-hover);
}

.header-contents h1{
	margin: 0;
	font-size: 22px;
	line-height:30px;
	height:44px;
	flex-grow: 1;
	text-align: center;
}
.header-contents h1 img{
	height:100%;
}
@media (width < 480px) {
	.header-contents h1{
		width: 44px;
		overflow: hidden;
		margin: 0 auto;
		flex-grow: unset;
	}
}
h2{
	margin:0;
	font-weight:bold;
	font-size:20px;
	line-height:24px;
	padding-left:8px;
	border-left:4px solid var(--text-accent-primary);
}
h3, ::part(h3){
	margin:0;
	font-weight:bold;
	font-size:19px;
	line-height:20px;
	padding-left:8px;
	border-left:4px solid var(--text-accent-secondary);
}
h4{
	margin:0;
	font-weight:bold;
	font-size:18px;
}

/* ヘッダ */
header{
}
.header-box{
	background-color: var(--background-primary);
	border-bottom:1px solid var(--border-tertiary);
}
.global-header{
	display:flex;
	margin:0 auto;
	padding:0 10px;
	align-items:center;
	gap:8px;
}
.global-header .header-title-box{
	display:flex;
	height:56px;
	align-items:center;
}
.global-header .header-title-box button{
	box-sizing:border-box;
	height:24px;
	width:24px;
	padding:0;
	border:none;
}
.global-header .header-title-box button.menu{
	display:inline-block;
	margin-right:16px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:18px 12px;
	background-image:url(../icon/menu.svg);
}
.global-header .header-title-box button.menu{
	display:none;
}
.logo{
	content:url(../img/logo.png);
	width:113px;
	height:22px;
	cursor:pointer;
}

.header-contents-box{
	flex-grow:1;
}
.header-ui-box{
	display:flex;
	gap:8px;
	align-items:center;
}
.header-ui-box button{
	margin-left:auto;
}
.header-ui-box button+button{
	margin-left:0;
}

.manual{
	display:inline-block;
	width:24px;
	height:24px;
	background:no-repeat center/contain url(../icon/info.svg);
}

/* フッタ */
footer{
	margin-top:8px;
	padding:2px 10px;
	line-height:18px;
	overflow:hidden;
	background-color: var(--background-primary);
}
.footer-box{
	display:flex;
	gap:16px;
	align-items:center;
}
.footer-loading{
	position:relative;
	flex-basis:40px;
	transform:translate(-8px, 0) scale(0.5);
}
.footer-copyright{
	font-size:12px;
	flex-grow:1;
	text-align:center;
}
.footer-copyright>span{
	white-space:nowrap;
}
.footer-version{
	display:inline-block;
	flex-basis:40px;
	text-align:right;
	font-size:11px;
	white-space:nowrap;
}
.floating-menu{
	display:none;
	position:fixed;
	right:15px;
	bottom:7px;
	z-index:3;
}

/* コンテンツ */
.contents-holder{
	position:relative;
	flex-grow:1;
	margin-top:8px;
}
.contents-holder .contents-width-holder{
	display:flex;
	padding:0 9px 0 10px;
}
.contents-main-holder{
	box-sizing:border-box;
	overflow: hidden;;
	padding:16px;
	background-color: var(--surface-primary-default);
	border: 1px solid var(--border-tertiary);
	border-radius: 4px;
	max-width: calc(100% - var(--aside-current-width) - var(--aside-margin));
	align-self: start;
	flex-grow:1;
}
body.full-height-page .contents-holder{
	display: flex;
	flex-direction: column;
}
body.full-height-page .contents-holder .contents-width-holder{
	box-sizing:border-box;
	width:100%;
	flex-grow: 1;
}
body.full-height-page .contents-main-holder{
	display:flex;
	flex-direction:column;
	flex-grow: 1;
	width:100%;
	align-self:auto;
}
body.full-height-page main{
	display:flex;
	flex-direction:column;
	flex-grow: 1;
}
body.full-height-page .contents-box-holder{
	display:flex;
	flex-direction:column;
	flex-grow: 1;
}
body.full-height-page .section-box{
	display:flex;
	flex-direction:column;
	flex-grow: 1;
}

.contents-main-holder .header-contents{
	display:none;
}

.contents-root{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.contents-scroller{
	overflow:auto;
}
.contents-root.print-mode{
	position:static;
	overflow:visible;
}
@media print {
.contents-scroller{
	overflow:hidden;
}
}

.contents-scroll-body{
	min-width:375px;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
body[layout=pc] .contents-scroll-body{
	min-width:1224px;
}
body[layout=sp] .contents-scroll-body{
	min-width:375px;
}
body[layout='small-pc'] .contents-scroll-body{
	min-width:750px;
}

.contents-body{
	position:relative;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	flex-grow:1;
}

.contents-width-holder{
	max-width:var(--max-content-width);
	margin-left:auto;
	margin-right:auto;
}
body.full-width-page .contents-width-holder{
	max-width:none;
}

.contents-holder>.qapi-error-box{
	max-width: calc(100% - var(--aside-current-width) - var(--aside-margin));
	width: calc(100% - var(--aside-current-width) - var(--aside-margin));
}

aside{
	margin-left:var(--aside-margin);
	max-width:var(--aside-width);
	min-width:var(--aside-width);
}
.page-loading-holder.qapi-loading::after{
	left:calc((100% - var(--aside-current-width) - var(--aside-margin)) / 2);
}

.gaget-holder{
	display: flex;
	flex-direction: column;
	top:0;
	gap: 8px;
}
.gaget-holder>div{
	position:relative;
}

.section-title{
	display:flex;
	align-items:center;
	gap:16px;
}
.section-title.no-margin{
	margin-top:0;
}
.section-title.border{
	border-bottom:1px solid var(--border-tertiary);
	padding-bottom:8px;
}
.section-title h1 + button,
.section-title h2 + button,
.section-title h3 + button,
.section-title h1 + div.align-right{
	margin-left:auto;
}
.section-title + section{
	margin-top:16px;
}
.section-title h1.full,
.section-title h2.full{
	margin-right:auto;
}
.contents-box-holder{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.contents-box{
	padding:16px;
	border-radius:8px;
	border:1px var(--border-tertiary) solid;
	background-color: var(--surface-primary-default);
	overflow:hidden;
}
.contents-box>.section-title:first-child{
	margin-top:0;
}
.contents-box.with-tab{
	padding-top:0;
}
.contents-box.with-tab qapi-slide-menu.full{
	margin-left:-24px;
	margin-right:-24px;
}
.multi-section{
	display: flex;
	flex-direction: column;
	gap:24px;
}

.section-contents{
	flex-direction:column;
	display:flex;
	gap:16px;
}
.section-block{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.section-block .section-box{
	margin-top:16px;
}

body.full-width-page{
	--aside-current-width: 0px;
	--aside-margin: 0px;
}
body.full-width-page aside{
	position:fixed;
	top:1px;
	right:2px;
	bottom:1px;
	z-index:3;
	overflow-y:auto;
	overflow-x:hidden;
	max-width: calc(var(--aside-width) + var(--custom-scrollbar-width) + 2px);
	min-width: calc(var(--aside-width) + var(--custom-scrollbar-width) + 2px);
	background-color: var(--background-primary);
}
body.full-width-page.use-scrollbar aside::-webkit-scrollbar {
	width: var(--custom-scrollbar-width);
	background: var(--background-contents-bg);
	border-radius: 8px;
}
body.full-width-page.use-scrollbar aside::-webkit-scrollbar-thumb {
	background: var(--border-secondary);
	border-radius: 8px;
}
body.full-width-page:not(.right-aside-shown) aside{
	display:none;
}
body.full-width-page.right-aside-shown .floating-menu{
	right: min(calc(var(--aside-width) + 2px), calc(100% - 34px));
}
body.full-width-page .floating-menu{
	display:block;
}

@media (width < 1200px) and (width >= 768px) {
	body[layout=responsive]{
		--aside-current-width: 0px;
		--aside-margin: 0px;
	}
	body[layout=responsive] .contents-holder .contents-width-holder{
		padding-left:0;
		padding-right:0;
	}
	body[layout=responsive] .contents-main-holder{
		border:none;
		border-radius:0;
	}
	body[layout=responsive] aside{
		position:fixed;
		top:65px;
		top:var(--aside-top);
		right:0;
		max-height:calc(100% - var(--aside-top));
		z-index:5;
		overflow-y:auto;
		overflow-x:hidden;
		max-width: calc(var(--aside-width) + var(--custom-scrollbar-width) + 2px);
		min-width: calc(var(--aside-width) + var(--custom-scrollbar-width) + 2px);
	}
	body[layout=responsive]:not(.right-aside-shown) aside{
		display:none;
	}
	body[layout=responsive] .pc-leyout-only{
		display:none !important;
	}
	body[layout=responsive] .floating-menu{
		display:block;
	}
	body[layout=responsive].right-aside-shown .floating-menu{
		right: min(calc(var(--aside-width) + 2px), calc(100% - 34px));
	}

	body[layout=responsive] .contents-box{
		border-radius:0;
		padding:16px;
		border-left:none;
		border-right:none;
	}
	body[layout=responsive] .contents-box.with-tab{
		padding-top:0;
	}
	body[layout=responsive] .contents-box.with-tab qapi-slide-menu.full{
		margin-left:-16px;
		margin-right:-16px;
	}
}
@media (width < 768px) {
	body{
		--aside-current-width: 0px;
		--aside-margin: 0px;
	}
	.contents-holder .contents-width-holder{
		padding-left:0;
		padding-right:0;
	}
	.contents-main-holder{
		border:none;
		border-radius:0;
	}
	aside{
		position:fixed;
		top:1px;
		right:0;
		bottom:1px;
		z-index:5;
		overflow:auto;
		max-width: calc(var(--aside-width) + var(--custom-scrollbar-width) + 2px);
		min-width: calc(var(--aside-width) + var(--custom-scrollbar-width) + 2px);
		background-color: var(--background-primary);
	}
	body.use-scrollbar aside::-webkit-scrollbar {
		width: var(--custom-scrollbar-width);
		background: var(--background-contents-bg);
		border-radius: 8px;
	}
	body.use-scrollbar aside::-webkit-scrollbar-thumb {
		background: var(--border-secondary);
		border-radius: 8px;
	}
	body:not(.right-aside-shown) aside{
		display:none;
	}
	.pc-leyout-only{
		display:none !important;
	}
	.floating-menu{
		display:block;
	}
	body.right-aside-shown .floating-menu{
		right: min(calc(var(--aside-width) + 2px), calc(100% - 34px));
	}

	.contents-box{
		border-radius:0;
		padding:16px;
		border-left:none;
		border-right:none;
	}
	.contents-box.with-tab{
		padding-top:0;
	}
	.contents-box.with-tab qapi-slide-menu.full{
		margin-left:-16px;
		margin-right:-16px;
	}
	.sp-full-width{
		margin-left:-16px;
		margin-right:-16px;
	}
}

button.reload, ::part(reload-button){
	border:none;
	padding:0;
	min-width:16px;
	min-height:16px;
	width:16px;
	height:16px;
	background-color:transparent;
	background-image:url(../icon/reload.svg);
	cursor:pointer;
}
button.reload:hover, ::part(reload-button):hover{
	background-color: var(--surface-primary-hover);
}

.show-gadget-button{
	width:32px;
	height:32px;
	padding: 4px;
	border: 1px solid var(--text-primary);
	border-radius: 50%;
	box-shadow: 0px 2px 2px -1px #00000033, 0px 2px 5px 0px #00000024;
}
.show-gadget-button::after{
	content:"";
	display:inline-block;
	margin-left:-1px;
	margin-top:-1px;
	width:24px;
	height:24px;
	opacity:0.9;
	background: no-repeat url(../icon/horz-arrow.svg) center center/contain;
	transform:scale(-1, 1);
}
body.right-aside-shown .show-gadget-button::after{
	margin-left:1px;
	margin-top:0px;
	transform:none;
}

qapi-slide-menu.only-single-col{
	display:none;
}

@media (width < 768px) {
	.large-only{
		display:none !important;
	}
	qapi-slide-menu.only-single-col{
		display:block;
	}
}
@media (width >= 768px) {
	.small-only{
		display:none !important;
	}
}

.print-frame{
	display:none;
}
.print-frame.pre-print{
	display:block;
	height:0;
	overflow:hidden;
}

/* 図面印刷 */
@media print {
	@page {
		size: A4 landscape;
	}

	/* 図面編集画面単独印刷 */
	body.drawings-print{
		background:none;
	}
	body.drawings-print footer,
	body.drawings-print .floating-menu,
	body.drawings-print .global-side-menu-layer,
	body.drawings-print capi-snack-bar,
	body.drawings-print .page-loading-holder{
		display:none !important;
	}
	body.drawings-print:not(.no-aside) aside{
		position:relative !important;
		display: block !important;
		align-self: start;
		top: auto;
	}

	body.drawings-print .contents-main-holder{
		padding-top:0;
		padding-left:8px;
	}

	/* 図面全ページ印刷 */
	body.drawings-all-page-print .contents-root,
	body.drawings-all-page-print .floating-menu,
	body.drawings-all-page-print .global-side-menu-layer,
	body.drawings-all-page-print .page-loading-holder,
	body.drawings-all-page-print .capi-dialog-holder{
		display:none !important;
	}

	body.drawings-all-page-print .print-frame{
		display:flex;
		flex-direction:column;
	}
}