@charset "UTF-8";

/*---色の変数指定--------------------------------------------------------------------------------------------------------------------------------------------------------*/
:root{
	--light-color:#eefafb;
	--main-color:#009AA3;
	--main-grad:linear-gradient(to right, #009AA3 0%, #00A496 80%, #83CBD2 90%, #a3d8dd 0%);
	--mtrl-sdw-color:rgb(163 175 174 / 45%);
	--mtrl-box-shadow: 0px 2px 4px 0px var(--mtrl-sdw-color);
	--spr-bd-color:#bacbd7;
	--act-sdw-color:rgb(45 200 209 / 66%);
	--fcs-box-shadow: 0px 0px 4px 2px var(--act-sdw-color);
	--act-bs-color:#767676;
	--btn-sdw-color:rgb(131 201 155 / 71%);
	--btn-box-shadow: 0px 2px 4px 0px;
	--btnfcs-box-shadow: 0px 1px 2px 0px;
	--mnr-color:#4d4d4d;
	--mnr-grad:linear-gradient(to right, #4d4d4d 0%, #8e8e8e 80%, #acacac 100%);
	--btnmnr-sdw-color:rgb(70 84 75 / 59%);
	--err-msg-bk:#FF4B00;
	--err-bd:linear-gradient(to right, #ff4d00 0%, #cc2200 80%, #e0bba9 90%, #e6b399 0%);
	--err-inpt:#fff4f0;
	--uib-color: #00875b;
	--uib-speed: 3s;
	--most-color:#ab0000;
}

*{
	font-family: 'Noto Sans JP','メイリオ', 'Meiryo', sans-serif;
}

/*---共通--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--ベースdiv設定--------------------------------------------------------------------------------------------*/
@media screen and ( min-width:1031px) {
	html{
		height: 100%;
	}
	body{
		background: #fafafa;
		margin:0;
		height: 100%;
	}
}
@media screen and ( max-width:1030px) {
	html{
		height: 100%;
	}
	body{
		background: #fafafa;
		margin:3px;
		height: 100%;
	}
}

#contents {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	background: #FFFFFF;
	position: relative;
}
@media screen and ( min-width:1030px) {
	#contents {
		max-width:1500px;
		min-width:1340px;
		padding-top: 1em;
		padding-bottom: 1em;
		padding-right:0.5em;
		padding-left:0.5em;
		min-height:calc(100% - 2em);
	}
}
@media screen and ( max-width:1030px) {
	#contents {
		width: 100%;
		padding-bottom:60px;
		min-width:350px;
	}
}

/*--ページタイトル-------------------------------------------------*/
.page-title {
	width: calc(100% - 10px - 1em);
	font-size: 1.5em;
	border-left: 10px solid;
	border-left-color:var(--main-color);
	padding-left: 1em;
	border-bottom: 2px solid;
	border-image: var(--main-grad);
	border-image-slice: 1;
}
.page-title-logo {
	width: calc(100% - 10px - 1em);
	font-size: 1.5em;
	border-left: 10px solid;
	border-left-color:var(--main-color);
	padding-left: 1em;
    background-image: url(../logo/logo-Hs.png);
    background-repeat:no-repeat;
    background-size:auto 100%;
    background-position:right;
}

/*-サブタイトル--------------------------------------------------*/
.sub-title {
	width: calc(100% - 1em);
	margin-top:2em;
	padding-left: 1em;
	border-bottom: 1px solid;
	border-image: var(--main-grad);
	border-image-slice: 1;

}
/*-フォントサイズ指定--------------------------------------------*/
.font-mid {
	font-size: 1.2rem;
}
/*-テーブル型グリッド------------------------------------------------*/
/*-行-*/
.row{
	display: grid;
}
/*-ヘッダー-*/
.data-header{
	display: grid;
}
/*-ヘッダーセル-*/
.item-name {
	background-color: var(--light-color);
	padding-left: 1em;
	border-bottom: solid 2px;
	border-bottom-color:var(--spr-bd-color);
	align-items: center;
	justify-items: center;
	display: flex;
	z-index: 1;
	position:relative;
}
.item-name.tool{
	display:none;
}
.item-name.open-row::before{
	content:none;
}
.item-name.close-row::before{
	content:none;
}

