table {
    font-size: inherit;
}

/* 2文字のボタン */
button.smallButton3 {
  min-width: 0px !important;
  width: 55px !important;
  padding: var(--size1);
}


button.row2 {
  height: var(--size8);
  line-height: 1;
}
/* 右と下に影 */
th.borderRightBottom{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -2px 0 0 #A7A9BC inset;
}

@media screen and (min-width: 768px) {
    .rightAlignCommands {
        margin: 0 var(--size6) 0 0;
    }
}

.borderNone {
    border: none !important;
    box-shadow: 0 0 0 0 !important;
}

td.baseTableTd {
    line-height: 1.2;
    background-color: #fbfbf7;
}

button[class="iconOnly"],[class="reversal"]{
	transform:rotate(180deg);
}

.styleMessage {
  margin        : 16px 0px 8px;
  padding       : 5px 0px;
}
.cautionMessage {
  color           : #C00000;
  font-weight     : bold;
}
.cautionMessage::before {
  content: "";
  display: inline-block;
  width: var(--size6);
  height: var(--size6);
  background-image:url(img/icon_caution.svg);
  background-size: contain;
  vertical-align: text-bottom;
}

dl.file-dragdrop-container-info>dd>.upload-file-name{
    width: calc( 100% - var(--input-container-width));
    word-break: break-all;
    box-sizing: border-box;
    color: #006159;
}

.minorNav > button:not(first-child){
	margin-left:var(--size4);
}
.borderRightBold{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-2px 0 0 0 #A7A9BC inset,
           0 -1px 0 0 #A7A9BC inset;
}

div.libDetail {
  display: grid;
  gap: var(--size4);
}
div.libDetail > a {
  margin-top: calc(var(--size10) * -1);
  height: var(--size4);
}
div.libDetail > a.noAdd {
  margin-top: calc(var(--size6) * -1);
}
div.libLink {
  display: flex;
  gap: var(--size4);
}
div.libLink > a {
  min-height: var(--size7);
  align-items: center;
  flex-wrap: wrap;
}
input[type="text"]:read-only{
	box-shadow:initial;
	background-color:#f2f2f2;
}

/*-------------------------------------------------------------------------------------
  tab
-------------------------------------------------------------------------------------*/
.tab{
	position:relative;
  display: grid; 
  grid-template-columns: 1fr max-content; 
  grid-template-rows: max-content 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "tab omit"
    "body body";
	margin-top:var(--size6);
}
.tab > ul { grid-area: tab; }
.tab > .omit {
	grid-area: omit;
	align-self:center;
	margin:0 var(--size6);
	width:var(--size6);
	height:var(--size6);
}
.tab > div {
	display:none;
	grid-area: body;
	padding:var(--size4) 0;
	border-top:1px solid #A7A9BC;
	overflow:auto;
	scroll-behavior: smooth;
}
.tab > div.show {
	display:grid;
}
.tab > div > button{
	justify-self:start;
	min-width:0;
	width:80px;
	margin-left:var(--size4);
	margin-bottom:var(--size6);
}

.tab:not(.major) > ul > li:nth-child(3) ~ li{
	display:none;
}
.tab > ul:not(.floatList){
	display:flex;
	align-items:stretch;
	margin:0 var(--size4);
}
.tab > ul input[type="radio"]{
	display:none;
}
.tab > ul > li{
	margin: 0 var(--size4) 0 0;
}
.tab > ul > li,
.tab > ul > li > label,
.tab > ul > li > label > span{
	display:flex;
	justify-content:center;
	align-items:stretch;
	text-align:center;
	line-height:1.2;
	color:#6b6c7e;
}
.tab > ul > li > label > span{
	padding:var(--size1);
}
.tab > ul > li > label:hover > input + span{
	color:#006159;
}
.tab > ul > li > label > input:checked + span{
	color:#222222;
	box-shadow:0 -4px 0 0 #006159 inset;
}
.tab > ul > li > label > input:disabled + span{
	color:#BCBCBC;
}
.tab.major{
  display: grid; 
  grid-template-columns: 1fr ; 
  grid-template-rows: max-content 1fr; 
  gap: 0px 0px;
	margin:0;
}
.tab.major > div {
	border-top:0;
	padding-top:0;
}
.tab.major > .tab {
	margin-top:var(--size4);
}
.tab.major > ul{
	justify-content:center;
	display:none;
}
.tab.major > ul label > span{
	font-size:18px;
	width:168px
}
.tab.major > ul + div{
	border-top:var(--size6) solid transparent;
	padding: 0;
}
.tab.major > select{
	font-size:18px;
	margin:0 var(--size4);
	color:#006159;
	font-weight:bold;
}
.tab.major > ul > li > label > input:checked + span{
	box-shadow:none;
}
.tab.major > .tab > ul{
	font-size:var(--size4);
}
/*-------------------------------------------------------------------------------------
  minorNav
-------------------------------------------------------------------------------------*/
.minorNav{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	row-gap: var(--size2);
}
.minorNav > ol{
	flex-grow:1;
	display:flex;
	align-items:center;
	margin:0 0 0 var(--size4);
}
.minorNav > ol > li::before{
	content:none;
}
.minorNav > ol a{
	position:relative;
	display:flex;
	align-items:center;
	width:40px;
	height:32px;
	padding:0 var(--size4);
	border:solid transparent;
	border-width:0 var(--size3); 
	color:#ffffff;
	background:
		url("img/arrow_rear.svg") no-repeat left top / auto 100% border-box,
		url("img/arrow_front.svg") no-repeat right top / auto 100% border-box,
		url("img/arrow_body.svg") repeat-x center top / auto 100% padding-box transparent;
	box-sizing:border-box;
	overflow:hidden;
	text-indent:100px;
	white-space:nowrap;
	transform-origin: top left;
	transform: scale(1.04,1);
	text-decoration:none;
}
.minorNav > ol a:hover{
	background-image:
		url("img/arrow_rear_hover.svg"),
		url("img/arrow_front_hover.svg"),
		url("img/arrow_body_hover.svg");
	text-decoration:none;
}
.minorNav > ol a.disabled{
	color:#bcbcbc;
	background-image:
		url("img/arrow_rear_disabled.svg"),
		url("img/arrow_front_disabled.svg"),
		url("img/arrow_body_disabled.svg");
	text-decoration:none;
	pointer-events:none;
}
.minorNav > ol a::before{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:flex;
	justify-content:center;
	align-items:center;
	text-indent:0;
}
.minorNav > ol a.current{
	color:#008C70;
	width:auto;
	background-image:
		url("img/arrow_rear_current.svg") ,
		url("img/arrow_front_current.svg"),
		url("img/arrow_body_current.svg");
	overflow:auto;
	text-indent:0;
	white-space:normal;
}
.minorNav > ol a.current::before{
	position:static;
}
.minorNav > ol > li:first-child a{
	background-image:
		url("img/arrow_rear_first.svg") ,
		url("img/arrow_front.svg"),
		url("img/arrow_body.svg");
}
.minorNav > ol > li:first-child a:hover{
	background-image:
		url("img/arrow_rear_first_hover.svg") ,
		url("img/arrow_front_hover.svg"),
		url("img/arrow_body_hover.svg");
	text-decoration:none;
}
.minorNav > ol > li:first-child a.current{
	padding-left:0;
	background-image:
		url("img/arrow_rear_current_first.svg") ,
		url("img/arrow_front_current.svg"),
		url("img/arrow_body_current.svg");
}
.minorNav > ol > li:first-child a.disabled{
	background-image:
		url("img/arrow_rear_disabled_first.svg") ,
		url("img/arrow_front_disabled.svg"),
		url("img/arrow_body_disabled.svg");
}
.minorNav > div{
	flex:1 0 100%;
	padding:var(--size4) var(--size6) 0 var(--size6);
	box-sizing:border-box;
}
.minorNav .toggle{
	display:none;
}
.minorNav > button:first-child{
	margin-left:var(--size6);
}

.rightAlignCommands{
  display: grid; 
  grid-template-columns: max-content; 
  grid-template-rows: 1fr; 
  gap: 0px var(--size2);
	grid-auto-flow: column;
	grid-auto-columns: max-content; 
  justify-content: end; 
  justify-items: end;
	margin:0;
}
.childScroll > .rightAlignCommands{
	margin-right:var(--size4);
}
.rightAlignCommands .toggle{
	display:none;
}
/*-------------------------------------------------------------------------------------
  section
-------------------------------------------------------------------------------------*/
section h1{
	font-weight:bold;
	margin-bottom:var(--size4);
}
section header{
	display:contents;
}
section footer{
  display: grid; 
  grid-template-columns: max-content; 
  grid-template-rows: 1fr; 
  gap: 0px var(--size4);
	grid-auto-flow: column;
	grid-auto-columns: max-content; 
  justify-content: center; 
  justify-items: center;
	margin:var(--size6) 0;
}
section header em{
	display:block;
	margin-top:calc(var(--size4) * -1);
	margin-bottom:var(--size2);
}
section section:not(:first-of-type){
	margin-top:var(--size4);
}
section section:first-of-type{
	margin-top:var(--size4);
}
.toggleSection > div{
	margin:var(--size4);
}
.toggleSection dl{
	margin:0 calc(var(--size4) * -1);
	border-bottom:1px solid #A7A9BC;
}
.toggleSection dl dt{
	padding-right:var(--size2);
}
.toggleSection dl dd{
	padding-left:var(--size2);
}

.toggleSection > div > p{
	margin:0  calc(var(--size4) * -1);
	padding: var(--size4);
	border-bottom:2px solid #A7A9BC;
}
.toggleSection > div > p:only-child{
	border-top:1px solid #A7A9BC;
}
.toggleSection > header{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	background-color:#E7EAED;
	padding:0 var(--size4);
	min-height:var(--size7);
}
.toggleSection > header > h1{
	margin:0;
	font-size:16px;
	font-weight:normal;
	order:2;
	margin-left:var(--size4);
}
.toggleSection > header > button + h1,
.toggleSection .toggleSection > header > button + h1{
	margin-left:var(--size2);
	margin-right:1rem;
}
.toggleSection > header > .toggle{
	order:1;
	width:var(--size5);
	height:var(--size5);

}
.toggleSection > header > a{
	order:3;
}
.toggleSection > header > em,
.toggleSection > header > span{
	order:3;
	margin:0;
}
.toggleSection > header > span{
	flex-basis:100%;
	margin:var(--size2) 0;
}

.toggleSection.hide > header > span{
	display:none;
}
.toggleSection .toggleSection.hide > header{
	border-bottom-width:2px;
}

.toggleSection .toggleSection{
	margin:var(--size4) calc(var(--size4) * -1) 0 calc(var(--size4) * -1);
}
.toggleSection .toggleSection > div{
	margin-top:0;
}
.toggleSection .toggleSection > header{
	background-color:transparent;
	border-bottom:1px solid #A7A9BC;
}
.toggleSection .toggleSection > header > h1{
	margin:0;
	font-size:1rem;
}
.toggleSection section + em{
	display:block;
	margin:var(--size2) 0;
}
section.hide{
	margin-bottom:var(--size4);
}

section.hide > header{
	margin-bottom:0;
}
section.hide > div,
section.hide > footer{
	display:none;
}
/*-------------------------------------------------------------------------------------
  dl
-------------------------------------------------------------------------------------*/
dl{
  display: grid; 
  grid-template-columns: max-content 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px;
	border-top:1px solid #A7A9BC;
	margin-top:var(--size2);
}
dt,dd{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	padding:8px var(--size4);
	border-bottom:1px solid #A7A9BC;
	box-sizing:border-box;
}
dt{
	background-color:#E7EAED;
}
dd{
	vertical-align:middle;
	background-color:#ffffff;
}

