@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

body,
button,
select,
input[type="text"] {
	font-family: "Noto Sans JP", sans-serif;
	color: #333333;
	font-variant-numeric: tabular-nums;
}

body,
button,
input[type="text"] {
	line-height: 1.2;
}

body {
	background: #FFFFFF;
	word-break: break-all;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

::-webkit-scrollbar {
	display: none;
}

header {
	min-width: 920px;
	min-height: 139px;
	padding-top: 32px;
}

aside {
	position: sticky;
	top: 0;
	min-width: 920px;
	padding-top: 16px;
	padding-bottom: 16px;
/*	border-bottom: 1px solid #DDDDDD;	*/
	background: #FFFFFFDD;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 1;
}

main {
	flex: 1;
	min-width: 920px;
	padding-top: 48px;
	padding-bottom: 24px;
}

footer {	
	position: sticky;
	bottom: 0;
	min-width: 920px;
	background: #FFFFFFDD;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 1;
	padding-top: 24px;
	padding-bottom: 24px;
}

button {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	background: #00000000;
	-webkit-tap-highlight-color: #00000000;
}

a {
	text-decoration: none;
	-webkit-tap-highlight-color: #00000000;
}

img {
	vertical-align: bottom;
	-webkit-user-drag: none;
	-moz-user-drag: none;
}

img[src="images/check_extra_large.svg"],
img[src="images/on_off_extra_large.svg"] {
	width: 96px;
	height: 96px;
}

img:not([src="images/check_extra_large.svg"], [src="images/on_off_extra_large.svg"]) {
	width: 48px;
	height: 48px;
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	font-size: 32px;
	font-weight: bold;
	background-image: url(../images/pulldown_large.svg);
	background-position: right 0px center;
	background-repeat: no-repeat;
	width: 80px;
}

select::-ms-expand {
	display: none;
}

select:focus {
	outline: none;
}

input[type="text"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	border-radius: 0;
	background: #00000000;
	width: 100%;
}

input[type="text"]:focus {
	outline: none;
}

hr {
	height: 1px;
	background: #999999;
	border: none;
}

.bold {
	font-weight: bold;
}

.extra-large {
	font-size: 64px;
}

.large {
	font-size: 32px;
}

.medium {
	font-size: 28px;
}

.small {
	font-size: 24px;
}

.extra-small {
	font-size: 16px;
}

.white {
	color: #FFFFFF;
}

.gray {
	color: #999999;
}

.blue {
	color: #3C96FF;
}

.green {
	color: #46C85A;
}

.yellow {
	color: #FFB450;
}

.red {
	color: #FF465A;
}

.crimson {
	color: #FF0000;
}

.svg-white {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(104deg) brightness(110%) contrast(100%);
}

.svg-gray {
	filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%) hue-rotate(320deg) brightness(93%) contrast(82%);
}

.svg-black {
	filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(647%) hue-rotate(180deg) brightness(105%) contrast(88%);
}

.svg-blue {
	filter: brightness(0) saturate(100%) invert(44%) sepia(97%) saturate(1291%) hue-rotate(194deg) brightness(102%) contrast(106%);
}

.svg-green {
	filter: brightness(0) saturate(100%) invert(71%) sepia(22%) saturate(1261%) hue-rotate(77deg) brightness(89%) contrast(87%);
}	

.svg-yellow {
	filter: brightness(0) saturate(100%) invert(77%) sepia(94%) saturate(1867%) hue-rotate(320deg) brightness(105%) contrast(106%);
}

.svg-red {
	filter: brightness(0) saturate(100%) invert(54%) sepia(49%) saturate(6803%) hue-rotate(327deg) brightness(99%) contrast(104%);
}