/*-削除-*/
.row-del {
	position:absolute;
	min-width:1.5em;
	left:0;
	top:0;
	bottom: 0;
	display:none;
	cursor: pointer;
}

.row-del::before{
	position:absolute;
	left:0;
	top:50%;
	content:"\00d7";
	font-size:1.5em;
	z-index:1;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transition:color 0.7s ease;
}
.input-data-row:last-child .row-del{
	display:block;
}

.row-del{
	transition:background-color 0.7s ease;
}
.row-del:hover{
	background-color:#009AA3;
}
.row-del:hover::before{
	color:#FFFFFF;
}
.input-data-row .item-name{
	padding-left:1.5em;
	position:relative;
}

@media screen and (max-width:1030px) {
	.row-del {
		display:none !important;
	}
	.data-header{
		display: none !important;
	}
	.item-name.tool{
		display:flex;
		color:var(--main-color);
		text-decoration:underline;
		text-underline-offset:3px;
	}
	.tool-row-del {
		width:20%;
		text-align:center;
		display:none;
		cursor: pointer;
		height: 45px;
		line-height: 45px;
	}
	.input-data-row:last-child .tool-row-del{
		display:block;
	}
	.toggle {
		width:20%;
		margin-left:auto;
		margin-right:8px;
		text-align:center;
		cursor: pointer;
		height: 45px;
		line-height: 45px;
	}
}
/*--説明-------------------------------------------*/
.page-note {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}
@media screen and (max-width:1030px) {
	.page-note {
		font-size: 10pt;
	}
}
.page-note ul {
	list-style-type: none;
	padding-left: 20px;
}
.page-note ul li::marker {
	content: '\203b';
	font-size: 0.9em;
	color: #c10000;
	font-weight: bold;
}
.page-note ul li {
	margin-top: 2px;
	margin-bottom: 2px;
}

/*--説明内の要注意箇所-----------------------------------*/
.most-important-data {
	font-size: 1.5em;
	text-decoration:underline;
	text-underline-offset: 3px;
	color:var(--most-color);
}
.important-data {
	font-size: 1.2em;
	text-decoration:underline;
	text-underline-offset: 3px;
	background-color:var(--light-color);
}
@media screen and (max-width:1030px) {
	.important-data {
		text-decoration: underline;
		text-decoration-color: var(--main-color);
		font-size:1.2em;
	}
}
/*-エラーメッセージ＆要素-------------------------------------------------------*/
.err-msg {
	text-align:left;
	font-size:0.8em;
	border:solid 1px var(--err-msg-bk);
	color:#FFFFFF;
	background:var(--err-msg-bk);
	border-radius:2px;
	margin-bottom:2px;
}

.err-obj {
	border-color:var(--err-msg-bk) !important;
	background:var(--err-inpt) !important;
}
@media screen and ( max-width:1030px) {
	.err-msg {
		max-width: 170px;
		word-break: break-all;
	}
}

/*-モーダル----------------------------------------*/
#popup-show{
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	inset:0;
	z-index:5;
}

#popup-content {
	position:absolute;
	background-color: #fff;
	padding: 20px;
	border: solid 1px #757575;
	border-radius: 10px;
	box-sizing: border-box;
	width: fit-content;
	height: fit-content;
	max-width: 80vw;
	max-height: 80vh;
	min-height: 20vh;
	display: flex;
	flex-direction: column;
	overflow-y:auto;
	box-shadow: 0 0 0 100vmax rgb(0 0 0 / 50%);
	inset: 0;
	margin: auto;
	/* firefox prefixes */
	width:-moz-fit-content;
	height: -moz-fit-content;
	margin-top: calc(100vw / 20);
}
.popup-txt{
	display:none;
}
#help-title,
#err-title,
#conf-title,
#wait-title {
	margin: 0;
	width: 100%;
	padding:0;
}
.popup-cont-close {
	text-align: right;
	margin-top:2px;
	border-top: solid 1px;
	border-image: var(--main-grad);
	border-image-slice: 1;
	padding-top: 2px;
	position:relative;
}
.err-bd{
	border-image:var(--err-bd);
	border-image-slice:1;
}