/*-------------------------------------------------------------------------------------
  for - smp　例外的に記述。
	こうしないと、display：gridの指定が残ってしまうのか、tabletやpcで崩れが発生した。
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	th{
		background-color:#ffffff;
	}
	th,td{
		padding:var(--size4) var(--size4) var(--size4) var(--size2);
	}
	.scrollTable{
		margin:0 -16px;
	}
	.minorNav + .scrollTable{
		margin:0;
	}
	.scrollTable table,
	.scrollTable tbody{
		display:contents;
	}
	.scrollTable thead{
		display:none;
	}
	th.asc,
	th.desc{
		background-image:none;
	}
	.scrollTable tr{
		display: grid;
		grid-template-columns: max-content 1fr;
		grid-template-rows: repeat(3, max-content);
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
	    "th1 td1"
	    "th2 td2"
	    "th3 td3";
		border-bottom:2px solid #A7A9BC;
	}
	.scrollTable tr > th{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
	}
	.scrollTable:not(.onCheck) tr > th{
		justify-content:flex-end;
	}
	.scrollTable tr > td{
		margin-right:var(--size4);
	}
	.scrollTable tr > td.check{
		margin-right:0;
		padding-left:var(--size4);
	}
	.scrollTable tr > th:nth-of-type(1) { grid-area: th1; }
	.scrollTable tr > th:nth-of-type(1) + td { grid-area: td1; }
	.scrollTable tr > th:nth-of-type(2) { grid-area: th2; }
	.scrollTable tr > th:nth-of-type(2) + td { grid-area: td2; }
	.scrollTable tr > th:nth-of-type(3) { grid-area: th3; }
	.scrollTable tr > th:nth-of-type(3) + td{ grid-area: td3; }
	tr{
		background-color:#ffffff;
	}
	.scrollTable tbody td {display:none; }
	.scrollTable tr > td:first-child,
	.scrollTable tbody th + td {
		display:block; 
	}
	.scrollTable tr > th{
		margin-left:var(--size4);
	}
	.scrollTable tr > .check ~ th{
		margin-left:0;
	}
	.scrollTable tr > th:nth-of-type(1),
	.scrollTable tr > th:nth-of-type(1) + td,
	.scrollTable tr > th:nth-of-type(2),
	.scrollTable tr > th:nth-of-type(2) + td{
		border-bottom:1px solid #A7A9BC;
	}
	.scrollTable tr > th:last-of-type,
	.scrollTable tr > th:last-of-type + td{
		border-bottom-width:0;
	}
	.scrollTable tbody tr:first-child{
		border-top:2px solid #A7A9BC;
	}
}


/*-------------------------------------------------------------------------------------
  for - tablet
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	:root{
		--layoutChassisInfoDt:120px;
		--textareaRow:3;
	}
	html,body{
		min-width: 768px;
		height:100vh;
	}
	.rightAlignCommands{
	  gap: 0px var(--size4);
	}
	.rightAlignCommands .toggle{
		display:inline-flex;;
	}
	body > header{
		justify-self: stretch;
	}
	body > header > div{
		padding:0 var(--size6);
	}
	body,
	.tab{
		overflow:hidden;
	}
	input{
		height:var(--size8);
	}
	body > header > ul{
		padding:var(--size4) var(--size6);
	}
	button.primary{
		height:var(--size8);
	}
	button.secondary{
		height:var(--size8);
	}
	button.iconOnly,
	button.secondary.iconOnly{
		min-width:0;
		width:var(--size7);
		height:var(--size7);
	}
	body > header > div > figure > figcaption{
		display:block;
	}
	.tab.major > select{
		display:none;
	}
	.tab.major > ul{
		display:flex;
	}
	.tab.major > .tab {
		margin-top:var(--size6);
	}
	.tab > ul br{
		display:none;
	}
	.tab > ul > li > label > span {
		padding:var(--size1) var(--size4);
	}
	.minorNav{
		justify-content:space-between;
		flex-wrap:nowrap;
	}
	.minorNav > ol a{
		width:auto;
		overflow:auto;
		text-indent:0;
		white-space:normal;
	}
	.minorNav > ol a::before{
		position:static;
	}
	.minorNav .toggle{
		display:inline-flex;
	}
	.minorNav > ol{
		margin:0 0 0 var(--size6);
	}
	.minorNav > div{
		flex:0 0 auto;
		padding:0;
	}
	.rightAlignCommands{
		margin:0 var(--size6) 0 0;
	}
	.toggleSection > div{
		margin:0;
	}
	.toggleSection section .rightAlignCommands{
		margin:0 0 0 0;
	}
	.minorNav .info,
	.rightAlignCommands .info{
		display:none;
	}
	section h1{
		margin-bottom:0;
	}
	section header{
		display:flex;
		margin-bottom:var(--size2);
	}
	section header em{
		display:inline;
		margin:0 0 0 var(--size4);
	}
	section footer{
		margin:var(--size6) 0 var(--size7) 0;
	}
	.toggleSection{
		margin:var(--size4) 0;
		vertical-align:top;
	}
	.toggleSection:last-child{
		margin-bottom:0;
	}
	.toggleSection dl,
	.toggleSection .toggleSection{
	    margin-left: 0;
	    margin-right: 0;
	}
	.toggleSection .toggleSection dl{
		border-width:0;
	}
	section section{
		margin-top:var(--size7);
	}
	.toggleSection section .scrollTable{
	    margin-left: calc(var(--size4) * -1);
	    margin-right: calc(var(--size4) * -1);
	}
	th{
		background-size: var(--size2) auto;
	}
	.scrollTable,
	.childScroll{
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-template-rows: max-content 1fr;
	  gap: 0px 0px;
	  overflow:hidden;
	}
	.childScroll{
	  display: grid; 
	  grid-template-columns: 1fr; 
	  grid-template-rows: max-content max-content max-content; 
	  gap: 0px var(--size2);
		grid-auto-flow: row;
		grid-auto-rows: 1fr; 
	}
	.scrollTable .scroll{
		overflow:auto;
		border-top:1px solid #A7A9BC;
	}
	.scrollTable table{
		min-width:100%;
	}
	.scrollTable table .check{
		padding-right:0;
		text-align:right;
	}
	.scrollTable table .check.borderRight{
		padding-right:var(--size1);
	}
	th input[type="text"],
	th select{
		width:100%;
	}
	th,td{
		padding:var(--size1) var(--size2) calc(var(--size1) + 1px) var(--size2);
		box-shadow:0 -1px 0 0 #A7A9BC inset;
		white-space:nowrap;
		text-align:left;
		font-weight:normal;
	}
	thead th{
		padding-bottom: calc(var(--size1) + 2px);
		box-shadow:0 -2px 0 0 #A7A9BC inset;
	}
	.scrollTable thead .filter{
		display:table-row;
	}
	.scrollTable thead .filter.show{
		display:table-row;
	}
	.borderRight{
		padding-right:calc(var(--size2) + 1px);
		box-shadow:-1px 0 0 0 #A7A9BC inset,
               0 -1px 0 0 #A7A9BC inset;
	}
	th.borderRight{
		padding-right:calc(var(--size2) + 1px);
		box-shadow:-1px 0 0 0 #A7A9BC inset,
               0 -2px 0 0 #A7A9BC inset;
	}
	th.borderRight[colspan]{
		box-shadow:-1px 0 0 0 #A7A9BC inset,
               0 -1px 0 0 #ffffff inset;
	}
	th.borderRight[colspan][rowspan]{
		box-shadow:-1px 0 0 0 #A7A9BC inset,
               0 -1px 0 0 #A7A9BC inset;
	}
	.check{
		padding-right:0;
		text-align:right;
	}
	.scrollTable table{
		table-layout:fixed;
	}
	.legend{
		display:flex;
    margin: var(--size2) var(--size4) 0 var(--size4);
	}
	.scrollTable table{
		display:table;
	}
	.scrollTable tbody{
		display:table-row-group;
	}
	.scrollTable thead{
		position:sticky;
		top:0;
		z-index:2;
		display:table-header-group;
		background-color:#E7EAED;
	}
	.scrollTable tr{
		display: table-row;
	}
	.scrollTable tbody th {
		display:none;
	}
	.scrollTable tbody td {
		display:table-cell;
	}
	.toggleSection .scrollTable{
		margin:var(--size4) 0 0 0;
	}
	body.majorClose > header > ul,
	body.majorClose > .navi > ul,
	body.majorClose > .navi > div > ul,
	body.majorClose > .navi > div > button,
        body.majorClose > .navi > div{
		display:none;
	}
	body.majorClose > .navi > div > div{
		border-top-width:0;
		padding-top:0;
	}
	.tab > .childScroll{
		padding-bottom:0;
	}
	.balloon{
		left:auto;
		right:var(--size6);
	}
	.balloon::before,
	.balloon::after{
		right:38px;
	}
	.balloon > header{
		display:none;
	}
	.toggleSection .toggleSection > header{
		margin:0;
	}
	.toggleSection section > div,
	.toggleSection section > header{
		padding: 0 var(--size4);
	}
	.toggleSection .toggleSection > div,
	.toggleSection section > .orderedDiv{
		padding: 0;
	}
	.toggleSection > div > p{
		margin:0;
	}
	.toggleSection section + em{
		margin:var(--size2) var(--size4);
	}
	.toggleSection > header > h1:only-child{
		margin-left:0;
	}
	.orderedDiv {
    margin: 0;
	}
	body > .scrollTop{
		display:none;
	}
	div > .scrollTop{
		position:static;
		right:var(--size4);
		bottom:var(--size4);
		display:inline-flex;
		width:auto;
		height:auto;
		margin:0 var(--size4) 0 auto;
		padding-left:20px;
		overflow:visible;
		text-indent:0;
		white-space:normal;
		background-size:12px 12px;
	}
	.toggleSection dl dt,
	.toggleSection dl dd{
		padding-top:var(--size1);
		padding-bottom:var(--size1);
	}
	.minorNav:first-child{
		position:sticky;
		top:0;
		margin-top:calc(var(--size4) * -1);
		padding-top:var(--size4);
		padding-bottom:var(--size2);
                transform:none;
		background-color:#fbfbf7;
		z-index:3;
	}
	.minorNav:first-child + .toggleSection{
		margin-top:var(--size2);
	}
	.information{
		margin:0 var(--size6) var(--size4) var(--size6);
	}
	.pager > button {
	  display: inline-flex;
		min-width:var(--size8);
		padding:0;	
	}
	.pager > button > span {
	  display: inline;
	}
	.pager > button:nth-child(1),
	.pager > button:nth-last-child(1) {
		min-width:74px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
	.childScroll > .rightAlignCommands{
		position:sticky;
		top:0;
		background-color:#fbfbf7;
		margin-top:calc(var(--size4) * -1);
		margin-right:0;
		padding-right:var(--size4);
		padding-bottom:var(--size2);
		padding-top:var(--size4);
		transform:translate(0,calc(var(--size4) * -1));
		z-index:3;
	}
	.childScroll > .rightAlignCommands .legend{
		margin-top:0;
	}
}
/*-------------------------------------------------------------------------------------
  for - pc
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
	:root{
		--layoutChassisInfoDt:195px;
		--textareaRow:3;
	}
	html{
		display: grid; 
		overflow:hidden;
	  justify-content: center; 
	  justify-items: center;
		background-image:  linear-gradient(to bottom, #81E3CF 0%,#81E3CF 100%);
		background-size:  10px var(--size9);
		background-repeat: repeat-x;
	}
	body{
		display: grid; 
	  grid-template-columns: 1fr; 
	  gap: 0px 0px;
		background-color:transparent;
	}
	main{
		min-width:1280px;
	}
	th,td{
		padding:var(--size1) var(--size2);
		max-width:500px;
	}
	td {
		background-size:14px 14px;
		white-space:normal;
	}
	col{
		display:none;
	}
	input{
		height:var(--size7);
	}
	input[type="radio"],
	input[type="checkbox"]{
		width:var(--size4);
		height:var(--size4);
	}
	input[type="radio"]:checked{
		box-shadow: 0 0 0 3px #ffffff inset;
	}
	input[type="radio"]:disabled{
		background-color:#bcbcbc;
	}
	input[type="radio"]:disabled,
	input[type="checkbox"]:disabled{
		box-shadow:initial;
	}
	button.primary{
		min-width:143px;
		height:var(--size7);
	}
	button.secondary{
		min-width:143px;
		height:var(--size7);
	}
	button.iconOnly{
		min-width:0;
    width: var(--size7);
		height:var(--size7);
	}
	.tab > ul:not(.floatList){
		margin:0 var(--size6);
	}
	.tab.major > ul label > span{
		width:216px;
	}
	.tab:not(.major) > ul > li:nth-child(3) ~ li{
		display:block;
	}
	.tab > .omit{
		display:none;
	}
	section footer{
		margin:var(--size4);
	}
	section section:first-of-type {
		margin-top: var(--size2);
	}
	.scrollTable .legend,
	.scrollTable .scroll {
	  margin: var(--size2) 0 0 0;
	}
	.scrollTable input[type="checkbox"]{
		width:var(--size4);
		height:var(--size4);
	}
	.scrollTable td{
		line-height:1;
	}
	.scrollTable .check,
	.scrollTable th.check,
	.scrollTable td.check{
		padding-right:var(--size1);
		vertical-align:middle;
		padding:var(--size1);
		min-width:24px !important;
		max-width:24px;
		width:24px;
		text-align:center;
	}
	.information header .close{
		width:8px;
		height:8px;
	}
	.toggleSection dl{
		margin:0;
		border-bottom:0;
	}
	.toggleSection {
    margin: var(--size4) var(--size6) 0 var(--size6);
	}
	.toggleSection section .rightAlignCommands{
		margin:0 calc(var(--size4) * -1) 0 0;
	}
	.toggleSection .toggleSection > header{
		margin:0;
		padding:0;
	}
	body.majorClose > header > ul,
	body.majorClose > .navi > ul,
	body.majorClose > .navi > div > ul,
	body.majorClose > .navi > div > button{
		display:none;
	}
	body.majorClose > .navi > div > div{
		border-top-width:0;
		padding-top:0;
	}
	body.majorClose > .navi > div{
		margin-top:0;
		padding-top:0;
		border-top:0 none;
	}
	.tab > div > button{
		margin-left:var(--size6);
		margin-bottom:var(--size2);
	}
	.minorNav + .scrollTable{
		margin-left:var(--size6);
		margin-right:var(--size6);
	}
	.pager > button {
	  display: inline-flex;
		min-width:var(--size7);
		padding:0;	
	}
	.pager > button:nth-child(1),
	.pager > button:nth-last-child(1) {
		min-width:114px;
	}
}

/*-------------------------------------------------------------------------------------
  詳細画面固有
-------------------------------------------------------------------------------------*/
.layoutChassisInfo1,
.layoutChassisInfo2,
.layoutChassisInfo3,
.layoutChassisInfo4,
.layoutChassisInfo5,
.layoutChassisInfo6,
.layoutChassisInfo9{
  grid-template-columns: var(--layoutChassisInfoDt) 1fr;
}
.layoutChassisInfo7{
  grid-template-columns: 130px 1fr 130px 1fr;
  grid-template-rows: 1fr 1fr;
}
.layoutChassisInfo8{
  grid-template-columns: 130px 1fr 130px 1fr;
  grid-template-rows: 1fr;
}
/*-------------------------------------------------------------------------------------
  詳細画面固有 - for - tablet
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	.layoutChassisInfo1{
	  grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
	  grid-template-rows: 1fr 1fr 1fr;
	}
	.layoutChassisInfo1 > dd:last-child{
		grid-column:2 / span 5;
	}
	.layoutChassisInfo2,
	.layoutChassisInfo4,
	.layoutChassisInfo9{
	  grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
	}
	.layoutChassisInfo3,
	.layoutChassisInfo6,
	.layoutChassisInfo8{
	  grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
	}
	.layoutChassisInfo5,
	.layoutChassisInfo7{
	  grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
	  grid-template-rows: 1fr;
	}
	.layoutChassisInfo5 > dd:last-child{
		grid-column:2 / span 7;
	}
	.layoutChassisInfo9 > dd:last-child{
		grid-column:4 / span 3;
	}
}
/*-------------------------------------------------------------------------------------
  詳細画面固有 - for - pc
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
}

/*-------------------------------------------------------------------------------------
	パターン�@画面固有 for - smp
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.scrollTable.onCheck tr{
		grid-template-columns: max-content repeat(2, 1fr);
		grid-template-areas:
	    "check th1 td1"
	    "check th2 td2"
	    "check th3 td3";
	}
	.scrollTable.onCheck tr > td:first-child { grid-area: check; }
}

/*-------------------------------------------------------------------------------------
	パターン�A画面固有
-------------------------------------------------------------------------------------*/
.labelInput{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	margin-top:var(--size4);
}
.labelInput:first-child{
	margin-top:0;
}

