* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  min-height: 100vh;
  background-color: #e4ddc8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

a {
  color: #0073aa;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

@keyframes hero-gradient-animation {
  0% {
    --x-0: 93%;
    --s-start-0: 8.392121895570533%;
    --s-end-0: 38.584065253664996%;
    --c-0: hsla(217.59493670886076, 100%, 30%, 1);
    --y-0: 63%;
    --y-1: -7%;
    --c-1: hsla(0, 0%, 0%, 1);
    --x-1: 33%;
    --s-start-1: 8.392121895570533%;
    --s-end-1: 22.10878124098502%;
    --y-2: 7%;
    --c-2: hsla(0, 0%, 0%, 1);
    --s-start-2: 8.392121895570533%;
    --s-end-2: 22.558651527792346%;
    --x-2: 84%;
    --y-3: 5%;
    --c-3: hsla(0, 0%, 0%, 1);
    --x-3: 14%;
    --s-start-3: 8.392121895570533%;
    --s-end-3: 22.558651527792346%;
    --s-start-4: 8.392121895570533%;
    --s-end-4: 22.558651527792346%;
    --x-4: 7%;
    --y-4: 96%;
    --c-4: hsla(0, 0%, 0%, 1);
    --s-start-5: 8.392121895570533%;
    --s-end-5: 22.558651527792346%;
    --c-5: hsla(0, 0%, 0%, 1);
    --y-5: 90%;
    --x-5: 93%;
    --s-start-6: 8.392121895570533%;
    --s-end-6: 39.67138181429644%;
    --x-6: 3%;
    --y-6: 61%;
    --c-6: hsla(279.7894736842105, 67%, 27%, 1);
    --c-7: hsla(279.7894736842105, 67%, 27%, 1);
    --x-7: 94%;
    --y-7: 59%;
    --s-start-7: 8.392121895570533%;
    --s-end-7: 49.58090142552271%;
    --y-8: 63%;
    --c-8: hsla(217.68844221105527, 100%, 39%, 1);
    --x-8: 48%;
    --s-start-8: 8.392121895570533%;
    --s-end-8: 34.815367581495366%;
    --c-9: hsla(217.59493670886076, 100%, 30%, 1);
    --y-9: 78%;
    --s-start-9: 8.392121895570533%;
    --s-end-9: 31.77166380372925%;
    --x-9: 96%;
  }
  50% {
    --x-0: 2%;
    --s-start-0: 12.892043731642234%;
    --s-end-0: 42.94837818044209%;
    --c-0: hsla(217.59493670886076, 100%, 30%, 1);
    --y-0: 59%;
    --y-1: 10%;
    --c-1: hsla(0, 0%, 0%, 1);
    --x-1: 42%;
    --s-start-1: 8.392121895570533%;
    --s-end-1: 41.69445156991687%;
    --y-2: 29%;
    --c-2: hsla(0, 0%, 0%, 1);
    --s-start-2: 8.392121895570533%;
    --s-end-2: 20.488815899465003%;
    --x-2: 75%;
    --y-3: 16%;
    --c-3: hsla(0, 0%, 0%, 1);
    --x-3: 5%;
    --s-start-3: 8.392121895570533%;
    --s-end-3: 30.099844327777923%;
    --s-start-4: 8.392121895570533%;
    --s-end-4: 24.59566937006635%;
    --x-4: 36%;
    --y-4: 91%;
    --c-4: hsla(0, 0%, 0%, 1);
    --s-start-5: 8.392121895570533%;
    --s-end-5: 24.59566937006635%;
    --c-5: hsla(0, 0%, 0%, 1);
    --y-5: 91%;
    --x-5: 70%;
    --s-start-6: 9%;
    --s-end-6: 26.825849058644888%;
    --x-6: 54%;
    --y-6: 73%;
    --c-6: hsla(279.7894736842105, 67%, 27%, 1);
    --c-7: hsla(279.7894736842105, 67%, 27%, 1);
    --x-7: 57%;
    --y-7: 76%;
    --s-start-7: 9%;
    --s-end-7: 49.05074977970796%;
    --y-8: 53%;
    --c-8: hsla(217.68844221105527, 100%, 39%, 1);
    --x-8: 11%;
    --s-start-8: 9;
    --s-end-8: 26.166345747226664%;
    --c-9: hsla(217.59493670886076, 100%, 30%, 1);
    --y-9: 70%;
    --s-start-9: 9;
    --s-end-9: 22.152460022684956%;
    --x-9: 70%;
  }
  100% {
    --y-1: -3%;
    --c-1: hsla(0, 0%, 0%, 1);
    --x-1: 76%;
    --s-start-1: 8.392121895570533%;
    --s-end-1: 59.32232816638693%;
    --y-2: 18%;
    --c-2: hsla(0, 0%, 0%, 1);
    --s-start-2: 8.392121895570533%;
    --s-end-2: 28.52989037790774%;
    --x-2: 97%;
    --y-3: 18%;
    --c-3: hsla(0, 0%, 0%, 1);
    --x-3: 42%;
    --s-start-3: 8.392121895570533%;
    --s-end-3: 28.52989037790774%;
    --s-start-4: 8.392121895570533%;
    --s-end-4: 28.52989037790774%;
    --x-4: 66%;
    --y-4: 95%;
    --c-4: hsla(0, 0%, 0%, 1);
    --s-start-5: 8.392121895570533%;
    --s-end-5: 28.52989037790774%;
    --c-5: hsla(0, 0%, 0%, 1);
    --y-5: 92%;
    --x-5: 46%;
    --s-start-6: 24.72064437400016%;
    --s-end-6: 47.490620328604024%;
    --x-6: 102%;
    --y-6: 16%;
    --c-6: hsla(279.7894736842105, 67%, 27%, 1);
    --c-7: hsla(279.7894736842105, 67%, 27%, 1);
    --x-7: 22%;
    --y-7: 52%;
    --s-start-7: 10.200720718860145%;
    --s-end-7: 50.46456494288142%;
    --c-9: hsla(217.5, 100%, 31%, 1);
    --y-9: 51%;
    --s-start-9: 6.294132688184733%;
    --s-end-9: 20.79106730744014%;
    --x-9: 97%;
  }
}
@property --x-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 93%;
}
@property --s-start-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 38.5840652537%;
}
@property --c-0 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(217.5949367089, 100%, 30%);
}
@property --y-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 63%;
}
@property --y-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -7%;
}
@property --c-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(0, 0%, 0%);
}
@property --x-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 33%;
}
@property --s-start-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22.108781241%;
}
@property --y-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 7%;
}
@property --c-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(0, 0%, 0%);
}
@property --s-start-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22.5586515278%;
}
@property --x-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 84%;
}
@property --y-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}
@property --c-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(0, 0%, 0%);
}
@property --x-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 14%;
}
@property --s-start-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22.5586515278%;
}
@property --s-start-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22.5586515278%;
}
@property --x-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 7%;
}
@property --y-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 96%;
}
@property --c-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(0, 0%, 0%);
}
@property --s-start-5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22.5586515278%;
}
@property --c-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(0, 0%, 0%);
}
@property --y-5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 90%;
}
@property --x-5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 93%;
}
@property --s-start-6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 39.6713818143%;
}
@property --x-6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 3%;
}
@property --y-6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 61%;
}
@property --c-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(279.7894736842, 67%, 27%);
}
@property --c-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(279.7894736842, 67%, 27%);
}
@property --x-7 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 94%;
}
@property --y-7 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 59%;
}
@property --s-start-7 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-7 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 49.5809014255%;
}
@property --y-8 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 63%;
}
@property --c-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(217.6884422111, 100%, 39%);
}
@property --x-8 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 48%;
}
@property --s-start-8 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-8 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 34.8153675815%;
}
@property --c-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(217.5949367089, 100%, 30%);
}
@property --y-9 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 78%;
}
@property --s-start-9 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.3921218956%;
}
@property --s-end-9 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 31.7716638037%;
}
@property --x-9 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 96%;
}
.l-header {
  padding: 20px;
}
.l-header__logo {
  margin: 0 auto;
  max-width: 120px;
}
.l-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.l-header__logo a {
  color: inherit;
  text-decoration: none;
}