#conf-close-area .btn:first-child {
	position:absolute;
	left:0;
}

@media screen and ( max-width:1030px) {
	#popup-content {
		 width:95%;
		 max-width:95%;
		 height:fit-content;
		 max-height:95%;
		 font-size:10pt;
		 line-height: 18pt;
	}
	#help-content ul {
		padding-left:10px;
	}
}

/*待機モーション*/
.ping {
	position: relative;
	height: 115px;
	width: 115px;
	margin-right: auto;
	margin-left: auto;
}

.ping::before,
.ping::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	background-color: var(--uib-color);
	animation: pulse var(--uib-speed) linear infinite;
	transform: scale(0);
	opacity: 0;
}

.ping::after {
	animation-delay: calc(var(--uib-speed) / -2);
}

#wait-dot {
	display: flex;
	position: relative;
	min-height:2px;
	min-width:2px;
	height: auto;
}
#wait-dot>div {
	display: inline-block;
	animation:dot-move 3s ease-in-out calc(var(--uib-speed) * 0.125) infinite both;
}

#wait-dot::after {
	display: inline-block;
	content:"\30fb";
	color:#000000;
	animation:dot-move var(--uib-speed) ease-in-out calc(var(--uib-speed) * 0.25) infinite both;
}
#wait-dot::before {
	display: inline-block;
	content:"\30fb";
	color:#000000;
	animation:dot-move var(--uib-speed) ease-in-out infinite;
}
#wait-sentence {
	display: flex;
	position: relative;
	text-align: center;
	justify-content: center;
	align-items: center;
}

#wait-content {
	width:200px;
	margin-right:auto;
	margin-left:auto;
}