.labelInput input[type="text"]{
	flex:1 0 100%;;
}
.labelInput input[type="radio"],
.labelInput input[type="checkbox"]{
	margin-right:var(--size2);
}
.labelInput + em{
	display:block;
	margin-top:var(--size4);
}
em + .labelInput{
	margin-top:var(--size2);
}
.layoutOfficeCode{
  display: grid; 
  grid-template-columns: 1fr min-content max-content; 
  grid-template-rows: max-content repeat(2, 1fr); 
  gap: var(--size2) var(--size2); 
  grid-template-areas: 
    "head head head"
    "input input clear"
    "b button button"; 
	margin-bottom:var(--size4);
}
.layoutOfficeCode > label { grid-area: head; }
.layoutOfficeCode > input{ grid-area: input; }
.layoutOfficeCode > .secondary { grid-area: clear; }
.layoutOfficeCode > .primary { grid-area: button; align-self:end;}
.layoutCarrierInformation{
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-direction:column;
}
.layoutCarrierInformation input[type="text"]{
	align-self:stretch;
	flex:0 0 auto;
	margin:var(--size2) 0;
}
.layoutCarrierInformation button{
	align-self:flex-end;
}
.layoutCarrierInformation br{
	display:none;
}
.cameraInputLabelResponsive{
	height: var(--size7);
	border: 1px solid #A7A9BC;
	border-radius: 2px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: #222222;
}

/*-------------------------------------------------------------------------------------
  パターン�A画面固有 - for - tablet
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	.labelInput{
	  display: grid; 
	  grid-template-columns: max-content 1fr; 
	  grid-template-rows: 1fr; 
	  gap: 0px var(--size2);
		grid-auto-flow: column;
		grid-auto-columns: max-content; 
		align-items:center;
		margin-top:var(--size2);
	}
	.labelInput input[type]{
			margin:0;
	}
	.labelInput + em {
    margin-top: var(--size2);
	}
	.layoutBusinessOperatorIinformation{
	  display: grid; 
	  grid-template-columns: 180px 1fr 180px 1fr; 
	  grid-template-rows: 1fr; 
	  gap: 0; 
	}
	.layoutBusinessOperatorIinformation br{
		display:none;
	}
	.toggleSection .layoutBusinessOperatorIinformation,
	.toggleSection .layoutOfficeCode2{
		border-bottom:0 none;
	}
	.layoutOfficeCode{
	  display: grid; 
	  grid-template-columns: max-content 284px max-content 1fr; 
	  grid-template-rows: 1fr; 
	  gap: var(--size2); 
	  grid-template-areas: "head input clear button";
		align-items:center;	
	}
	.layoutOfficeCode .primary{
		justify-self:end;
	}
	.layoutOfficeCode2{
	  display: grid; 
	  grid-template-columns: 140px 100px 80px 1fr 140px 130px; 
	  grid-template-rows: max-content max-content; 
	  gap: 0px 0px; 
	}
	.layoutOfficeCode2 br{
		display:none;
	}
	.layoutOfficeCode2 dd:nth-of-type(1) { grid-area: 1 / 2 / 2 / 5; }
	.layoutCarrierInformation{
	  grid-template-columns:  max-content max-content 1fr max-content; 
	}
	.layoutCarrierInformation br{
		display:inline;
	}
	.layoutCarrierInformation .labelInput{
		margin:0;
		line-height:1;
	}
	.cameraInputLabelResponsive{
		height:var(--size8);
	}
}
/*-------------------------------------------------------------------------------------
  パターン�A画面固有 - for - pc
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
	.labelInput{
	  display: grid; 
	  grid-template-columns: 426px 480px; 
	  grid-template-rows: 1fr; 
		grid-auto-flow: column;
		grid-auto-columns: max-content; 
	  gap: 0px var(--size4);
		align-items:center;
	}
	.labelInput > label{
		text-align:right;
	}
	.labelInput input[type="text"]{
			width:480px;
	}
	.labelInput + em {
    margin: var(--size2)  0 0 244px;
	}
	.layoutOfficeCode{
	  display: grid; 
	  grid-template-columns: max-content 1fr max-content max-content; 
	  grid-template-rows: 1fr; 
	  gap: var(--size2); 
	  grid-template-areas: "head input clear button";
		align-items:center;	
		margin-bottom:var(--size4);
	}
	.layoutOfficeCode .primary{
		justify-self:end;
	}
	.layoutCarrierInformation{
	  grid-template-columns:  228px 180px 480px max-content; 
	}
	.layoutCarrierInformation .labelInput{
	  grid-template-columns: max-content max-content; 
		margin:0;
		line-height:1;
	}
	.layoutCarrierInformation br{
		display:none;
	}
}

/*-------------------------------------------------------------------------------------
	固有（パターン�B）
-------------------------------------------------------------------------------------*/
.copy{
	background-image:url("img/icon_copy.svg"),url("img/icon_copy_hover.svg");
}
.column2SectionPrev .rightAlignCommands{
	margin: 0 var(--size4);
}
.column2Section{
	margin-top:var(--size2);
}
.column2Section .scrollTable{
	margin:var(--size2) 0 0 0;
}
.column2Section .scrollTable td{
	padding-left:calc(var(--size6) + (var(--size2) * 2));
}
.column2Section > .toggleSection ~ .toggleSection{
	margin-top:var(--size6);
}
/*-------------------------------------------------------------------------------------
  固有（パターン�B）- for - tablet
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	.column2Section .toggleSection{
		margin: var(--size4) 0 0 0;
	}
	.column2Section > .toggleSection{
		margin-top: var(--size2);
	}
	.column2Section .rootSection:first-child{
		margin-top: 0;
	}
	.column2Section .rootSection .scrollTable{
		margin: 0;
	}
	.column2Section .scrollTable td:first-of-type ~ td{
		padding-left:var(--size2);
	}
	.column2Section .scrollTable td{
		height:44px;
	}
	.column2Section .scrollTable button.iconOnly{
		width:var(--size6);
		height:var(--size6);
		margin-left:var(--size4);
	}
	.column2Section .scrollTable thead th:first-child{
    padding-left: var(--size4);
	}
	.column2Section .scrollTable td{
    padding-left: calc(var(--size6) + (var(--size2) * 2) + var(--size4));
		background-position: var(--size4) center;
	}
}
/*-------------------------------------------------------------------------------------
  固有（パターン�B）- for - pc
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
	.column2Section{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		gap: 0px var(--size6);
		overflow:hidden;
		margin:0 var(--size4);
	}
	.column2Section .rootSection{
		margin:0;
	  display: grid; 
	  grid-template-columns: 1fr; 
	  grid-template-rows: max-content 1fr; 
	  gap: 0 0;
		overflow:hidden;
	}
	.column2Section .scrollTable{
		grid-template-rows: 1fr;
	}
	.column2Section .scrollTable .scroll{
		margin:0;
	}
	.column2Section .scrollTable button.iconOnly{
		width:14px;
		height:14px;
		margin-left:var(--size2);
		border:0 none;
	}
	.column2Section > .toggleSection > header{
		padding-left:0;
	}
	.column2Section > .toggleSection .toggle{
		display:none;
	}
	.column2Section > .toggleSection header + .scrollTable{
		margin-top:0;
	}
	.column2SectionPrev .rightAlignCommands{
		margin: 0 var(--size6);
	}
	.column2Section .scrollTable td {
	  padding-left: calc(14px + (var(--size2) * 2));
		background-position: var(--size2) center;
	}
	.column2Section .scrollTable td{
		height:auto;
	}
	.column2Section > .toggleSection ~ .toggleSection{
		margin-top:var(--size2);
	}
	.column2Section > .toggleSection{
		display:grid;
		grid-template-columns: 1fr;
		grid-template-rows: max-content 1fr;
		gap: 0 0;
		overflow:hidden;
	}
}

/*-------------------------------------------------------------------------------------
  ポップアップ固有
-------------------------------------------------------------------------------------*/
.popup{
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
	gap:0 0;
  justify-content: center; 
  align-content: center; 
  justify-items: center; 
  align-items: center;
 	background:none rgba(0,0,0,0.65);
	opacity:0;
	z-index:3;
	transition: z-index 0.3s step-end, opacity 0.3s ease;
}
.popup.show{
	opacity:1;
	z-index:3;
  transition: z-index 0.3s step-start, opacity 0.3s ease;
}

.popup > aside{
	position:relative;
	display:grid;
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr max-content;
	gap:0 0;
	background-color:#FBFBF7;
	border:1px solid #A7A9BC;
	box-shadow:0 2px 2px 0 rgba(0,0,0,0.35);
	max-width:calc(100vw - var(--size4));
	box-sizing:border-box;
}
.popup .close{
	position:absolute;
	right:16px;
	top:calc(var(--size7) / 2);
	width:var(--size6);
	height:var(--size6);
	transform:translate(0,-50%);
}
.popup div{
	padding: var(--size4) var(--size6) var(--size7) var(--size6);
	border-top:var(--size7) solid #81E3CF;
}
.popup div h1{
	display:flex;
	align-items:center;
	color:inherit;
	background:none no-repeat center center / cover transparent;
}
.popup div h1.warning::before{
	content:"";
	display:block;
	width:var(--size6);
	height:var(--size6);
	margin-right:var(--size2);
	background:url("img/icon_warning.svg") no-repeat center center / cover transparent;
}
.popup footer{
	display:grid;
  grid-template-columns: max-content; 
  grid-template-rows: 1fr;
	grid-auto-flow: column;
	grid-auto-columns: min-content;
 	gap:0 var(--size4);
  justify-content: center; 
  justify-items: center;
	padding: 0 var(--size6) var(--size6) var(--size6);
}
.popup div p{
	margin-top:var(--size4);
}
.popup .close{
	background-image:url("../images/icon_close_popup.svg"),url("../images/icon_close_popup_hover.svg");
}

/*-------------------------------------------------------------------------------------
  ポップアップ固有　for - tablet
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	.popup > aside{
		max-width:598px;
	}
}
/*-------------------------------------------------------------------------------------
  ポータルイントラ固有　for - pc
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
	.column3Section{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		gap: 0px var(--size6);
		overflow:hidden;
		margin:var(--size4) var(--size6) 0 var(--size6);
	}
	.column3Section .toggleSection{
		margin:0;
		border:1px solid #a7a9bc;
		border-width:1px 0;
		background-color:#ffffff;
	}
	.column3Section .serach,
	.column3Section .institution,
	.column3Section .cancellation{
		padding-left:calc(var(--size9) + (var(--size4) * 2));
		background:none no-repeat var(--size4) var(--size4) / var(--size9) auto transparent;
	}
	.column3Section .serach{background-image:url("img/icon_serach.svg");}
	.column3Section .institution{background-image:url("img/icon_institution.svg");}
	.column3Section .cancellation{background-image:url("img/icon_cancellation.svg");}

	.childScroll > .rightAlignCommands {
	    margin-right: var(--size6);
	}
}

/* 資金独自 */
/* カレンダー入力 */
input[type="date"]::-webkit-calendar-picker-indicator{
    left: 10px;
    top: 0px;
    padding: 0;
    width: 20px;
    height: 10px;
    background-image: url("img/icon_calendar.png");
    background-size: contain;
    color: transparent;
}

input[type="date"]{
    position: relative;
    margin: 0;
    padding:0;
    width:125px;
    height:32px;
}
input[type="date"]::after {
    content: "";
    background-image: url("img/icon_calendar.png");
    background-repeat: no-repeat;
    background-size: 65% 65%;
    width: 36px;
    height: 36px;
    background-position: center;
    position: absolute;
    right:0px;
    top:-2px;
    pointer-events: none;
}
/* 表示用テーブルスタイル */
.dispTable {
  border-top:1px solid #A7A9BC;
}
.dispTable tr th,
.dispTable tr td{
  padding-top:var(--size1);
  padding-bottom:var(--size1);
  height:var(--size6);
}
.dispTable tr th.spacer,
.dispTable tr td.spacer{
  padding-top:var(--size1);
  padding-bottom:var(--size1);
  height:var(--size1);
}
.dispTable th{
  padding:8px var(--size4);
  background-color:#E7EAED;
}
.dispTable td{
  background-color:#ffffff;
}

/* 検索条件用テーブルスタイル */
.searchTable {
  border-top:1px solid #A7A9BC;
}
.searchTable tr th,
.searchTable tr td{
  padding-top:var(--size1);
  padding-bottom:var(--size1);
  height:var(--size6);
}
.searchTable th{
  padding:8px var(--size4);
  background-color:#E7EAED;
}
.searchTable td{
  background-color:#ffffff;
}
.searchTable.borderTopNone{
  border-top: none;
}




/*
 右罫線
 テーブル構成の場合、下側の影を調整
 */
.tab table.dispTable .borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.tab table.dispTable th.borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.tab table.dispTable th.borderRight[colspan]{
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #ffffff inset;
}
.tab table.dispTable th.borderRightBottom{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.tab table.searchTable .borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.tab table.searchTable th.borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.tab table.searchTable th.borderRight[colspan]{
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #ffffff inset;
}
.tab table.searchTable th.borderRightBottom{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}

dt.borderRight,
dd.borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset;
}

dt.borderTop,
dd.borderTop{
	border-top:1px solid #A7A9BC;
}

/* 罫線削除 */
.borderNone{
	border:none !important;
	box-shadow: 0 0 0 0 !important;
}

/* 四方罫線（影無し） */
.borderAll{
	border:1px solid #A7A9BC !important;
	box-shadow: 0 0 0 0 !important;
}

