@charset "UTF-8";


/* vi-regist
----------------------------------------------------------------------------------------------------
  Date. 2023.08.02
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

------------------------------------------------------------------------------------------------- */
.vi-regist {
	flex-direction: column;
	padding: 16px;
	border-radius: 4px;
	background-color: var(--white);
	box-shadow: 0 0 32px 0 rgba(154,161,171, .2); }
.vi-regist > .b2 {
	border-top: 1px solid var(--gray-bright); }
.vi-regist > .b2:first-child {
	border-top: none; }
.vi-regist > .b2:not(:first-child) {
	padding-top: 16px; }
.vi-regist > .b2:not(:last-child) {
	padding-bottom: 16px; }
 
 
/* vi-spRegist
----------------------------------------------------------------------------------------------------
  Date. 2023.08.02
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-spRegist {
	flex-direction: column;
	min-height: 100%;
	padding: 32px 0;
	border-radius: 0 0 4px 4px;
	background-color: var(--gray-shine); }
.vi-spRegist > .b2:not(:first-child) {
	margin-top: 24px; }


/* vi-spRegistList
----------------------------------------------------------------------------------------------------
  Date. 2023.08.02
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-spRegistList {
	flex-direction: column;
	background-color: var(--white);
	box-shadow: 0 0 32px 0 rgba( 154, 161, 171, .2); }
.vi-spRegistList > .b2:first-child {
	border-top: 1px solid var(--gray-clear); }
.vi-spRegistList > .b2:last-child {
	border-bottom: 1px solid var(--gray-clear); }
.vi-spRegistList > .b2:not(:first-child):after {
	content: "";
	position: absolute;
	width: calc(100% - 16px);
	top: 0;
	right: 0;
	border-top: 1px solid var(--gray-light); }


/* vi-spRegistListItem
----------------------------------------------------------------------------------------------------
  Date. 2023.08.02
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-spRegistListItem {
	height: 48px;
	align-items: center;
	padding: 5px 8px 5px 16px; }
.vi-spRegistListItem > .b2:nth-child(1) {
	width: var(--112);
	flex-shrink: 0; }
.vi-spRegistListItem > .b2:nth-child(2) {
	flex-grow: 1;
	padding-left: var(--16); }

 
/* vi-spDatePickerEdit
----------------------------------------------------------------------------------------------------
  Date. 2023.08.03
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
内包されるインプットパーツ（ データピッカー ）の表現を調整します。
------------------------------------------------------------------------------------------------- */
.vi-spDatePickerEdit input.pa-input[type="calendar"]  {
	width: 100%;
	padding-right: var(--36);
	text-align: right;
	background-color: transparent; }


/* vi-container
----------------------------------------------------------------------------------------------------
  Date. 2021.11.26
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-container {
	display: inline-flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	border-radius: var(--4);
	background-color: var(--white);
	box-shadow: 0 0 32px 0 rgba( 154, 161, 171, .2); }



/* vi-spList
----------------------------------------------------------------------------------------------------
  Date. 2023.06.14
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-spList {
	flex-direction: column;
	margin: 0 16px;
	border-radius: var(--8);
	border: 1px solid var(--gray-light);
	box-shadow: 0 0 8px 0 rgba( 154, 161, 171, .2);
	background-color: var(--white); }
.vi-spList > .b2 {
	border-top: 1px solid var(--gray-light); }
.vi-spList > .b2:first-child {
	border-top: none;
	border-radius: 7px 7px 0 0; }
.vi-spList > .b2:last-child {
	border-radius: 0 0 7px 7px; }



/* vi-spSelection
----------------------------------------------------------------------------------------------------
  Date. 2023.06.14
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SP表示での、顧客検索画面などで使用。
＊se-modalSearchContents関連を削除するのに伴い必要.
------------------------------------------------------------------------------------------------- */
.vi-spSelection {
	flex-direction: column; }
.vi-spSelection > .b2 {
	padding: 8px 16px; }
.vi-spSelection > .b2:after {
	content: "";
	position: absolute;
	width: calc(100% - 16px);
	right: 0;
	bottom: 0;
	border-bottom: 1px solid rgba(0,0,0,.1); } 
.vi-spSelection > .b2:hover {
	background: var(--indigo-o20pe); }


/* vi-spSelectEdit
----------------------------------------------------------------------------------------------------
  Date. 2023.06.22
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SP表示における、編集画面での pa-select に付与する。
------------------------------------------------------------------------------------------------- */
.vi-spSelectEdit .pa-select select {
	width: 100%;
	border: none;
	text-align-last: right;
	padding: 0 31px 0 12px;
	font-weight: normal; }


/* vi-spTimePickerEdit
----------------------------------------------------------------------------------------------------
  Date. 2023.06.22
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SP表示における、編集画面での TimePicker に付与する。
------------------------------------------------------------------------------------------------- */
.vi-spTimePickerEdit .pa-input.timepicker {
	width: 88px;
	text-align: right;
	padding-right: 36px;
	background-color: transparent; }


/* vi-noData
----------------------------------------------------------------------------------------------------
  Date. 2023.08.09
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
テーブルリストなどで、データがない場合に表示する行に付与する。
------------------------------------------------------------------------------------------------- */
.vi-noData {
	text-align: center;
	font-weight: 600;
	color: var(--yellow-overlay);
	background-color: var(--yellow-bright); }