@keyframes dot-move{
	0%,
	100% {
		transform: scale(0);
	}
	50% {
		transform: scale(1);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}
/*--ボタン全般挙動-------------------------------------------------------------------------*/
/*--基本ボタンデザイン--------------------------------------*/
.btn {
	appearance:none;
	display:inline-block;
	vertical-align:middle;
	height:45px;
	font-size:1.4em;
	width:calc(8em + 40px);
	border-radius: 2px;
	cursor:pointer;
	transition:transform 0.7s ease,box-shadow 0.7s ease;
	border-style: solid;
	border-width: 1px;
	border-bottom-width: 2px;
	background: #FFFFFF;
	position:relative;
	box-shadow: var(--btn-box-shadow) var(--btn-sdw-color);
}
@media screen and ( max-width:1030px) {
	.btn {
		width: calc(50% - 5px);
		padding: 0;
		border-style: solid;
	}
}
.btn::before {
	width:0;
	height:2px;
	position:absolute;
	left:0;
	bottom:4px;
	content:"";
	transition:width 0.7s ease;
	box-shadow: var(--btnfcs-box-shadow) var(--btn-sdw-color);
}
/*--基本ボタンホバーデザイン--------------------------------------*/
.btn:hover,
.btn:focus,
.btn:target{
	transform:translateY(2px);
	box-shadow: var(--btnfcs-box-shadow);
	outline:0;
}
.btn:hover::before,
.btn:focus::before,
.btn:target::before {
	width:100%;
}

/*-ボタン個別デザイン--------------------------------------------*/
/*-ミニボタン、ヘルプボタン------------------------*/
.mini-btn {
	min-width: 5em;
	width: 5em;
	font-weight: normal;
	font-size: 1.2em;
}

/*-通常ボタン------------------------*/
/*-マイナス動作ボタン------------------------*/
.nrml-btn::before{
	background: var(--main-grad);
}
.nrml-btn {
	border-color: var(--main-color);
	color: var(--main-color);
}
.mnr-btn::before {
	background: var(--mnr-grad);
}
.mnr-btn {
	border-color: var(--mnr-color);
	color: var(--mnr-color);
	box-shadow:var(--btn-box-shadow) var(--btnmnr-sdw-color);
}
.mnr-btn:hover,
.mnr-btn:focus,
.mnr-btn:target {
	box-shadow:var(--btnfcs-box-shadow) var(--btnmnr-sdw-color);
}

/*--アクションボタン-----------------------------------------*/
.act-btn {
	color:#FFFFFF;
	background:var(--main-color);
	font-size:1.8em;
	align-items:center;
	border-color:var(--main-color);
	box-shadow: var(--btn-box-shadow) var(--btn-sdw-color);
	padding-bottom:2px;
}
.act-btn:hover,
.act-btn:focus,
.act-btn:target {
	background: var(--light-color);
	color:var(--main-color);
}
.act-btn:hover::before,
 .act-btn:focus::before,
.act-btn:target::before {
	background-image: var(--main-grad);
}

/*--ページ下部ボタンセット域設定---------------------------------------------------------------*/
.button-set {
	margin-top: 10px;
	position:relative;
	height: 60px;
	background: #FFFFFF;
	z-index: 2;
}
.button-set > button:first-child {
	position:absolute;
	top:5px;
	left:5px;
}
.button-set > button:last-child {
	position:absolute;
	top:5px;
	right:5px;
}
@media screen and ( max-width:1030px) {
	.button-set > button{
		top: 2px;
	}
	.button-set > button:first-child {
		left: 1px;
	}
	.button-set > button:last-child {
		right: 1px;
	}
	.button-set {
		position: fixed;
		bottom: 0;
		height: 50px;
		width: 100%;
		right: 0;
		left: 0;
		margin-top:0;
		box-shadow: 0px 1px 11px 1px rgb(10 20 16 / 62%);
	}
}
/*--入力要素設定-----------------------------------------------------------------------*/
/*-チェックボックス--------------------------------*/
input[type="checkbox"] {
	/*visually-hidden設定ココカラ*/
	position: absolute;
	white-space: nowrap;
	width: 1px;
	height: 1px;
	overflow: hidden;
	border: 0;
	padding: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%); 
	margin: -1px;
	/*visually-hidden設定ココマデ*/
}
/*-ダミーチェックボックス--------------------------------*/
input[type="checkbox"] + .check-dummy {
	max-height: 3em;
	display:flex;
	align-items:center;
	text-align: left;
	min-height: 45px;
	padding-top:2px;
	padding-bottom:2px;
	font-size: inherit;
	border:solid 1px;
	border-bottom-width:2px;
	border-color:var(--act-bs-color);
	padding-left:35px;
	width:calc(100% - 6px - 35px);
	max-width:150px;
	position:relative;
	border-radius:2px;
	transition:background-image 0.7s ease,border-color 0.7s ease;
	line-height: 1.5em;
	background: #FFFFFF;
}
/*-チェックボックスホバー、フォーカス時のダミーチェックボックス--------------------------------*/
input[type="checkbox"]:hover + .check-dummy,
input[type="checkbox"]:focus + .check-dummy,
input[type="checkbox"]:target + .check-dummy,
.check-dummy:hover,
.check-dummy:target {
	border-color: var(--main-color);
	background-color:var(--light-color);
	box-shadow:var(--fcs-box-shadow);
}
input[type="checkbox"]:hover + .check-dummy::before,
input[type="checkbox"]:focus + .check-dummy::before,
input[type="checkbox"]:target + .check-dummy::before,
.check-dummy:hover::before,
.check-dummy:target::before {
	border-color:var(--main-color);
}

/*--ダミーチェックボックス設定------------------------------------------------------------*/
input[type="checkbox"] + .check-dummy::before{
	content:"";
	position:absolute;
	border:solid 1.5px;
	border-color:var(--act-bs-color);
	width: 24px;
	height: 24px;
	border-radius:2px;
	top:25%;
	left:2px;
	transition:all 0.7s ease;
	display:flex;
}
input[type="checkbox"] + .check-dummy::after {
	content: "";
	position: absolute;
	transition:width 0.7s ease,height 0.7s ease;
	border-radius: 2px;
	top: calc( 25% + 2px);
	left: 10px;
	transform: rotate(45deg);
	display:flex;
}

input[type="checkbox"]:checked + .check-dummy::after {
	border-bottom: solid 4px #FFFFFF;
	border-right: solid 4px #FFFFFF;
	width: 7px;
	height: 14px;
}