/* 右と下に影 */
.tab th.borderRightBottom{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -2px 0 0 #A7A9BC inset;
}

/* ラジオボタン選択で入力欄の表示／非表示 */
/* ラジオボタンエリア */
.tab-container {
  display:flex;
  flex-wrap: wrap;
}
.table-cell {
  display:table-cell;
}

/* ラジオボタンに連動するコンテンツエリア */
[class^="tab-content"] {
  display: none;
}
[class^="tab-content"].active {
  display: block;
}
/* コンテンツエリアの大本テーブルのtdはline-heightをデフォルト(1.2)にする */
td.baseTableTd {
  line-height: 1.2;
  background-color: #fbfbf7;
}

/*
 ボタンエリア
 画面中央揃え
 */
table.buttonTable {
    display:flex;
    justify-content: center; 
}
/* 罫線、影はすべてなし */
table.buttonTable th,
table.buttonTable td {
	border:none !important;
	box-shadow: 0 0 0 0 !important;
}
/* 標準の背景色 */
table.buttonTable td {
  background-color: #fbfbf7;
}

/*
 一覧のヘッダー部分
 検索数、表示件数、凡例、フィルターアイコンを表示する
 凡例は省略可
 */
.tableHeader {
  display: grid; 
  grid-template-columns: max-content max-content minmax(min-content, 1fr) auto; 
  grid-template-rows: 1fr; 
  gap: var(--size6);
  align-items: center;
  grid-template-areas:
    "gaitoKensu hyojiKensu guide filterIcon";

  & .gaitoKensuArea {
    grid-area: gaitoKensu;
  }
  & .hyojiKensuArea {
    grid-area: hyojiKensu;
  }
  & .guideArea {
    grid-area: guide;
    justify-self: end;
  }
  & .filterIconArea {
    grid-area: filterIcon;
    justify-self: end;
  }
}

/*
 一覧のヘッダー部分
 検索数、凡例、フィルターアイコンを表示する
 凡例は省略可
 */
.tableHeader2 {
  display: grid; 
  grid-template-columns: max-content minmax(min-content, 1fr) auto; 
  grid-template-rows: 1fr; 
  gap: var(--size6);
  align-items: center;
  grid-template-areas:
    "gaitoKensu hyojiKensu guide filterIcon";

  & .gaitoKensuArea {
    grid-area: gaitoKensu;
  }
  & .guideArea {
    grid-area: guide;
    justify-self: end;
  }
  & .filterIconArea {
    grid-area: filterIcon;
    justify-self: end;
  }
}

/*
 一覧のヘッダー部分
 検索数、表示件数、凡例、フィルターアイコン、ボタンを表示する
 凡例は省略可
 */
.tableHeader3 {
  display: grid; 
  grid-template-columns: max-content max-content minmax(min-content, 1fr) auto max-content;
  grid-template-rows: 1fr; 
  gap: var(--size6);
  align-items: center;
  grid-template-areas:
    "gaitoKensu hyojiKensu guide filterIcon buttonArea";

  & .gaitoKensuArea {
    grid-area: gaitoKensu;
  }
  & .hyojiKensuArea {
    grid-area: hyojiKensu;
  }
  & .guideArea {
    grid-area: guide;
    justify-self: end;
  }
  & .filterIconArea {
    grid-area: filterIcon;
    justify-self: end;
  }
  & .buttonArea {
    grid-area: buttonArea;
    display:flex;
    gap:var(--size4);
  }
}

/* 小さいボタン(--size8:40px) */
button.tinyButton {
  min-width: 0px !important;
  width: var(--size8) !important;
  padding: var(--size1);
}

/* ちょっと小さいボタン(120px) */
button.smallButton {
  min-width: 0px !important;
  width: 120px !important;
  padding-left: var(--size2);
  padding-right: var(--size2);
}

/* ちょっと小さいボタン(100px) */
button.smallButton2 {
  min-width: 0px !important;
  width: 100px !important;
  padding-left: var(--size2);
  padding-right: var(--size2);
}
/* 2文字のボタン */
button.smallButton3 {
  min-width: 0px !important;
  width: 55px !important;
  padding: var(--size1);
}

/* 半サイズのボタン(144pxの半分) */
button.halfButton {
  min-width: 0px !important;
  width: calc((144px / 2) - 3px) !important;
  padding: var(--size1);
}
/* 一覧の中のボタン */
button.tertiary{ 
  min-width: 144px;
  color: #ffffff;
  background-color: #008C70;
  border: 1px solid #006159;
}
button.row2 {
  height: var(--size8);
  line-height: 1;
}

/* KBES0031画面の左メニューのボタン */
button.primary.targetmenu {
	width:216px;
}
button.primary.selected {
	color:#006159;
	background-color:#ffffff;
	border-width:2px;
	font-weight:bold;
}