.container {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.main-padding-top-erase {
	padding-top: 0;
}

.main-padding-bottom-erase {
	padding-bottom: 0;
}

.wrapper {
	width: 920px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.padding-erase {
	padding-left: 0;
	padding-right: 0;
}

header .wrapper p:first-child {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

footer .wrapper {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	min-height: 48px;
	text-align: center;
}

footer p {
	max-width: 488px;
}

footer p:not(:first-child) {
	margin-top: 8px;
}

.text-box {
	position: relative;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 28px;
	padding-bottom: 4px;
	border-bottom: 1px solid #999999;
	transition: all 0.2s;
}

.box-focus {
	border-bottom: 1px solid #3C96FF;
}

.label {
	position: absolute;
	pointer-events: none;
	top:28px;
	left:24px;
	transition: all 0.2s;
}

.label-focus {
	translate: 0 -22px;
	font-size: 16px;
}

.password {
	-webkit-text-security: disc;
}

.extra-large-btn {
	margin-top: 48px;
}

.punch-change {
	margin-left: 48px;
	padding-right: 32px;
	text-align: start;
}

.punch-change p {
	position: relative;
}

.punch-change p::after {
	position: absolute;
	content: url(../images/next_large.svg);
	top: calc(50% - 8px);
	right: -32px;
}

.next-red p::after {
	filter: invert(54%) sepia(49%) saturate(6803%) hue-rotate(327deg) brightness(99%) contrast(104%);
}

.next-green p::after {
	filter: invert(71%) sepia(22%) saturate(1261%) hue-rotate(77deg) brightness(89%) contrast(87%);
}

.dedicated-tr-li {
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.dedicated-tr-li:has(.dedicated-tr-btn:hover) {
	background: #99999922;
	border-radius: 24px;
}

.dedicated-tr-li.selected {
	background: #99999944;
	border-radius: 24px;
}

.dedicated-tr-li.selected:has(.dedicated-tr-btn:hover) {
	background: #99999944;
	border-radius: 24px;
}

.dedicated-tr-btn {
	width: 100%;
	vertical-align: top;
	text-align: start;
}

.dedicated-tr-btn div {
	display: flex;
}

.dedicated-tr-img {
	margin-right: 48px;
}

.sentence-line-height {
	line-height: 1.5;
}

.punch-btn div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 412px;
	min-height: 152px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 32px;
	padding-right: 32px;
	border-radius: 32px;
}

.punch-in div {
	border: 2px solid #3C96FF;
}

.punch-in div.punched {
	background: #3C96FF22;
}

.break-start div {
	border: 2px solid #46C85A;
}

.break-start div.punched {
	background: #46C85A22;
}

.break-end div {
	border: 2px solid #FFB450;
}

.break-end div.punched {
	background: #FFB45022;
}

.punch-out div {
	border: 2px solid #FF465A;
}

.punch-out div.punched {
	background: #FF465A22;
}

.no-break div {
	position: relative;
	border: 2px solid #333333;
	padding-top: 0px;
	padding-bottom: 0px;
	line-height: 1.5;
}

.no-break div::after {
	position: absolute;
	content: url(../images/next_large.svg);
	top: calc(50% - 8px);
	right: 8px;
	filter: invert(15%) sepia(0%) saturate(647%) hue-rotate(180deg) brightness(105%) contrast(88%);
}

/*
.no-break:hover {
	background: #33333322;
}
*/

.fail div {
	position: relative;
	min-height: 64px;
	border: 2px solid #333333;
	background: #333333;
	padding-top: 0px;
	padding-bottom: 0px;
	line-height: 1.5;
}

.fail div::after {
	position: absolute;
	content: url(../images/next_large.svg);
	top: calc(50% - 8px);
	right: 8px;
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(104deg) brightness(110%) contrast(100%);
}

/*
.fail:hover {
	background: #000000;
}
*/

.fail-ex div {
	position: relative;
	border: 2px solid #333333;
	background: #333333;
	padding-top: 0px;
	padding-bottom: 0px;
	line-height: 1.5;
}

.fail-ex div::after {
	position: absolute;
	content: url(../images/next_large.svg);
	top: calc(50% - 8px);
	right: 8px;
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(104deg) brightness(110%) contrast(100%);
}

/*
.fail-ex:hover {
	background: #000000;
}
*/

.punch-margin {
	margin-top: 48px;
}

.footer-left-btn {
	position: absolute;
	top: calc(50% - 24px);
	left: calc(50% - 72px);
}

.footer-right-btn {
	position: absolute;
	top: calc(50% - 24px);
	right: calc(50% - 72px);
}

.scroll-btn {
	position: absolute;
	top: calc(50% - 24px);
	right: 24px;
}

.scroll-btn button {
	visibility: hidden;
}

.scroll-btn button:not(:first-child) {
	margin-left: 48px;
}

.history-li {
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.history-fix-btn {
	margin-left: 48px;
}

.fix-btn-none {
	padding-right: 120px;
}
/*
.punch-out-history {
	border-bottom: 1px solid #DDDDDD;
}
*/
/*
.history-form {
	margin-top: 4px;
}
*/

.status {
	margin-top: 12px;
}

.center {
	text-align: center;
}

.content-between {
	display: flex;
	justify-content: space-between;
}

.items-center {
	align-items: center;
}

.items-end {
	align-items: end;
}

.will-change-scale {
	will-change: scale;
}

.testclock {
	position: relative;
}

.testsec {
	position: absolute;
	bottom: 13px;
	right: -46px;
}

#flashing {
	opacity: 0;
}

#punch-message {
	opacity: 0;
}

#bottom-history-btn {
	visibility: hidden;
}

#bottom-cancel-btn {
	visibility: hidden;
}

.fade-in-anime {
	visibility: hidden;
	opacity: 0;
}

#navigation {
	display: none;
}

#irregular-navi {
	display: none;
}

#break-navi {
	display: none;
	margin-left: 48px;
	text-align: start;
}

#punch-menu {
	display: none;
}

.update-list {
	background: #99999922;
	border-radius: 24px;
}

#log-in img,
#flashing img,
.punch-btn div,
.punch-change p,
#check img,
.history-fix-btn img,
footer button img {
	transition: transform 0.1s ease;
}

#log-in:active img,
#flashing:active img,
#check:active img {
	transform: scale(0.9);
}

.history-fix-btn:active img,
footer button:active img {
	transform: scale(0.9);
}

.punch-btn:active div {
	transform: scale(0.96);
}

.punch-change:active p {
	transform: scale(0.94);
}

.disabled {
	pointer-events: none;
}

#loader {
	position: relative;
	top: 0px;
	left: calc(50% - 48px);
	width: 96px;
	height: 96px;
	padding: 3px;
}

#loader div {
	width: 100%;
	height: 100%;
	border: 12px solid #999999;
	border-radius: 50%;
	clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%);
	animation: loader_spin 1s linear infinite;
}

@keyframes loader_spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@media (width < 920px) {
	header,
	aside,
	main,
	footer {
		min-width: 100%;
	}

	.wrapper {
		width: 100%;
	}

	.responsive-punch {
		flex-direction: column;
		align-items: center;
	}

	.responsive-punch .punch-btn:not(:first-child) {
		margin-top: 48px;
	}

	.visible-scroll-btn {
		max-width: calc(100dvw - 432px);
	}
}

@media (width < 576px) {
	.scroll-btn {
		display: none;
	}

	.visible-scroll-btn {
		max-width: 488px;
	}
}

@media (width < 460px) {
	.punch-btn div {
		width: calc(100dvw - 48px);
	}
}