input[type="checkbox"]:checked + .check-dummy::before {
	background: var(--main-color);
	border-color:var(--main-color);
}

/*--チェックボックスでのon/off領域--（チェックボックス+ダミーチェックボックス+on/off領域で兄弟要素になっていること）-----------------------------------------*/
.checkon{
	height:0px;
	transition:height 0.7s ease;
	overflow:hidden;
	position:relative;
	line-height: 2em;
	visibility:collapse;
	display: block;
}
input[type="checkbox"]:checked + .check-dummy + .checkon{
	max-height: 6em;
	height: 2.5em;
	margin-top: 5px;
	visibility:visible;
}

/*-テキストボックス・セレクトボックス全般設定------------------------------------------*/
input[type="tel"],
input[type="text"],
input[type="number"],
.sel select {
	box-sizing: border-box;
	appearance: none;
	height: 2em;
	border-color:var(--act-bs-color);
	font-size: 1rem;
	border-style: solid;
	border-width: 1px;
	border-radius:2px;
	border-bottom-width: 2px;
	background: #FFFFFF;
	padding-top: 2px;
	padding-bottom: 2px;
	transition:border-color 0.7s ease,box-shadow 0.7s ease;
}
/*-テキストボックス・セレクトボックス全般ホバー時----------------------------------------------*/
.sel select:focus,
.sel select:target,
input[type="tel"]:focus,
input[type="tel"]:target,
input[type="text"]:focus,
input[type="text"]:target,
input[type="number"]:focus,
input[type="number"]:target{
	appearance: none;
	border-color: var(--main-color);
	outline: none;
	box-shadow: var(--fcs-box-shadow);
}

/*-年・人数入力欄（2桁～4桁数字なので大体同じにする）------------------------------------*/
input.year,
input.ninzu {
	width: 3.5rem;
	height: 2rem;
	margin-right: 3px;
	text-align:right;
}
/*--金額入力欄-------------------------------------*/
input.money {
	width: 6.5em;
	margin-right: 3px;
	text-align:right;
}

/*-セレクトボックス設定---------------------------------------------------------*/
/*-デザインを整えるため、常にselectタグを専用spanタグで囲む-------------------------------------------*/
/*----------------------------------------*/
.sel select {
	width:4.5em;
	padding-right:15px;
	padding-left:5px;
}

/*--月日セレクトボックス--------------------------------------*/
.sel .month,
.sel .day{
	width:3em;
}
.sel .nentsuki{
	width:6.5em;
}
#In_SetaiShurui {
    width: 10rem;
}
#In_SanzenSangoGaito {
    width: 7.5rem;
}
/*--専用spanタグ--------------------------------------*/
.sel{
	position:relative;
	display:inline-block;
	background:#FFFFFF;
}
/*--セレクトの▼--------------------------------------*/
.sel::before{
	content:"";
	border-top: 7px solid;
	border-top-color:var(--act-bs-color);
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid transparent;
	position:absolute;
	top:calc(50% - 0.2em);
	right:2px;
}

/*---画面別設定----------------------------------------------------------------------------------------------------------*/

/*-入力画面-------------------------------------------------*/
/*-テーブル内入力エリア設定----------------------------------*/
.item-value {
	text-align: center;
	border-bottom: solid 2px;
	border-bottom-color:var(--spr-bd-color);
	padding-bottom: 2px;
}

/*給与欄*/
.item-value.kyuyo-item {
	display: grid;
	grid-template-columns: 12rem 1fr;
}
.addbtn-area {
	text-align:right;
}
@media screen and (max-width:1030px) {
	.item-value.kyuyo-item {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: 2px;
		align-items: center;
	}
	.addbtn-area {
		text-align:center;
	}
}
/*--世帯主・世帯構成員共通-------------------------------------------*/
#setainushi-table,
#setaikoseiin-table{
	display: grid;
	grid-template-rows: 35px 1fr;
	grid-gap:2px;
}
#setainushi-table .data-header,
#setaikoseiin-table .data-header {
	grid-template-columns: 130px 140px 160px 2fr 320px 145px 145px;
	grid-gap: 2px;
	align-items:center;
	border-style:none;
}
#setainushi-table .data-header .item-name,
#setaikoseiin-table .data-header .item-name{
	border-style:none;
}