/* 車台番号エリアのレイアウト for smp */
.shadaiNumberGrid {
  display: grid;
  grid-template-columns: 150px auto;
  grid-template-rows: max-content max-content max-content;
  grid-template-areas:
    "title1 check"
    "title1 item1"
    "title2 item2";
  
  & .title1 {
    grid-area: title1;
    flex-wrap: inherit;
  }
  & .check {
    grid-area: check;
  }
  & .item1 {
    grid-area: item1;
  }
  & .title2 {
    grid-area: title2;
  }
  & .item2 {
    grid-area: item2;
  }
  & .item1 div {
    align-items: center;
  }
  & .item1 [class^="tab-content"] {
    display: none;
  }
  & .item1 [class^="tab-content"].active {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
  & .item1_nospace div {
    align-items: center;
  }
  & .item1_nospace [class^="tab-content"] {
    display: none;
  }
  & .item1_nospace [class^="tab-content"].active {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  & .item1_input {
    display: flex;
    flex-wrap: wrap;
  }
}
/* 車台番号エリアのレイアウト for smp */
.KDIS_shadaiNumberGrid {
  display: grid;
  grid-template-columns: 150px auto;
  grid-template-rows: max-content max-content max-content;
  grid-template-areas:
    "title1 item1"
    "title2 check"
    "title2 item2";
  
  & .title1 {
    grid-area: title1;
  }
  & .item1 {
    grid-area: item1;
  }
  & .title2 {
    grid-area: title2;
    flex-wrap: inherit;
  }
  & .check {
    grid-area: check;
  }
  & .item2 {
    grid-area: item2;
  }

  & .item2 div {
    align-items: center;
  }
  & .item2 [class^="tab-content"] {
    display: none;
  }
  & .item2 [class^="tab-content"].active {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  & .item2_input {
    display: flex;
    flex-wrap: wrap;
  }
}

/* 登録番号／車両番号エリアのレイアウト for smp */
.sharyoNumberGrid {
  display: grid;
  grid-template-columns: 150px auto;
  grid-template-rows: 1fr;
  grid-template-areas:
    "title item";
  gap: 0;
  
  & .title {
    grid-area: title;
    flex-wrap: inherit;
  }
  & .item {
    grid-area: item;
    display: block;
  }
  & .item_flex {
    grid-area: item;
    display: flex;
  }
  & .item .item1,
  .item .item2,
  .item .item3,
  .item .item4 {
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    margin: var(--size1);
  }
  & .item_flex .item1,
  .item_flex .item2,
  .item_flex .item3,
  .item_flex .item4 {
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    margin: var(--size1);
  }
  & .item1 {
    grid-row-gap: var(--size1);
  }
  & .subTitle {
    width: 110px;
  }
}

/* 事由エリアのレイアウト for smp */
.layoutJiyu {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  grid-template-areas:
    "title"
    "check"
    "item";
  
  & .title {
    grid-area: title;
  }
  & .check {
    grid-area: check;
    display: block;
  }
  & .item {
    grid-area: item;
  }
}

/* スマホの場合に非表示にする */
.smpDispNone {
  display: none !important;
}

/* グリッドのタイトル部分の幅 for smp */
.gridTitle {
  width: 150px;
}

/* pcの場合に非表示。スマホでflex表示 */
.pcHide-flex {
  display: flex;
}
.scrollTable tbody td.pcHide-flex {
  display: flex !important;
}

/* pcの場合に非表示。スマホでblock表示 */
.pcHide {
  display: block;
}
.scrollTable tbody td.pcHide {
  display: block !important;
}
/* pcの場合に表示。スマホで非表示 */
.pcShow {
  display: none;
}
.scrollTable tbody tr.pcShow {
  display: none !important;
}
/* smpの場合に表示、PC／タブレットで非表示 */
.smpShow {
  display: block;
}

/* QRコード読み取りのアイコン等表示エリア */
.qrSearch {
  display:block;
}

/* QRコード読み取りアイコン表示部分 */
.qrSearch .qrCode {
  display:flex;
}
.qrSearch .qrCode div:nth-child(1) {
  flex-basis: 80%;
}
.qrSearch .qrCode div:nth-child(2) {
  flex-basis: 10%;
  padding-top: 10px;
  padding-left: 10px;
}
.qrSearch .qrCode div:nth-child(3) {
  flex-basis: 10%;
}

/* コーションプレート読み取りアイコン表示部分 */
.qrSearch .caution {
  display:flex;
}
.qrSearch .caution div:nth-child(1) {
  flex-basis: 80%;
}
.qrSearch .caution div:nth-child(2) {
  flex-basis: 10%;
  padding-top: 10px;
  padding-left: 10px;
}
.qrSearch .caution div:nth-child(3) {
  flex-basis: 10%;
}

/* 読取車台選択ボタンを右揃え */
.preReadCode {
  margin-left: auto;
}

/*
 車両情報の表示パターン for smp
*/
.layoutVehicleInfo {
  grid-template-columns: 180px auto;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-auto-rows: 1fr; 
}

/* 
 料金情報エリアの表示パターン1 for smp
*/
.layoutRyokinJoho1 {
  grid-template-columns: 180px auto;
  grid-template-rows: 1fr;
  
  & .spacer {
    height: var(--size1);
  }
  & dd.right {
    justify-content: end;
  }
}

.layoutRyokinJoho2 {
  grid-template-columns: 120px repeat(2, 1fr);
  grid-template-rows: 1fr;
  
  & .spacer {
    height: var(--size1);
  }
  & dd.right {
    justify-content: end;
  }
  & dd.gray {
	background-color:#888888;
  }
}

/* 
 収納方法の表示パターン for smp
*/
.layoutSyunoHoho {
  grid-template-columns: 80px auto;
  grid-template-rows: 1fr;
  
  & .spacer {
    height: var(--size1);
  }
  & dd.right {
    justify-content: end;
  }
}

/* 
 預託の表示パターン for smp
*/
.layoutYotakuJoho {
  grid-template-columns: 130px auto;
  grid-template-rows: 1fr;
  
  & .spacer {
    height: var(--size1);
  }
  & dd.right {
    justify-content: end;
  }
}

.fixedTable {
  width:100%;
}
.fixedTable col {
  display: table-column;
}
.fixedTable td,
.fixedTable th {
  word-break: break-word;
  white-space: normal;
}

/* hikitoriTableはKNHS0010の一覧専用 */
.hikitoriTable {
  width:100%;
}

.hikitoriTable td div.flex {
  display: flex;
  flex-wrap:wrap;
}
.hikitoriTable td > select,
.hikitoriTable td > input[type="text"]:not(.post),
.hikitoriTable td > input[type="tel"],
.hikitoriTable td > datalist {
  width:100%;
  box-sizing:border-box;
}
.hikitoriTable thead tr th._sticky:nth-child(1),
.hikitoriTable tbody tr td._sticky:nth-child(1),
.hikitoriTable thead tr th._sticky:nth-child(2),
.hikitoriTable tbody tr td._sticky:nth-child(2),
.hikitoriTable thead tr th._sticky:nth-child(3),
.hikitoriTable tbody tr td._sticky:nth-child(3),
.hikitoriTable thead tr th._sticky:nth-child(4),
.hikitoriTable tbody tr td._sticky:nth-child(4) {
  position: sticky;
  position: -webkit-stickey;
  z-index: 1;
}
.hikitoriTable .spacer{
	width: 100%;
}

.scroll.overflow {
  overflow: scroll;
}
.feeRegistTable {
  width: 100%;
}
.feeRegistTable col{
  display: table-column;
}

.feeRegistTable th {
  background-color: #E7EAED;
  white-space: normal;
}

.feeRegistTable td div.flex {
  display: flex;
  flex-wrap:wrap;
  gap: var(--size1);
}

.feeRegistTable td > select {
  width:100%;
  box-sizing:border-box;
}

.feeRegistTable thead tr th._sticky:nth-child(1),
.feeRegistTable tbody tr td._sticky:nth-child(1),
.feeRegistTable thead tr th._sticky:nth-child(2),
.feeRegistTable tbody tr td._sticky:nth-child(2),
.feeRegistTable thead tr th._sticky:nth-child(3),
.feeRegistTable tbody tr td._sticky:nth-child(3),
.feeRegistTable thead tr th._sticky:nth-child(4),
.feeRegistTable tbody tr td._sticky:nth-child(4) {
  position: sticky;
  position: -webkit-stickey;
  z-index: 1;
}

.feeRegistTable thead tr th._sticky:nth-child(1),
.feeRegistTable tbody tr td._sticky:nth-child(1) {
  left: 0;
}

.feeRegistTable thead tr th._sticky:nth-child(2),
.feeRegistTable tbody tr td._sticky:nth-child(2) {
  left: 100px;
}

.feeRegistTable thead tr th._sticky:nth-child(3),
.feeRegistTable tbody tr td._sticky:nth-child(3) {
  left: 250px;
}

.feeRegistTable thead tr th._sticky:nth-child(4),
.feeRegistTable tbody tr td._sticky:nth-child(4) {
  left: 400px;
}

.feeRegistTable thead tr th._sticky:nth-child(5),
.feeRegistTable tbody tr td._sticky:nth-child(5) {
  left: 400px;
}

.feeRegistTable col.hide,
.feeRegistTable th.hide,
.feeRegistTable td.hide,
.feeRegistTable button.hide {
  display: none !important;
}
.feeRegistTable col.show {
  display: table-column;
}
.feeRegistTable th.show,
.feeRegistTable td.show {
  display: table-cell;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  margin-left: var(--size1);
  margin-right: var(--size3);
  vertical-align: 10px;
}
button.iconOnly.rotate90{
	transform:rotate(90deg);
}
button.iconOnly.rotate270{
	transform:rotate(270deg);
}

.postCode {
	display:flex;
	align-items:center;
	gap: var(--size1);
}

.postCode button {
	margin-left: var(--size1);
}

.dispChange {
}
.dispChange dt {
	width:150px;
}
.dispChange dd {
	display:flex;
	flex-wrap:wrap;
}

/*
 Lib等PDF文書コード登録のレイアウト定義
 */
.libPdfCodeRegist {
}
/* 「PDF種類コード取込」部分 */
.libPdfCodeRegist .condition {
}
/* 「PDF種類コード一覧」部分 */
.libPdfCodeRegist .patternList {
}
/* PDF種類コード一覧の横スクロール表示 */
.libPdfCodeRegist .patternList .scrollTable .scroll {
  min-height: 150px;
}
.libPdfCodeRegist .patternList table {
}
.libPdfCodeRegist .patternList table td {
  word-wrap: break-word;
}

.libPdfCodeRegist .patternList table td > select,
.libPdfCodeRegist .patternList table td > input[type="text"],
.libPdfCodeRegist .patternList table td > input[type="url"] {
  width:100%;
  box-sizing:border-box;
}

.libPdfCodeRegist .buttonArea {
}

/*
 Lib等PDFマスタメンテナンスのレイアウト定義
 */
.libPdfContainer {
  display: flex;
  flex-wrap: nowrap;
  gap: 0px;
}

/* 左側 */
.libPdfContainer .patternArea {
  width:60%;
}

/* 右側 */
.libPdfContainer .dropArea {
  width:40%;
}

/* 左側の「PDF種類コード一覧」部分 */
.libPdfContainer .patternList {
}
/* PDF種類コード一覧の横スクロール表示 */
.libPdfContainer .patternList .scrollTable .scroll {
  min-height: 150px;
}
.libPdfContainer .patternList table {
  width: 100%;
}
.libPdfContainer .patternList table td {
  word-wrap: break-word;
}

.libPdfContainer .patternList table td > select,
.libPdfContainer .patternList table td > input[type="text"],
.libPdfContainer .patternList table td > input[type="url"] {
  width:100%;
  box-sizing:border-box;
}

.libPdfContainer .buttonArea {
}

/* ドロップエリア */
.dropZone {
  margin:var(--size2);
  justify-content:center;
}
/* ドロップエリアの表示変更 */
.dropZone input[type="file"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.dropZone label{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:144px;
	height:var(--size7);
	color:#ffffff;
	background-color:#006159;
	border:1px solid #006159;
	font-size:16px;
	border:2px solid transparent;
	border-radius:2px;
	box-sizing:border-box;
	margin:var(--size1);
}
.dropZone label:hover{
	color:#ffffff;
	background-color:#008c70;
	border-color:#008c70;
}
.dropZone label:active {
	color:#006159;
	background-color:#ffffff;
	border-width:2px;
	font-weight:bold;
}
.dropZone label:disabled{
	pointer-events:none;
	color:#E8E8E8;
	background-color:#BCBCBC;
	border-color:#BCBCBC;
}

.dropZone .droppable {
	border: 1px dashed #A7A9BC;
	border-radius: 5px;
	padding: var(--size4);
}

/* ドロップエリア2 */
.dropZone2 {
  margin:var(--size2);
  justify-content:center;
}
/* ドロップエリア2の表示変更 */
.dropZone2 input[type="file"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  display: none;
}

.dropZone2 label{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:120px;
	height:var(--size7);
	color:#ffffff;
	background-color:#006159;
	border:1px solid #006159;
	font-size:16px;
	border:2px solid transparent;
	border-radius:2px;
	box-sizing:border-box;
	margin:var(--size1);
}
.dropZone2 label:hover{
	color:#ffffff;
	background-color:#008c70;
	border-color:#008c70;
}
.dropZone2 label:active {
	color:#006159;
	background-color:#ffffff;
	border-width:2px;
	font-weight:bold;
}
.dropZone2 label:disabled{
	pointer-events:none;
	color:#E8E8E8;
	background-color:#BCBCBC;
	border-color:#BCBCBC;
}

.dropZone2 .droppable {
	border: 1px dashed #A7A9BC;
	border-radius: 5px;
	padding: var(--size4);
}

/* LiB等出荷情報修正 */
/* 変更条件設定 */
.libModifyArea {
}

.horizontalScrollTable {
  width: 100%;
}
.horizontalScrollTable col{
  display: table-column;
}

.horizontalScrollTable th {
  background-color: #E7EAED;
}

.horizontalScrollTable td > select,
.horizontalScrollTable td > input[type="text"] {
  width:100%;
  box-sizing:border-box;
}

.horizontalScrollTable thead tr th._sticky:nth-child(1),
.horizontalScrollTable tbody tr td._sticky:nth-child(1),
.horizontalScrollTable thead tr th._sticky:nth-child(2),
.horizontalScrollTable tbody tr td._sticky:nth-child(2),
.horizontalScrollTable thead tr th._sticky:nth-child(3),
.horizontalScrollTable tbody tr td._sticky:nth-child(3),
.horizontalScrollTable thead tr th._sticky:nth-child(4),
.horizontalScrollTable tbody tr td._sticky:nth-child(4) {
  position: sticky;
  position: -webkit-stickey;
  z-index: 1;
}

.horizontalScrollTable thead tr th._sticky:nth-child(1),
.horizontalScrollTable tbody tr td._sticky:nth-child(1) {
  left: 0;
}

.horizontalScrollTable thead tr th._sticky:nth-child(2),
.horizontalScrollTable tbody tr td._sticky:nth-child(2) {
  left: 100px;
}

.horizontalScrollTable thead tr th._sticky:nth-child(3),
.horizontalScrollTable tbody tr td._sticky:nth-child(3) {
  left: 250px;
}

.horizontalScrollTable thead tr th._sticky:nth-child(4),
.horizontalScrollTable tbody tr td._sticky:nth-child(4) {
  left: 400px;
}

.join_cell {
    visibility: hidden;
}

.layoutCaution{
  grid-template-columns: var(--layoutChassisInfoDt) 1fr;
  grid-template-rows: 1fr 1fr;
}

/* 料金算出依頼一覧の縦スクロール表示 */
.scrollTable > .ryuknSnsytuIriList{
  max-height:434px;
}

/* 一覧の縦スクロール表示 */
.scrollTable > .scrollList{
    max-height:calc(100vh - 478px);
}

/* -一般料金照会- 車両情報エリアのレイアウト */
.KDIS_sharyoJojoGrid {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto;
}

/* -一般料金照会- 預託状況エリアのレイアウト */
.KDIS_yotakuJojoGrid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

/* -一般料金照会- 料金照会（預託済）のレイアウト */
.layoutRyokinJohoYotaku {
  grid-template-columns:  200px 1fr;
  grid-template-rows: 1fr;
    grid-template-areas:
      "title1_0 subtitle1"
      "title1_1 item1_1"
      "title1_2 item1_2"
      "title1_3 item1_3"
      "title1_4 item1_4"
      "title1_6 item1_6";

  & .title1_0 { grid-area: title1_0; }
  & .title1_1 { grid-area: title1_1; }
  & .title1_2 { grid-area: title1_2; }
  & .title1_3 { grid-area: title1_3; }
  & .title1_4 { grid-area: title1_4; }
  & .title1_6 { grid-area: title1_6; }
  & .subtitle1 { grid-area: subtitle1; }
  & .item1_1 { grid-area: item1_1; justify-content: end; }
  & .item1_2 { grid-area: item1_2; justify-content: end; }
  & .item1_3 { grid-area: item1_3; justify-content: end; }
  & .item1_4 { grid-area: item1_4; justify-content: end; }
  & .item1_6 { grid-area: item1_6; justify-content: end; }
}

/* -一般料金照会- 料金照会（一部未預託_両方なし）のレイアウト */
.layoutRyokinJohoIchibuAll {
  grid-template-columns:  200px 1fr;
  grid-template-rows: min-content;
    grid-template-areas:
      "title1_0 subtitle1"
      "title1_1 item1_1"
      "title1_2 item1_2"
      "title1_3 item1_3"
      "title1_4 item1_4"
      "title1_5 item1_5"
      "title1_6 item1_6"
      "item0_0 item0_0"
      "title0_0 title0_0"
      "title2_0 subtitle2"
      "title2_1 item2_1"
      "title2_2 item2_2"
      "title2_3 item2_3"
      "title2_4 item2_4"
      "title2_5 item2_5"
      "title2_6 item2_6"
      "item0_1 item0_1"
      "title0_1 title0_1"
      "title3_0 subtitle3"
      "title3_1 item3_1"
      "title3_2 item3_2"
      "title3_3 item3_3"
      "title3_4 item3_4"
      "title3_5 item3_5"
      "title3_6 item3_6"
      "item0_2 item0_2"
      "title0_2 title0_2"
      "title4_0 subtitle4"
      "title4_1 item4_1"
      "title4_2 item4_2"
      "title4_3 item4_3"
      "title4_4 item4_4"
      "title4_5 item4_5"
      "title4_6 item4_6";

  & .title0_0 { 
      grid-area: title0_0; 
  }
  & .title0_1 { 
      grid-area: title0_1; 
  }
  & .title0_2 { 
      grid-area: title0_2; 
  }
  & .item0_0 { 
      grid-area: item0_0; 
      background-color: transparent;
  }
  & .item0_1 { 
      grid-area: item0_1; 
      background-color: transparent;
  }
  & .item0_2 { 
      grid-area: item0_2; 
      background-color: transparent;
  }

  & .title1_0 { grid-area: title1_0; }
  & .title1_1 { grid-area: title1_1; }
  & .title1_2 { grid-area: title1_2; }
  & .title1_3 { grid-area: title1_3; }
  & .title1_4 { grid-area: title1_4; }
  & .title1_5 { grid-area: title1_5; }
  & .title1_6 { grid-area: title1_6; }
  & .title2_0 { grid-area: title2_0; }
  & .title2_1 { grid-area: title2_1; }
  & .title2_2 { grid-area: title2_2; }
  & .title2_3 { grid-area: title2_3; }
  & .title2_4 { grid-area: title2_4; }
  & .title2_5 { grid-area: title2_5; }
  & .title2_6 { grid-area: title2_6; }
  & .title3_0 { grid-area: title3_0; }
  & .title3_1 { grid-area: title3_1; }
  & .title3_2 { grid-area: title3_2; }
  & .title3_3 { grid-area: title3_3; }
  & .title3_4 { grid-area: title3_4; }
  & .title3_5 { grid-area: title3_5; }
  & .title3_6 { grid-area: title3_6; }
  & .title4_0 { grid-area: title4_0; }
  & .title4_1 { grid-area: title4_1; }
  & .title4_2 { grid-area: title4_2; }
  & .title4_3 { grid-area: title4_3; }
  & .title4_4 { grid-area: title4_4; }
  & .title4_5 { grid-area: title4_5; }
  & .title4_6 { grid-area: title4_6; }
  & .subtitle1 { grid-area: subtitle1; }
  & .subtitle2 { grid-area: subtitle2; }
  & .subtitle3 { grid-area: subtitle3; }
  & .subtitle4 { grid-area: subtitle4; }
  & .item1_1 { grid-area: item1_1; justify-content: end; }
  & .item1_2 { grid-area: item1_2; justify-content: end; }
  & .item1_3 { grid-area: item1_3; justify-content: end; }
  & .item1_4 { grid-area: item1_4; justify-content: end; }
  & .item1_5 { grid-area: item1_5; justify-content: end; }
  & .item1_6 { grid-area: item1_6; justify-content: end; }
  & .item2_1 { grid-area: item2_1; justify-content: end; }
  & .item2_2 { grid-area: item2_2; justify-content: end; }
  & .item2_3 { grid-area: item2_3; justify-content: end; }
  & .item2_4 { grid-area: item2_4; justify-content: end; }
  & .item2_5 { grid-area: item2_5; justify-content: end; }
  & .item2_6 { grid-area: item2_6; justify-content: end; }
  & .item3_1 { grid-area: item3_1; justify-content: end; }
  & .item3_2 { grid-area: item3_2; justify-content: end; }
  & .item3_3 { grid-area: item3_3; justify-content: end; }
  & .item3_4 { grid-area: item3_4; justify-content: end; }
  & .item3_5 { grid-area: item3_5; justify-content: end; }
  & .item3_6 { grid-area: item3_6; justify-content: end; }
  & .item4_1 { grid-area: item4_1; justify-content: end; }
  & .item4_2 { grid-area: item4_2; justify-content: end; }
  & .item4_3 { grid-area: item4_3; justify-content: end; }
  & .item4_4 { grid-area: item4_4; justify-content: end; }
  & .item4_5 { grid-area: item4_5; justify-content: end; }
  & .item4_6 { grid-area: item4_6; justify-content: end; }
}
/* -一般料金照会- 料金照会（一部未預託_片方なし）のレイアウト */
.layoutRyokinJohoIchibu {
  grid-template-columns:  200px 1fr;
  grid-template-rows: min-content;
    grid-template-areas:
      "title1_0 subtitle1"
      "title1_1 item1_1"
      "title1_2 item1_2"
      "title1_3 item1_3"
      "title1_4 item1_4"
      "title1_5 item1_5"
      "title1_6 item1_6"
      "item0_0 item0_0"
      "title0_0 title0_0"
      "title2_0 subtitle2"
      "title2_1 item2_1"
      "title2_2 item2_2"
      "title2_3 item2_3"
      "title2_4 item2_4"
      "title2_5 item2_5"
      "title2_6 item2_6";

  & .title0_0 { 
      grid-area: title0_0; 
  }

  & .title1_0 { grid-area: title1_0; }
  & .title1_1 { grid-area: title1_1; }
  & .title1_2 { grid-area: title1_2; }
  & .title1_3 { grid-area: title1_3; }
  & .title1_4 { grid-area: title1_4; }
  & .title1_5 { grid-area: title1_5; }
  & .title1_6 { grid-area: title1_6; }
  & .title2_0 { grid-area: title2_0; }
  & .title2_1 { grid-area: title2_1; }
  & .title2_2 { grid-area: title2_2; }
  & .title2_3 { grid-area: title2_3; }
  & .title2_4 { grid-area: title2_4; }
  & .title2_5 { grid-area: title2_5; }
  & .title2_6 { grid-area: title2_6; }
  & .subtitle1 { grid-area: subtitle1; }
  & .subtitle2 { grid-area: subtitle2; }
  & .item1_1 { grid-area: item1_1; justify-content: end; }
  & .item1_2 { grid-area: item1_2; justify-content: end; }
  & .item1_3 { grid-area: item1_3; justify-content: end; }
  & .item1_4 { grid-area: item1_4; justify-content: end; }
  & .item1_5 { grid-area: item1_5; justify-content: end; }
  & .item1_6 { grid-area: item1_6; justify-content: end; }
  & .item2_1 { grid-area: item2_1; justify-content: end; }
  & .item2_2 { grid-area: item2_2; justify-content: end; }
  & .item2_3 { grid-area: item2_3; justify-content: end; }
  & .item2_4 { grid-area: item2_4; justify-content: end; }
  & .item2_5 { grid-area: item2_5; justify-content: end; }
  & .item2_6 { grid-area: item2_6; justify-content: end; }
}
/* -一般料金照会- 料金照会（未預託）のレイアウト */
.layoutRyokinJohoMiyotaku {
  grid-template-columns:  200px 1fr;
  grid-template-rows: min-content;
    grid-template-areas:
      "title1_0 subtitle1"
      "title1_1 item1_1"
      "title1_2 item1_2"
      "title1_3 item1_3"
      "title1_4 item1_4"
      "title1_5 item1_5"
      "title1_6 item1_6"
      "item0_0 item0_0"
      "title2_0 subtitle2"
      "title2_1 item2_1"
      "title2_2 item2_2"
      "title2_3 item2_3"
      "title2_4 item2_4"
      "title2_5 item2_5"
      "title2_6 item2_6"
      "item0_1 item0_1"
      "title3_0 subtitle3"
      "title3_1 item3_1"
      "title3_2 item3_2"
      "title3_3 item3_3"
      "title3_4 item3_4"
      "title3_5 item3_5"
      "title3_6 item3_6"
      "item0_2 item0_2"
      "title4_0 subtitle4"
      "title4_1 item4_1"
      "title4_2 item4_2"
      "title4_3 item4_3"
      "title4_4 item4_4"
      "title4_5 item4_5"
      "title4_6 item4_6";

  & .item0_0 { 
      grid-area: item0_0; 
      border-width:0px;
      background-color: transparent;
  }
  & .item0_1 { 
      grid-area: item0_1; 
      border-width:0px;
      background-color: transparent;
  }
  & .item0_2 { 
      grid-area: item0_2; 
      border-width:0px;
      background-color: transparent;
  }

  & .title1_0 { grid-area: title1_0; }
  & .title1_1 { grid-area: title1_1; }
  & .title1_2 { grid-area: title1_2; }
  & .title1_3 { grid-area: title1_3; }
  & .title1_4 { grid-area: title1_4; }
  & .title1_5 { grid-area: title1_5; }
  & .title1_6 { grid-area: title1_6; }
  & .title2_0 { grid-area: title2_0; }
  & .title2_1 { grid-area: title2_1; }
  & .title2_2 { grid-area: title2_2; }
  & .title2_3 { grid-area: title2_3; }
  & .title2_4 { grid-area: title2_4; }
  & .title2_5 { grid-area: title2_5; }
  & .title2_6 { grid-area: title2_6; }
  & .title3_0 { grid-area: title3_0; }
  & .title3_1 { grid-area: title3_1; }
  & .title3_2 { grid-area: title3_2; }
  & .title3_3 { grid-area: title3_3; }
  & .title3_4 { grid-area: title3_4; }
  & .title3_5 { grid-area: title3_5; }
  & .title3_6 { grid-area: title3_6; }
  & .title4_0 { grid-area: title4_0; }
  & .title4_1 { grid-area: title4_1; }
  & .title4_2 { grid-area: title4_2; }
  & .title4_3 { grid-area: title4_3; }
  & .title4_4 { grid-area: title4_4; }
  & .title4_5 { grid-area: title4_5; }
  & .title4_6 { grid-area: title4_6; }
  & .subtitle1 { grid-area: subtitle1; }
  & .subtitle2 { grid-area: subtitle2; }
  & .subtitle3 { grid-area: subtitle3; }
  & .subtitle4 { grid-area: subtitle4; }
  & .item1_1 { grid-area: item1_1; justify-content: end; }
  & .item1_2 { grid-area: item1_2; justify-content: end; }
  & .item1_3 { grid-area: item1_3; justify-content: end; }
  & .item1_4 { grid-area: item1_4; justify-content: end; }
  & .item1_5 { grid-area: item1_5; justify-content: end; }
  & .item1_6 { grid-area: item1_6; justify-content: end; }
  & .item2_1 { grid-area: item2_1; justify-content: end; }
  & .item2_2 { grid-area: item2_2; justify-content: end; }
  & .item2_3 { grid-area: item2_3; justify-content: end; }
  & .item2_4 { grid-area: item2_4; justify-content: end; }
  & .item2_5 { grid-area: item2_5; justify-content: end; }
  & .item2_6 { grid-area: item2_6; justify-content: end; }
  & .item3_1 { grid-area: item3_1; justify-content: end; }
  & .item3_2 { grid-area: item3_2; justify-content: end; }
  & .item3_3 { grid-area: item3_3; justify-content: end; }
  & .item3_4 { grid-area: item3_4; justify-content: end; }
  & .item3_5 { grid-area: item3_5; justify-content: end; }
  & .item3_6 { grid-area: item3_6; justify-content: end; }
  & .item4_1 { grid-area: item4_1; justify-content: end; }
  & .item4_2 { grid-area: item4_2; justify-content: end; }
  & .item4_3 { grid-area: item4_3; justify-content: end; }
  & .item4_4 { grid-area: item4_4; justify-content: end; }
  & .item4_5 { grid-area: item4_5; justify-content: end; }
  & .item4_6 { grid-area: item4_6; justify-content: end; }
}
  
.layout20yearLimitInquiry{
  & table{
    border:2px solid #A7A9BC;
    margin-top: calc(var(--size4) * -1);
  }
  
  & p{
    text-align: center;
  }
}


/*-------------------------------------------------------------------------------------
  for - smp
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

	/* hikitoriTableはKNHS0010の一覧専用 */
	.scrollTable .hikitoriTable tr{
		grid-template-columns: 150px 1fr;
		grid-template-rows: repeat(12, min-content);
		grid-template-areas:
		"syadai_title syadai_data"
		"toroku_title toroku_data"
		"katashiki_title katashiki_data"
		"katashiki_shitei_title katashiki_shitei_data"
		"ruibetsu_kubun_title ruibetsu_kubun_data"
		"sharyo_kbn_title sharyo_kbn_data"
		"yotaku_title yotaku_data"
		"freon_title freon_data"
		"airbag_title airbag_data"
		"end_user_title end_user_data"
		"end_user_pos_title end_user_pos_data"
		"end_user_address_title end_user_address_data"
		"end_user_tel_title end_user_tel_data"
		"operation_title operation_data"
		"operation2_title operation2_data"
		"search_user_title search_user_data"
		"search_time_title search_time_data";
	}
	
	.scrollTable .hikitoriTable tbody tr > th.syadai			{ grid-area: syadai_title; }
	.scrollTable .hikitoriTable tbody tr > th.syadai + td		{ grid-area: syadai_data; }
	.scrollTable .hikitoriTable tbody tr > th.toroku_number		{ grid-area: toroku_title; }
	.scrollTable .hikitoriTable tbody tr > th.toroku_number + td{ grid-area: toroku_data; }
	.scrollTable .hikitoriTable tbody tr > th.katashiki			{ grid-area: katashiki_title; }
	.scrollTable .hikitoriTable tbody tr > th.katashiki + td	{ grid-area: katashiki_data; }
	.scrollTable .hikitoriTable tbody tr > th.katashiki_shitei		{ grid-area: katashiki_shitei_title; }
	.scrollTable .hikitoriTable tbody tr > th.katashiki_shitei + td	{ grid-area: katashiki_shitei_data; }
	.scrollTable .hikitoriTable tbody tr > th.ruibetsu_kubun		{ grid-area: ruibetsu_kubun_title; }
	.scrollTable .hikitoriTable tbody tr > th.ruibetsu_kubun + td	{ grid-area: ruibetsu_kubun_data; }
	.scrollTable .hikitoriTable tbody tr > th.sharyo_kbn		{ grid-area: sharyo_kbn_title; }
	.scrollTable .hikitoriTable tbody tr > th.sharyo_kbn + td	{ grid-area: sharyo_kbn_data; }
	.scrollTable .hikitoriTable tbody tr > th.yotaku			{ grid-area: yotaku_title; }
	.scrollTable .hikitoriTable tbody tr > th.yotaku + td		{ grid-area: yotaku_data; }
	.scrollTable .hikitoriTable tbody tr > th.freon				{ grid-area: freon_title; }
	.scrollTable .hikitoriTable tbody tr > th.freon + td		{ grid-area: freon_data; }
	.scrollTable .hikitoriTable tbody tr > th.airbag			{ grid-area: airbag_title; }
	.scrollTable .hikitoriTable tbody tr > th.airbag + td		{ grid-area: airbag_data; }
	.scrollTable .hikitoriTable tbody tr > th.end_user			{ grid-area: end_user_title; }
	.scrollTable .hikitoriTable tbody tr > th.end_user + td		{ grid-area: end_user_data; }
	.scrollTable .hikitoriTable tbody tr > th.end_user_pos			{ grid-area: end_user_pos_title; }
	.scrollTable .hikitoriTable tbody tr > th.end_user_pos + td		{ grid-area: end_user_pos_data; }
	.scrollTable .hikitoriTable tbody tr > th.end_user_address			{ grid-area: end_user_address_title; }
	.scrollTable .hikitoriTable tbody tr > th.end_user_address + td		{ grid-area: end_user_address_data; }
	.scrollTable .hikitoriTable tbody tr > th.end_user_tel			{ grid-area: end_user_tel_title; }
	.scrollTable .hikitoriTable tbody tr > th.end_user_tel + td		{ grid-area: end_user_tel_data; }
	.scrollTable .hikitoriTable tbody tr > th.operation			{ grid-area: operation_title; }
	.scrollTable .hikitoriTable tbody tr > th.operation + td	{ grid-area: operation_data; }
	.scrollTable .hikitoriTable tbody tr > th.operation2		{ grid-area: operation2_title; }
	.scrollTable .hikitoriTable tbody tr > th.operation2 + td	{ grid-area: operation2_data; }
	.scrollTable .hikitoriTable tbody tr > th.search_user		{ grid-area: search_user_title; }
	.scrollTable .hikitoriTable tbody tr > th.search_user + td	{ grid-area: search_user_data; }
	.scrollTable .hikitoriTable tbody tr > th.search_time		{ grid-area: search_time_title; }
	.scrollTable .hikitoriTable tbody tr > th.search_time + td	{ grid-area: search_time_data; }

	
	.scrollTable .hikitoriTable tbody tr > th.syadai,
	.scrollTable .hikitoriTable tbody tr > th.syadai + td,
	.scrollTable .hikitoriTable tbody tr > th.toroku_number,
	.scrollTable .hikitoriTable tbody tr > th.toroku_number + td,
	.scrollTable .hikitoriTable tbody tr > th.katashiki,
	.scrollTable .hikitoriTable tbody tr > th.katashiki + td,
	.scrollTable .hikitoriTable tbody tr > th.katashiki_shitei,
	.scrollTable .hikitoriTable tbody tr > th.katashiki_shitei + td,
	.scrollTable .hikitoriTable tbody tr > th.ruibetsu_kubun,
	.scrollTable .hikitoriTable tbody tr > th.ruibetsu_kubun + td,
	.scrollTable .hikitoriTable tbody tr > th.sharyo_kbn,
	.scrollTable .hikitoriTable tbody tr > th.sharyo_kbn + td,
	.scrollTable .hikitoriTable tbody tr > th.yotaku,
	.scrollTable .hikitoriTable tbody tr > th.yotaku + td,
	.scrollTable .hikitoriTable tbody tr > th.freon,
	.scrollTable .hikitoriTable tbody tr > th.freon + td,
	.scrollTable .hikitoriTable tbody tr > th.airbag,
	.scrollTable .hikitoriTable tbody tr > th.airbag + td,
	.scrollTable .hikitoriTable tbody tr > th.end_user,
	.scrollTable .hikitoriTable tbody tr > th.end_user + td,
	.scrollTable .hikitoriTable tbody tr > th.end_user_pos,
	.scrollTable .hikitoriTable tbody tr > th.end_user_pos + td,
	.scrollTable .hikitoriTable tbody tr > th.end_user_address,
	.scrollTable .hikitoriTable tbody tr > th.end_user_address + td,
	.scrollTable .hikitoriTable tbody tr > th.end_user_tel,
	.scrollTable .hikitoriTable tbody tr > th.end_user_tel + td,
	.scrollTable .hikitoriTable tbody tr > th.operation,
	.scrollTable .hikitoriTable tbody tr > th.operation + td,
	.scrollTable .hikitoriTable tbody tr > th.operation2,
	.scrollTable .hikitoriTable tbody tr > th.operation2 + td,
	.scrollTable .hikitoriTable tbody tr > th.search_user,
	.scrollTable .hikitoriTable tbody tr > th.search_user + td,
	.scrollTable .hikitoriTable tbody tr > th.search_time,
	.scrollTable .hikitoriTable tbody tr > th.search_time + td{
		border-bottom:1px solid #A7A9BC;
	}
	.scrollTable .hikitoriTable tr > th{
		justify-content:flex-end;
		text-align:right;
	}
	.scrollTable .hikitoriTable tr > th.show{
		display:flex;
	}
	.scrollTable .hikitoriTable tr > th.hide{
		display:none;
	}
	.scrollTable .hikitoriTable tr > th.show + td{
		display:flex;
	}
	.scrollTable .hikitoriTable tr > th.hide + td{
		display:none;
	}
	.scrollTable .hikitoriTable tr > th{
		margin-left:0;
	}

	.scrollTable .codeReadingTable tr{
		grid-template-rows: repeat(6, max-content);
		grid-template-areas:
	    "th1 td1"
	    "th2 td2"
	    "th3 td3"
	    "th4 td4"
	    "th5 td5"
	    "th6 td6";
		border-bottom:2px solid #A7A9BC;
	}
	.scrollTable table.codeReadingTable tr > th:nth-of-type(4) { grid-area: th4; }
	.scrollTable table.codeReadingTable tr > th:nth-of-type(4) + td { grid-area: td4; }
	.scrollTable table.codeReadingTable tr > th:nth-of-type(5) { grid-area: th5; }
	.scrollTable table.codeReadingTable tr > th:nth-of-type(5) + td{ grid-area: td5; }
	.scrollTable table.codeReadingTable tr > th:nth-of-type(6) { grid-area: th6; }
	.scrollTable table.codeReadingTable tr > th:nth-of-type(6) + td{ grid-area: td6; }
	.scrollTable table.codeReadingTable tr > th:nth-of-type(3),
	.scrollTable table.codeReadingTable tr > th:nth-of-type(3) + td,
	.scrollTable table.codeReadingTable tr > th:nth-of-type(4),
	.scrollTable table.codeReadingTable tr > th:nth-of-type(4) + td,
	.scrollTable table.codeReadingTable tr > th:nth-of-type(5),
	.scrollTable table.codeReadingTable tr > th:nth-of-type(5) + td{
		border-bottom:1px solid #A7A9BC;
	}

	.popup div.hikitoriHokoku {
	  width: calc(100vw - (var(--size8) * 2));
	}

	/* -車両状況照会- 車両情報エリアのレイアウト */
	.VDIS_sharyoJojoGrid {
	    grid-template-columns: 160px 1fr;
	    grid-template-rows: auto;
	}
	/* -車両状況照会- 事業者情報エリアのレイアウト */
	.VDIS_zgysyJojoGrid {
	    grid-template-columns: 140px 1fr;
	    grid-template-rows: auto;
	}
	.VDIS_syrJokyGrid {
	  grid-template-columns: 70px 1fr 70px 1fr;
	  grid-template-rows: auto;
	  grid-template-areas:
	    "kuti1_2     kuti1_2   kuti1_2      status1"
	    "hktrblbl1_2 hktrb1_2  hkwtsblbl1_2 hkwtsb1_2"
	    "kuti2_2     kuti2_2   kuti2_2      status2"
	    "hktrblbl2_2 hktrb2_2  hkwtsblbl2_2 hkwtsb2_2"
	    "kuti3_2     kuti3_2   kuti3_2      status3"
	    "hktrblbl3_2 hktrb3_2  hkwtsblbl3_2 hkwtsb3_2"
	    "kuti4_2     kuti4_2   kuti4_2      status4"
	    "hktrblbl4_2 hktrb4_2  hktrb4_2     hktrb4_2";
	  & .hktrblbl1_2 { grid-area: hktrblbl1_2; }
	  & .hktrblbl2_2 { grid-area: hktrblbl2_2; }
	  & .hktrblbl3_2 { grid-area: hktrblbl3_2; }
	  & .hktrblbl4_2 { grid-area: hktrblbl4_2; }
	  & .hktrb1_2 { grid-area: hktrb1_2; }
	  & .hktrb2_2 { grid-area: hktrb2_2; }
	  & .hktrb3_2 { grid-area: hktrb3_2; }
	  & .hktrb4_2 { grid-area: hktrb4_2; }
	  & .hkwtsblbl1_2 { grid-area: hkwtsblbl1_2; }
	  & .hkwtsblbl2_2 { grid-area: hkwtsblbl2_2; }
	  & .hkwtsblbl3_2 { grid-area: hkwtsblbl3_2; }
	  & .hkwtsb1_2 { grid-area: hkwtsb1_2; }
	  & .hkwtsb2_2 { grid-area: hkwtsb2_2; }
	  & .hkwtsb3_2 { grid-area: hkwtsb3_2; }
	  & .kuti1_2 { grid-area: kuti1_2; }
	  & .kuti2_2 { grid-area: kuti2_2; }
	  & .kuti3_2 { grid-area: kuti3_2; }
	  & .kuti4_2 { grid-area: kuti4_2; }
	  & .status1 { grid-area: status1; justify-content: end; }
	  & .status2 { grid-area: status2; justify-content: end; }
	  & .status3 { grid-area: status3; justify-content: end; }
	  & .status4 { grid-area: status4; justify-content: end; }
	}
	/* pcの場合に表示、スマホ／タブレットで非表示 */
	.VDIS_pcShow {
	  display: none;
	}
	/* pcの場合に非表示、スマホ／タブレットで表示 */
	.pcHide {
	  display: grid;
	}
	/* スマホの場合に非表示、PC／タブレットで表示 */
	.smpHide {
	  display: none;
	}

}

/*-------------------------------------------------------------------------------------
  for - tablet
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  /* smpの場合に表示、PC／タブレットで非表示 */
  .smpShow {
    display: none !important;
  }
  /* pcの場合に表示。スマホで非表示 */
  .pcShow {
    display: block;
  }
  .scrollTable tbody tr.pcShow {
    display: table-row !important;
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    vertical-align: 10px;
  }

  .qrSearch .qrCode div:nth-child(1) {
    flex-basis: 330px;
    padding-top: 10px;
  }
  .qrSearch .qrCode div:nth-child(2) {
    flex-basis: max-content;
    padding: 10px;
  }
  .qrSearch .qrCode div:nth-child(3) {
    flex-basis: max-content;
  }

  .qrSearch .caution div:nth-child(1) {
    flex-basis: 330px;
    padding-top: 10px;
  }
  .qrSearch .caution div:nth-child(2) {
    flex-basis: max-content;
    padding: 10px;
  }
  .qrSearch .caution div:nth-child(3) {
    flex-basis: max-content;
  }

  .layoutVehicleInfo {
    grid-template-columns: 170px 1fr 170px 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: 1fr; 
  }

  .layoutRyokinJoho1 {
    grid-template-columns: 170px auto;
    width: 60%;
  }

  .layoutRyokinJoho2 {
    grid-template-columns: 170px repeat(2, 1fr);
    width: 80%;
  }

  .layoutSyunoHoho {
    grid-template-columns: 170px auto;
    width: 70%;
  }

  .layoutYotakuJoho {
    grid-template-columns: 170px auto;
    width: 70%;
  }

	/* hikitoriTableはKNHS0010の一覧専用 */
  .hikitoriTable {
  }
  .hikitoriTable col{
    display: table-column;
  }
  .hikitoriTable th {
    background-color: #E7EAED;
  }
  .hikitoriTable th,
  .hikitoriTable td {
    white-space: normal;
  }

  .hikitoriTable col.show {
    display: table-column;
  }

  .hikitoriTable thead tr > th.show,
  .hikitoriTable tbody tr > td.show {
    display: table-cell;
  }

  .hikitoriTable col.hide {
    display: none;
  }

  .hikitoriTable thead tr > th.hide,
  .hikitoriTable tbody tr > td.hide {
    display: none !important;
  }

  /* 車台番号エリアのレイアウト */
  .shadaiNumberGrid {
    grid-template-columns: 200px auto;
    grid-template-rows: max-content max-content;
    grid-template-areas:
      "title1 check"
      "title1 item1"
      "title2 item2";
    
  }

  /* 車台番号エリアのレイアウト */
  .KDIS_shadaiNumberGrid {
    grid-template-columns: 200px auto;
    grid-template-rows: max-content max-content;
    grid-template-areas:
      "title1 item1"
      "title2 check"
      "title2 item2";
    
  }

  .gridTitle {
    width: 200px;
  }

  /* 登録番号／車両番号エリアのレイアウト */
  .sharyoNumberGrid {
    grid-template-columns: 200px auto;
    grid-template-rows: 1fr;
    grid-template-areas:
      "title item";
    
    & .subTitle {
      width: 110px;
    }
  }

  /* 事由エリアのレイアウト */
  .layoutJiyu {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
      "title check"
      "item item";
    
    & .check {
      display: flex;
    }
  }

  .KDIS_sharyoJojoGrid {
    grid-template-columns: 180px 1fr 180px 1fr;
    grid-template-rows: auto;
  }
  /* -一般料金照会- 料金照会（預託済）のレイアウト */
  .layoutRyokinJohoYotaku {
    grid-template-columns: 180px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "title1_0 subtitle1"
      "title1_1 item1_1"
      "title1_2 item1_2"
      "title1_3 item1_3"
      "title1_4 item1_4"
      "title1_6 item1_6";
    width: 50%;
  }
  /* -一般料金照会- 料金照会（一部未預託_両方なし）のレイアウト */
  .layoutRyokinJohoIchibuAll {
    grid-template-columns: 180px repeat(4, 1fr);
    grid-template-rows: repeat(8, min-content));
    grid-template-areas:
      "title1_0 subtitle1 title0_0 title0_0 title0_0 "
      "title1_0 subtitle1 subtitle2 subtitle3 subtitle4"
      "title1_1 item1_1 item2_1 item3_1 item4_1"
      "title1_2 item1_2 item2_2 item3_2 item4_2"
      "title1_3 item1_3 item2_3 item3_3 item4_3"
      "title1_4 item1_4 item2_4 item3_4 item4_4"
      "title1_5 item1_5 item2_5 item3_5 item4_5"
      "title1_6 item1_6 item2_6 item3_6 item4_6";
  }
  /* -一般料金照会- 料金照会（一部未預託_片方なし）のレイアウト */
  .layoutRyokinJohoIchibu {
    grid-template-columns: 180px repeat(2, 1fr);
    grid-template-rows: repeat(8, min-content);
    grid-template-areas:
      "title1_0 subtitle1 title0_0"
      "title1_0 subtitle1 subtitle2"
      "title1_1 item1_1 item2_1"
      "title1_2 item1_2 item2_2"
      "title1_3 item1_3 item2_3"
      "title1_4 item1_4 item2_4"
      "title1_5 item1_5 item2_5"
      "title1_6 item1_6 item2_6";
  }
  /* -一般料金照会- 料金照会（未預託）のレイアウト */
  .layoutRyokinJohoMiyotaku {
    grid-template-columns: 180px repeat(4, 1fr);
    grid-template-rows: repeat(7, min-content);
    grid-template-areas:
      "title1_0 subtitle1 subtitle2 subtitle3 subtitle4"
      "title1_1 item1_1 item2_1 item3_1 item4_1"
      "title1_2 item1_2 item2_2 item3_2 item4_2"
      "title1_3 item1_3 item2_3 item3_3 item4_3"
      "title1_4 item1_4 item2_4 item3_4 item4_4"
      "title1_5 item1_5 item2_5 item3_5 item4_5"
      "title1_6 item1_6 item2_6 item3_6 item4_6";
  }
  
  .layout20yearLimitInquiry{
    & {
      display: flex;
      justify-content: space-between;
    }
  }
  
  .VDIS_sharyoJojoGrid {
    grid-template-columns: 180px 1fr 180px 1fr;
    grid-template-rows: auto;
  }
  
  .VDIS_zgysyJojoGrid {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto;
  }
.VDIS_syrJokyGrid {
  grid-template-columns: 70px 1fr 70px 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "kuti1_2     kuti1_2   kuti1_2      status1"
    "hktrblbl1_2 hktrb1_2  hkwtsblbl1_2 hkwtsb1_2"
    "kuti2_2     kuti2_2   kuti2_2      status2"
    "hktrblbl2_2 hktrb2_2  hkwtsblbl2_2 hkwtsb2_2"
    "kuti3_2     kuti3_2   kuti3_2      status3"
    "hktrblbl3_2 hktrb3_2  hkwtsblbl3_2 hkwtsb3_2"
    "kuti4_2     kuti4_2   kuti4_2      status4"
    "hktrblbl4_2 hktrb4_2  hktrb4_2     hktrb4_2";
  & .hktrblbl1_2 { grid-area: hktrblbl1_2; }
  & .hktrblbl2_2 { grid-area: hktrblbl2_2; }
  & .hktrblbl3_2 { grid-area: hktrblbl3_2; }
  & .hktrblbl4_2 { grid-area: hktrblbl4_2; }
  & .hktrb1_2 { grid-area: hktrb1_2; }
  & .hktrb2_2 { grid-area: hktrb2_2; }
  & .hktrb3_2 { grid-area: hktrb3_2; }
  & .hktrb4_2 { grid-area: hktrb4_2; }
  & .hkwtsblbl1_2 { grid-area: hkwtsblbl1_2; }
  & .hkwtsblbl2_2 { grid-area: hkwtsblbl2_2; }
  & .hkwtsblbl3_2 { grid-area: hkwtsblbl3_2; }
  & .hkwtsb1_2 { grid-area: hkwtsb1_2; }
  & .hkwtsb2_2 { grid-area: hkwtsb2_2; }
  & .hkwtsb3_2 { grid-area: hkwtsb3_2; }
  & .kuti1_2 { grid-area: kuti1_2; }
  & .kuti2_2 { grid-area: kuti2_2; }
  & .kuti3_2 { grid-area: kuti3_2; }
  & .kuti4_2 { grid-area: kuti4_2; }
  & .status1 { grid-area: status1; justify-content: end; }
  & .status2 { grid-area: status2; justify-content: end; }
  & .status3 { grid-area: status3; justify-content: end; }
  & .status4 { grid-area: status4; justify-content: end; }
}
  /* pcの場合に表示、スマホ／タブレットで非表示 */
  .VDIS_pcShow {
    display: none;
  }
  /* pcの場合に非表示、スマホ／タブレットで表示 */
  .pcHide {
    display: grid;
  }
  /* スマホの場合に非表示、PC／タブレットで表示 */
  .smpHide {
    display: grid;
  }
  .VDIS_syrjky th,
  .VDIS_syrjky td {
    white-space: normal;
  }
}

/*-------------------------------------------------------------------------------------
  for - pc
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
  .smpDispNone {
    display: block !important;
  }

  .pcHide-flex { 
    display: none;
  }
  .scrollTable tbody td.pcHide-flex {
    display: none !important;
  }

  .pcHide {
    display: none;
  }
  .scrollTable tbody td.pcHide {
    display: none !important;
  }
  /* pcの場合に表示。スマホで非表示 */
  .pcShow {
    display: block;
  }
  .scrollTable tbody tr.pcShow {
    display: table-row !important;
  }
  /* smpの場合に表示、PC／タブレットで非表示 */
  .smpShow {
    display: none !important;
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    vertical-align: 3px;
  }

	/* hikitoriTableはKNHS0010の一覧専用 */
  /* 
	 一覧の縦スクロール表示
	 最小290px（5行分）
	 最大は画面サイズに応じて拡張
	 */
  .scrollTable > .hikitoriTableScroll{
    min-height:290px;
    max-height:calc(100vh - 400px);
  }

  .hikitoriTable input[type="radio"] + label {
    margin-left: var(--size1);
    margin-right: var(--size1);
  }

  /* 車台番号エリアのレイアウト */
  .shadaiNumberGrid {
    grid-template-columns: 250px auto;
    grid-template-rows: max-content max-content;
    grid-template-areas:
      "title1 check"
      "title1 item1"
      "title2 item2";
    
  }

  /* 車台番号エリアのレイアウト */
  .KDIS_shadaiNumberGrid {
    grid-template-columns: 250px auto;
    grid-template-rows: max-content max-content;
    grid-template-areas:
      "title1 item1"
      "title2 check"
      "title2 item2";
    
  }

  .gridTitle {
    width: 250px;
  }

  /* 登録番号／車両番号エリアのレイアウト */
  .sharyoNumberGrid {
    grid-template-columns: 250px auto;
    grid-template-rows: 1fr;
    grid-template-areas:
      "title item";
    
    & .item {
      display: flex;
    }
    & .item > div {
      display: flex;
      align-items:center;
    }
    & .subTitle {
      width: max-content;
    }
  }

  /* 事由エリアのレイアウト */
  .layoutJiyu {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
      "title check"
      "item item";
    
    & .check {
      display: flex;
    }
  }

  .layoutVehicleInfo {
    grid-template-columns: 200px 1fr 200px 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: 1fr; 
  }

  .layoutRyokinJoho1 {
    grid-template-columns: 200px auto;
    width: 40%;
  }

  .layoutRyokinJoho2 {
    grid-template-columns: 200px repeat(2, 1fr);
    width: 60%;
  }

  .layoutSyunoHoho {
    grid-template-columns: 200px auto;
    width: 50%;
  }

  .layoutYotakuJoho {
    grid-template-columns: 200px auto;
    width: 50%;
  }

  .hikitoriTable {
  }
  .hikitoriTable col{
    display: table-column;
  }
  .hikitoriTable th {
    background-color: #E7EAED;
  }

  .hikitoriTable col.show {
    display: table-column;
  }

  .hikitoriTable thead tr > th.show,
  .hikitoriTable tbody tr > td.show {
    display: table-cell;
  }

  .hikitoriTable col.hide {
    display: none;
  }

  .hikitoriTable thead tr > th.hide,
  .hikitoriTable tbody tr > td.hide {
    display: none !important;
  }
  
  .scrollTable > .tableSticky{
      /*min-height:calc(100vh - 478px);*/
      max-height:540px;
  }

  .KDIS_sharyoJojoGrid {
    grid-template-columns: 200px 1fr 200px 1fr;
    grid-template-rows: auto;
  }
  /* -一般料金照会- 料金照会（預託済）のレイアウト */
  .layoutRyokinJohoYotaku {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "title1_0 subtitle1"
      "title1_1 item1_1"
      "title1_2 item1_2"
      "title1_3 item1_3"
      "title1_4 item1_4"
      "title1_6 item1_6";
    width: 40%;
  }
  /* -一般料金照会- 料金照会（一部未預託_両方なし）のレイアウト */
  .layoutRyokinJohoIchibuAll {
    grid-template-columns: 200px repeat(4, 1fr);
    grid-template-rows: repeat(8, min-content);
    grid-template-areas:
      "title1_0 subtitle1 title0_0 title0_0 title0_0 "
      "title1_0 subtitle1 subtitle2 subtitle3 subtitle4"
      "title1_1 item1_1 item2_1 item3_1 item4_1"
      "title1_2 item1_2 item2_2 item3_2 item4_2"
      "title1_3 item1_3 item2_3 item3_3 item4_3"
      "title1_4 item1_4 item2_4 item3_4 item4_4"
      "title1_5 item1_5 item2_5 item3_5 item4_5"
      "title1_6 item1_6 item2_6 item3_6 item4_6";
  }
  /* -一般料金照会- 料金照会（一部未預託_片方なし）のレイアウト */
  .layoutRyokinJohoIchibu {
    grid-template-columns: 200px 250px 250px;
    grid-template-rows: repeat(7, min-content);
    grid-template-areas:
      "title1_0 subtitle1 title0_0"
      "title1_0 subtitle1 subtitle2"
      "title1_1 item1_1 item2_1"
      "title1_2 item1_2 item2_2"
      "title1_3 item1_3 item2_3"
      "title1_4 item1_4 item2_4"
      "title1_5 item1_5 item2_5"
      "title1_6 item1_6 item2_6";
      
    & {
      border-top: none;
    }
  }
  /* -一般料金照会- 料金照会（未預託）のレイアウト */
  .layoutRyokinJohoMiyotaku {
    grid-template-columns: 200px repeat(4, 1fr);
    grid-template-rows: repeat(7, min-content);
    grid-template-areas:
      "title1_0 subtitle1 subtitle2 subtitle3 subtitle4"
      "title1_1 item1_1 item2_1 item3_1 item4_1"
      "title1_2 item1_2 item2_2 item3_2 item4_2"
      "title1_3 item1_3 item2_3 item3_3 item4_3"
      "title1_4 item1_4 item2_4 item3_4 item4_4"
      "title1_5 item1_5 item2_5 item3_5 item4_5"
      "title1_6 item1_6 item2_6 item3_6 item4_6";
  }
  
  .layout20yearLimitInquiry{
    & {
      display: flex;
      justify-content: space-between;
    }
  }
  
  .VDIS_sharyoJojoGrid {
    grid-template-columns: 200px 1fr 200px 1fr;
    grid-template-rows: auto;
  }
  .VDIS_zgysyJojoGrid {
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
  }
  .VDIS_syrJokyGrid {
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "hktrgysy  hktrgysy   arrow1 hrnkisyugysy hrnkisyugysy arrow2 kitigysy  kitigysy   arrow3 hsigysy   hsigysy"
      "hktrblbl1_1 hkwtsblbl1_1 kuhk1  hktrblbl2_1    hkwtsblbl2_1   kuhk2  hktrblbl3_1 hkwtsblbl3_1 kuhk3  hktrblbl4_1 hktrblbl4_1"
      "hktrb1_1    hkwtsb1_1    kuhk4  hktrb2_1       hkwtsb2_1      kuhk5  hktrb3_1    hkwtsb3_1    kuhk6  hktrb4_1    hktrb4_1"
      "kuti1_1   kuti1_1    kuhk7  kuti2_1      kuti2_1      kuhk8  kuti3_1   kuti3_1    kuhk9  kuti4_1   kuti4_1";
  & .hktrgysy { grid-area: hktrgysy; justify-items: center; }
  & .arrow1 { grid-area: arrow1; justify-items: center; }
  & .hrnkisyugysy { grid-area: hrnkisyugysy; justify-items: center; }
  & .arrow2 { grid-area: arrow2; justify-items: center; }
  & .kitigysy { grid-area: kitigysy; justify-items: center; }
  & .arrow3 { grid-area: arrow3; justify-items: center; }
  & .hsigysy { grid-area: hsigysy; justify-items: center; }
  & .hktrblbl1_1 { grid-area: hktrblbl1_1; }
  & .hktrblbl2_1 { grid-area: hktrblbl2_1; }
  & .hktrblbl3_1 { grid-area: hktrblbl3_1; }
  & .hktrblbl4_1 { grid-area: hktrblbl4_1; }
  & .hktrb1_1 { grid-area: hktrb1_1; }
  & .hktrb2_1 { grid-area: hktrb2_1; }
  & .hktrb3_1 { grid-area: hktrb3_1; }
  & .hktrb4_1 { grid-area: hktrb4_1; }
  & .hkwtsblbl1_1 { grid-area: hkwtsblbl1_1; }
  & .hkwtsblbl2_1 { grid-area: hkwtsblbl2_1; }
  & .hkwtsblbl3_1 { grid-area: hkwtsblbl3_1; }
  & .hkwtsb1_1 { grid-area: hkwtsb1_1; }
  & .hkwtsb2_1 { grid-area: hkwtsb2_1; }
  & .hkwtsb3_1 { grid-area: hkwtsb3_1; }
  & .kuti1_1 { grid-area: kuti1_1; }
  & .kuti2_1 { grid-area: kuti2_1; }
  & .kuti3_1 { grid-area: kuti3_1; }
  & .kuti4_1 { grid-area: kuti4_1; }
  & .kuhk1 { grid-area: kuhk1; }
  & .kuhk2 { grid-area: kuhk2; }
  & .kuhk3 { grid-area: kuhk3; }
  & .kuhk4 { grid-area: kuhk4; }
  & .kuhk5 { grid-area: kuhk5; }
  & .kuhk6 { grid-area: kuhk6; }
  & .kuhk7 { grid-area: kuhk7; }
  & .kuhk8 { grid-area: kuhk8; }
  & .kuhk9 { grid-area: kuhk9; }
  }
  /* pcの場合に表示、スマホ／タブレットで非表示 */
  .VDIS_pcShow {
    display: grid;
  }
  /* スマホの場合に非表示、PC／タブレットで表示 */
  .smpHide {
    display: grid;
  }
}
.uploadAreaBorder {
    border-style: dotted;
    border-width: medium;
    border-color: #008b8b;
}