.l-footer {
  padding: 20px;
  color: #fff;
  text-align: center;
}

.l-main {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.c-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0073aa;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  min-width: 200px;
}
.c-button:hover {
  background-color: rgb(0, 80.5, 119);
  text-decoration: none;
}

.p-article {
  margin-bottom: 40px;
}
.p-article__title {
  font-size: 24px;
  margin-bottom: 10px;
}
.p-article__content {
  margin-top: 20px;
}

.p-attendance {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(245, 218, 169, 0.5);
  padding: 2rem 1rem;
  margin-bottom: 40px;
  border: 1px solid #f5daa9;
  margin: 0 1rem;
  width: min(100% - 2rem, 1200px);
}
.p-attendance__title {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 30px;
  text-align: center;
  color: #222;
  letter-spacing: 0.05em;
}
.p-attendance__status {
  max-width: 400px;
  margin: 0 auto;
}
.p-attendance__status--working .p-attendance__timer {
  font-size: 1.5rem;
  font-weight: 700;
  color: #7C69B3;
  margin: 20px 0;
}
.p-attendance__history {
  margin-top: 60px;
}
.p-attendance__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f0f0;
  margin: 0 auto;
  display: block;
  background-color: #fafafa;
  cursor: pointer;
  transition: opacity 0.3s;
}
.p-attendance__avatar:hover {
  opacity: 0.8;
  border-color: #ddd;
}

.p-form-group {
  margin-bottom: 20px;
}
.p-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #555;
}

.c-select,
.c-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.c-select:focus,
.c-input:focus {
  border-color: #7C69B3;
  outline: none;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  font-size: clamp(13px, 0.34vi + 11.64px, 16px);
}
.c-table th,
.c-table td {
  padding: 15px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.c-table th {
  background: #f6f4ec;
  font-weight: 600;
  color: #333;
}

.c-button {
  cursor: pointer;
  border: none;
  font-size: 1rem;
  padding: 12px 30px;
}
.c-button--primary {
  background-color: #ebaa49;
}
.c-button--primary:hover {
  background-color: rgba(235, 170, 73, 0.75);
}
.c-button--danger {
  background-color: #7C69B3;
}
.c-button--danger:hover {
  background-color: rgba(124, 105, 179, 0.75);
}
.c-button--default {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}
.c-button--default:hover {
  background-color: #eee;
}
.c-button--sm {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.u-text-center {
  text-align: center;
}

.u-mb-20 {
  margin-bottom: 20px;
}

/*# sourceMappingURL=style.css.map */