#setainushi-table .data-body .row .item-value::before,
#setaikoseiin-table .data-body .row .item-value::before{
	position: absolute;
	content: attr(label-name);
}

@media screen and ( min-width:1030px), print {
	#setainushi-table .data-body .row .item-value::before,
	#setaikoseiin-table .data-body .row .item-value::before{
		overflow: hidden;
		width: 1px;
		height: 1px;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		margin: -1px;
		z-index:-1;
	}
}
@media screen and (max-width:1030px) {
	#setainushi-table .data-body .row .item-value::before,
	#setaikoseiin-table .data-body .row .item-value::before{
		left: 0px;
		bottom: 0px;
		background-color: var(--light-color);
		width: calc(40% - 1.5em);
		max-width:calc(200px - 1.5em);
		text-align: left;
		height:100%;
		padding-left: 1.5em;
		vertical-align:middle;
		align-items:center;
		justify-items: center;
		display: flex;
	}
	#setainushi-table .data-body .row .item-value,
	#setaikoseiin-table .data-body .row .item-value {
		position:relative;
		padding-left:40%;
		text-align: left;
		padding-bottom:2px;
		padding-top:2px;
	}
	#setaikoseiin-table,
	#setainushi-table {
		grid-template-rows:1fr;
		grid-template-columns:1fr;
		width: 100%;
		grid-gap: 0;
	}
	#setainushi-table {
		border-style: solid;
		border-width: 1px;
		border-radius: 2px;
		border-color: var(--spr-bd-color);
		box-shadow:var(--mtrl-box-shadow);
	}
}
/*-世帯主テーブル--------------------------------------------*/
#setainushi-table .data-body .row{
	grid-template-columns: 130px 140px 160px 2fr 320px 145px 145px;
	padding-top: 2px;
	vertical-align: middle;
	grid-gap: 2px;
}
@media screen and (max-width:1030px) {
	#setainushi-table .data-body{
		grid-row-gap: 5px;
	}
	#setainushi-table .data-body .row {
		display: grid;
		grid-template-rows: 65px max-content max-content minmax(80px,max-content) 1fr minmax(65px,max-content) minmax(65px,max-content);
		grid-template-columns: 1fr;
		background-color: #FFFFFF;
		position: relative;
		padding:0;
		grid-gap: 0;
	}
}

/*--世帯構成員テーブル--------------------------------------------------------*/
#setaikoseiin-table .data-body .row {
	grid-template-columns:130px 1fr;
	vertical-align: middle;
	grid-gap:2px;
}