/*-------------------------------------------------------------------------------------
  ヘッダ固定
-------------------------------------------------------------------------------------*/
.minorNavSticky{
	position:sticky;
	top:0;
	margin-top:calc(var(--size4) * -1);
	padding-top:var(--size4);
	padding-bottom:var(--size2);
	background-color:#fbfbf7;
	z-index:3;
}
.minorNavSticky > aside + nav.minorNav {
	position:sticky;
	top:0;
	margin-top:calc(var(--size4) * -1);
	padding-top:var(--size4);
	padding-bottom:var(--size4);
	background-color:#fbfbf7;
	z-index:3;
}
.minorNavSticky > nav.minorNav {
	position:sticky;
	top:0;
	margin-top:calc(var(--size4) * -1);
	padding-top:var(--size4);
	padding-bottom:var(--size2);
	background-color:#fbfbf7;
	z-index:3;
}
.minorNavSticky > div.minorNav {
	position:sticky;
	top:0;
	margin-top:calc(var(--size4) * -1);
	padding-top:var(--size4);
	padding-bottom:var(--size2);
	background-color:#fbfbf7;
	z-index:3;
	justify-content: normal;
}
.minorNav > div.buttons {
	display: flex;
	margin-left:var(--size6);
	gap:var(--size2);
}