/* vi-bgGradient
----------------------------------------------------------------------------------------------------
  Date. 2023.10.26
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-bgGradient {
	background: linear-gradient(45deg, var(--cyan-shine), var(--blue-shine), var(--yellow-bright));
	background-size: 200% 200%;
	animation: bgGradient 16s ease infinite;
	overflow: inherit; }

@keyframes bgGradient {
	0% {
		background-position: 0% 50%; }
	50% {
		background-position: 100% 50%; }
	100% {
		background-position: 0% 50%; }
}



/* vi-bgFixedLogo
----------------------------------------------------------------------------------------------------
  Date. 2023.10.26
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-bgFixedLogo {
	background-image: url(../img/logo_transparent.svg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20%;  }
@media screen and (max-width: 519px) {
	.vi-bgFixedLogo {
		background-size: 32%; }
}
@media screen and (min-width: 520px) and (max-width: 959px) {
	.vi-bgFixedLogo {
		background-size: 26%; }
}



/* vi-fixedHeader
----------------------------------------------------------------------------------------------------
  Date. 2023.11.24
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-fixedHeader {
	position: fixed;
	width: 100vw;
	padding: 64px;
	background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
	z-index: 100; }
@media screen and (max-width: 519px) {
	.vi-fixedHeader {
	padding: 32px; }
}



.vi-bgWorksTitle {
	height: var(--360);
	overflow: hidden; }

.vi-bgWorksTitle::before {
	content: "";
	position: absolute;
	width: var(--96);
	height: 100%;
	right: 22vw;
	z-index: 3;
	background: linear-gradient( 140deg, var(--red), var(--red-clear), var(--red-light), var(--red-bright), var(--red-shine), var(--magenta), var(--magenta-clear), var(--magenta-light), var(--magenta-bright), var(--magenta-shine));
	background-position: 0 0;
	background-size: 3000% 3000%;
	-webkit-transform: skew(30deg) scaleY(0);
	transform: skew(30deg) scaleY(0);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	transform: translate(0%, 0%) skew(30deg, 0deg);
	mix-blend-mode: multiply;
	animation: bgWorksContents 180s ease infinite;
	overflow: inherit; }
@keyframes bgWorksContents {
	0% {
		background-position: 0 0; }
	50% {
		background-position: 100% 100% }
	to {
		background-position: 0 0; }
}




/* vi-bgAboutContents
----------------------------------------------------------------------------------------------------
  Date. 2023.10.26
Author. Okabe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
------------------------------------------------------------------------------------------------- */
.vi-bgAboutContents {
	width: 100vw;
	height: 100vh; }

.vi-bgAboutContents:before {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100%;
	background-image: url(../../img/shigemune.png);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(100%);
	opacity: .5; }




/* コンテンツタイトルの左上のsannkakkei */
.vi-test:before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background: linear-gradient(to top left, transparent 50% , var(--red-o20pe) 50%); }






.vi-string {
	position: relative;
	margin: var(--2);
	padding: 2px 4px;
	border-radius: var(--2);
	background: var(--gray-bright);
	font-family: 'Courier New', Courier, monospace; }

.vi-string.red, .vi-string.orange, .vi-string.yellow, .vi-string.lime, .vi-string.green, .vi-string.teal, .vi-string.cyan, .vi-string.blue, .vi-string.indigo, .vi-string.purple, .vi-string.pink, .vi-string.magenta, .vi-string.gray {
	padding: 1px 3px;
	background-color: var(--white); }

.vi-string.red {
	color: var(--red);
	border: 1px solid var(--red); }
.vi-string.orange {
	color: var(--orange);
	border: 1px solid var(--orange); }
.vi-string.yellow {
	color: var(--yellow);
	border: 1px solid var(--yellow); }
.vi-string.lime {
	color: var(--lime);
	border: 1px solid var(--lime); }
.vi-string.green {
	color: var(--green);
	border: 1px solid var(--green); }
.vi-string.teal {
	color: var(--teal);
	border: 1px solid var(--teal); }
.vi-string.cyan {
	color: var(--cyan);
	border: 1px solid var(--cyan); }
.vi-string.blue {
	color: var(--blue);
	border: 1px solid var(--blue); }
.vi-string.indigo {
	color: var(--indigo);
	border: 1px solid var(--indigo); }
.vi-string.purple {
	color: var(--purple);
	border: 1px solid var(--purple); }
.vi-string.pink {
	color: var(--pink);
	border: 1px solid var(--pink); }
.vi-string.magenta {
	color: var(--magenta);
	border: 1px solid var(--magenta); }
.vi-string.gray {
	color: var(--gray);
	border: 1px solid var(--gray); }

.pa-code .vi-string {
	background: transparent;
	border: 1px solid; }

.vi-attr,
.vi-value,
.vi-property {
	position: relative;
	margin: var(--2);
	padding: 1px 3px;
	border-radius: var(--2);
	border: 1px solid;
	font-family: 'Courier New', Courier, monospace; }

.vi-attr {
	color: var(--indigo);
	background: var(--indigo-bright); }

.vi-value {
	color: var(--cyan);
	background: var(--cyan-bright); }

.vi-property {
	color: var(--red);
	background: var(--red-bright); }

.vi-multifont .vi-attr,
.vi-multifont .vi-value,
.vi-multifont .vi-string,
.vi-multifont .vi-property {
	top: -2px; }

.vi-codetag {
	position: relative;
	margin: var(--4);
	font-family: 'Courier New', Courier, monospace; }
.vi-tag::before {
	content: "<"; }
.vi-tag::after {
	content: ">"; }

.vi-category {
	font-size: 1.2rem;
	border-radius: var(--2);
	border: 1px solid var(--gray-dim);
	padding: 4px 6px 3px; }