#setaikoseiin-table .data-body .row .data-input {
	display: grid;
	grid-template-columns:140px 160px 2fr 320px 145px 145px;
	grid-gap:2px;
}
.setaikosei-input-hidden{
	display:none !important;
}
@media screen and (max-width:1030px) {
	#setaikoseiin-table .item-name,
	#kojin-body .item-name
	 {
		border-width:1px;
		border-color:var(--main-color);
		border-style:solid;
		border-radius:2px;
		border-bottom-width:2px;
		height: calc(50px - 3px);
	}
	#setaikoseiin-table .data-body .row {
		 grid-gap: 0;
	}
	#setaikoseiin-table .data-body .item-name.close-row::before,
	#kojin-body .item-name.close-row::before
	{
		color:var(--main-color);
		position:absolute;
		right:20%;
		text-decoration:underline;
		text-underline-offset:3px;
	}
	#setaikoseiin-table .data-body .item-name.close-row::before,
	{
		content:"\25bc\5165\529b\3059\308b";
	}
	#kojin-body .item-name.close-row::before
	{
		content:"\25bc\8868\793a\3059\308b";
	}
	#setaikoseiin-table .data-body .item-name.open-row::before,
	#kojin-body .item-name.open-row::before{
		content:"\25b2\9589\3058\308b";
		color:var(--main-color);
		position:absolute;
		right:20%;
		text-decoration:underline;
		text-underline-offset:3px;
	}
	#setaikoseiin-table .data-body .row ,
	#kojin-body .row {
		grid-template-rows: 50px minmax(0,1fr);
		grid-template-columns: 1fr;
		background-color: #FFFFFF;
		position: relative;
		margin-bottom: 25px;
		border-radius: 2px;
		box-shadow: var(--mtrl-box-shadow);
		border-style: solid;
		border-width: 1px;
		border-right-width: 0px;
		border-left-width: 0px;
		border-color: var(--spr-bd-color);
		overflow:hidden;
	}
	#setaikoseiin-table .data-body .row .data-input {
		grid-template-columns: 1fr;
		grid-template-rows: max-content max-content minmax(80px,max-content) 1fr minmax(65px,max-content) minmax(65px,max-content);
		grid-gap:0;
		transition:margin-top 0.7s cubic-bezier(0.51, 0.35, 0.52, 0.94);
		height:fit-content;
		position: relative;
	}
	#setaikoseiin-table .data-body .row .close-row+.data-input,
	#kojintable .row .close-row+.kojin-data {
		margin-top: min(-150%,-600px,-120%);
		overflow:hidden;
		cursor:pointer;
		position:relative;
		z-index: 0;
	}
	#setaikoseiin-table .data-body .item-name.open-row {
		z-index: 1;
	}
	#setaikoseiin-table .data-body .row.open-row+.data-input{
		grid-template-rows: 1fr 1fr 80px 1fr 65px 65px;
		cursor:pointer;
		margin-top:0;
		z-index: 0;
	}
	#kojintable .row .open-row+.kojin-data {
		margin-top:0;
		z-index: 0;
	}
}
/*-入力画面ココマデ-------------------------------------------------*/

/*-試算結果画面-------------------------------------------*/
/*共通*/
/*表示セル*/
.item-contents {
	text-align: right;
	border-bottom: solid 2px;
	border-bottom-color:var(--spr-bd-color);
}
@media screen and ( max-width:1030px) {
	.item-contents{
		position:relative;
	}
	.row .item-contents{
		border-bottom: solid 2px;
		border-bottom-color:var(--spr-bd-color);
	}
	.row .item-contents>span::before,
	.row .item-contents>span::before{
		position: absolute;
		left: 0px;
		bottom:0px;
		content: attr(label-name);
		background-color: var(--light-color);
		width: 50%;
		text-align: left;
		padding-left: 1.5em;
	}
}

/*-トータルテーブル-*/
#total-container {
	display: grid;
	grid-template-columns: 1fr 0.5fr;
	grid-template-rows: 1fr 1fr;
	width: 60%;
	grid-row-gap: 2px;
	font-size: 1.2rem;
}
@media screen and ( max-width:1030px) {
	#total-container {
		width: 100%;
		grid-row-gap: 0;
	}
	#total-container .item-name {
		border-bottom-color: var(--spr-bd-color);
	}
}

/*-トータル詳細テーブル-*/
#total-info {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 2em 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
	width: 100%;
}

#total-info .data-header {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
}
#total-info .data-body {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
}

#total-info .data-body .row {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
	display: grid;
}
@media screen and ( max-width:1030px) {
	#total-info {
		width: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	#total-info .data-body .item-name {
		border-bottom-color:var(--spr-bd-color);
	}
	#total-info .data-body .row {
		grid-template-columns:1fr;
		grid-template-rows:1fr 1fr 1fr 1fr 1fr;
		grid-row-gap: 0;
	}
	#total-info .data-body {
		grid-row-gap: 5px;
	}
}
/*-個人収入テーブル-*/
#kojinshotokutb {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 80px 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
	width: 100%;
}

/*-個人収入テーブルヘッダー-*/
#kojinshotokutb .data-header {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
	grid-template-areas: 
	"nullarea kyuyo kyuyo nenkin nenkin sonota total"
	"nullarea cel1 cel2 cel3 cel4 cel5 cel6"; 
}

#kojinshotokutb .data-header :not([class*="cel"]){
	border-style:none ;
}