/* モック＿サンプルのstyle */
/* 表示用テーブルスタイル */
.content > div .dispTable {
	border-top:1px solid #A7A9BC;
	border-bottom:0px solid #A7A9BC;
}
/* 検索条件用テーブルスタイル */
.content > div .searchTable th{
	background-color:#E7EAED;
	border-top:0px solid #A7A9BC;
}
.content > div .searchTable td:not(:first-child){
	border-top:0px solid #A7A9BC;
}

/*
 右罫線
 テーブル構成の場合、下側の影を調整
 */
.content > div table.dispTable .borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.content > div table.dispTable th.borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.content > div table.dispTable th.borderRight[colspan]{
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #ffffff inset;
}
.content > div table.dispTable th.borderRightBottom{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.content > div table.searchTable .borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.content > div table.searchTable th.borderRight{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}
.content > div table.searchTable th.borderRight[colspan]{
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #ffffff inset;
}
.content > div table.searchTable th.borderRightBottom{
	padding-right:calc(var(--size2) + 1px);
	box-shadow:-1px 0 0 0 #A7A9BC inset,
		   0 -1px 0 0 #A7A9BC inset;
}

/*-------------------------------------------------------------------------------------
	orderedDiv
-------------------------------------------------------------------------------------*/
.orderedDiv{
  counter-reset: divNumber 0;
}
.orderedDiv > div{
  counter-increment: divNumber 1;
	position:relative;
	padding:var(--size4) var(--size2) var(--size4) var(--size8);
	border:0 solid #A7A9BC;
	border-width:2px 0;
}
.orderedDiv > div p{
	margin-bottom:var(--size4);
}
.orderedDiv > div + div{
	border-top-width:0;
}
.orderedDiv > div::before{
  content: counter(divNumber);
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	display:flex;
	justify-content:flex-end;
	width:var(--size7);
	padding:var(--size4) var(--size2) 0 0;
	background:none #E7EAED;
	font-family:inherit;
	font-size:inherit;
	box-sizing:border-box;
}
	.sectionToggle .sectionToggle > div,
	.sectionToggle section > .orderedDiv{
		padding: 0;
	}
	
th.borderTop{
	border-top:1px solid #A7A9BC;
}