/*-各ヘッダーセル（複数行にまたがるのでarea名前指定）-*/
.h-celnullarea{
	grid-area:nullarea;
}
.h-kyuyo{
	grid-area:kyuyo;
}
.h-cel1{
	grid-area:cel1;
}
.h-cel2{
	grid-area:cel2;
}
.h-nenkin{
	grid-area:nenkin;
}
.h-cel3{
	grid-area:cel3;
}
.h-cel4{
	grid-area:cel4;
}
.h-sonota{
	grid-area:sonota;
}
.h-cel5{
	grid-area:cel5;
}
.h-total{
	grid-area:total;
}
.h-cel6{
	grid-area:cel6;
}

#kojinshotokutb .data-body {
	display: grid;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
}

#kojinshotokutb .data-body .row{
	grid-template-columns:1fr 6fr;
}

.kojinshunyu-data{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 2px;
}

.kojin-data [name="shunyushotoku"]{
	display: none;
}

/*-個人詳細テーブル-*/
#kojintable {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 80px 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
	width:100%;
}

/*-個人詳細テーブルヘッダー-*/
#kojintable .data-header{
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
	grid-template-areas: 
	"nullarea kokuhotsuki iryobun iryobun shienbun shienbun kaigobun kaigobun kaigobun total"
	"nullarea kokuhotsuki cel1 cel2 cel3 cel4 cel5 cel6 cel7 total"; 
	width:100%;
}

#kojintable .data-header :not([class*="cel"]){
	border-style:none ;
}

/* 20230808 AT 個人別明細縮小対応 */
#kojintable.nokojindisp .data-header{
	grid-template-columns:1fr 1fr 1fr 1fr 6fr;
	grid-template-areas: 
	"nullarea kokuhotsuki kaigobun total"
	"nullarea kokuhotsuki cel5 total";
}
#kojintable.nokojindisp .nokojindispdata{
	display: none;
}

/*-各ヘッダーセル（複数行にまたがるのでarea名前指定）-*/
.h-celnullarea{
	grid-area:nullarea;
}
.h-celkokuhotsuki{
	grid-area:kokuhotsuki;
}
.h-iryobun{
	grid-area:iryobun;
}
.h-shienbun{
	grid-area:shienbun;
}
.h-kaigobun{
	grid-area:kaigobun;
}
.h-celtotal{
	grid-area:total;
}
.h-cel1{
	grid-area:cel1;
}
.h-cel2{
	grid-area:cel2;
}
.h-cel3{
	grid-area:cel3;
}
.h-cel4{
	grid-area:cel4;
}
.h-cel5{
	grid-area:cel5;
}
.h-cel6{
	grid-area:cel6;
}
.h-cel7{
	grid-area:cel7;
}

#kojintable .data-body{
	display: grid;
	grid-row-gap: 2px;
	grid-column-gap: 2px;
}

#kojintable .data-body .row{
	grid-template-columns:1fr 9fr;
}

span#pertsuki {
    display: contents;
}

.kojin-data{
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 2px;
}

@media screen and ( max-width:1030px) {
	#kojintable .data-body{
		grid-template-columns:1fr;
	}
	
	#kojintable .data-body .kojin-data{
		display:grid;
		grid-template-columns:1fr;
	}
	#kojin-body{
		grid-row-gap: 15px;
	}
	#kojintable{
		grid-template-rows: 1fr;
		grid-template-columns:1fr;
	}
	.kojin-data{
		transition:margin-top 0.7s ease;
		position:relative;
	}
	#kojintable .data-body .row{
		grid-template-rows:50px minmax(0, 9fr);
		grid-template-columns:1fr;
		margin-bottom: 15px;
		border-radius:2px;
	}
	#kojinshotoku-title,
	#kojinshotokutb,
	#kojinshotokutb-body{
		display: none;
	}
	.kojin-data [name="shunyushotoku"]{
		display: initial;
	}
}

@media print{
	#contents{
		width: 100%;
		font-size: 13px;
	}
	.button-set{
		display: none;
	}
	@page{
		margin-top: 45px;
		margin-bottom: 45px;
	}
	.item-name,
	.item-contents{
		border-bottom: solid 2px !important;
		border-right: solid 2px !important;
		border-color: var(--spr-bd-color) !important;
	}
}