/*
 * デジタル庁デザインシステム(DADS) design-system-example-components-html を参考にした
 * 共通トークン・コンポーネントスタイル。
 * 参照元: https://github.com/digital-go-jp/design-system-example-components-html
 *
 * 上記リポジトリはMITライセンスで公開されている。以下はそのライセンス条文。
 *
 * MIT License
 *
 * Copyright (c) 2025 デジタル庁
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

:root {
  --color-key-50: #e8f1fe;
  --color-key-100: #d9e6ff;
  --color-key-200: #c5d7fb;
  --color-key-300: #9db7f9;
  --color-key-900: #0017c1;
  --color-key-1000: #00118f;
  --color-key-1200: #000060;

  --color-primitive-green-50: #e6f5ec;
  --color-primitive-green-900: #115a36;
  --color-primitive-red-50: #fdeeee;
  --color-primitive-red-900: #ce0000;
  --color-primitive-yellow-300: #ffd43d;

  --color-semantic-error-1: #ec0000;

  --color-neutral-white: #ffffff;
  --color-neutral-black: #000000;
  --color-neutral-solid-gray-50: #f2f2f2;
  --color-neutral-solid-gray-300: #b3b3b3;
  --color-neutral-solid-gray-420: #949494;
  --color-neutral-solid-gray-536: #767676;
  --color-neutral-solid-gray-600: #666666;
  --color-neutral-solid-gray-800: #333333;
  --color-neutral-solid-gray-900: #1a1a1a;

  --font-family-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: "Noto Sans Mono", monospace;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  font-family: var(--font-family-sans);
}

body {
  margin: 0;
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-800);
}

:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

:where(a):any-link {
  color: var(--color-key-900);
  text-decoration: underline;
  text-decoration-thickness: calc(1 / 16 * 1rem);
  text-underline-offset: calc(3 / 16 * 1rem);
}

@media (hover: hover) {
  :where(a):hover {
    color: var(--color-key-1000);
    text-decoration-thickness: calc(3 / 16 * 1rem);
  }
}

.page {
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(48 / 16 * 1rem) calc(24 / 16 * 1rem) calc(64 / 16 * 1rem);
}

.page--wide {
  max-width: 64rem;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(16 / 16 * 1rem);
  margin: calc(24 / 16 * 1rem) 0;
}

.tool-note {
  margin: 0 0 calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-536);
  font-size: calc(14 / 16 * 1rem);
}

.tool-note__cancel {
  margin-left: calc(8 / 16 * 1rem);
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-key-900);
  font: inherit;
  font-size: calc(14 / 16 * 1rem);
  text-decoration: underline;
  text-underline-offset: calc(3 / 16 * 1rem);
  cursor: pointer;
}

@media (hover: hover) {
  .tool-note__cancel:hover {
    color: var(--color-key-1000);
  }
}

.breadcrumb {
  margin: 0 0 calc(24 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-536);
  font-size: calc(14 / 16 * 1rem);
}

.page-header {
  display: flex;
  align-items: center;
  gap: calc(16 / 16 * 1rem);
  margin-bottom: calc(24 / 16 * 1rem);
}

.page-header img {
  width: calc(56 / 16 * 1rem);
  height: calc(56 / 16 * 1rem);
}

.lead-text {
  margin: 0 0 calc(24 / 16 * 1rem);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* heading component */
.dads-heading {
  margin: 0 0 calc(24 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-family: var(--font-family-sans);
  font-weight: bold;
  font-size: calc(28 / 16 * 1rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.dads-heading[data-rule] {
  border-bottom: solid var(--color-key-900);
}

.dads-heading[data-rule="4"] {
  border-bottom-width: calc(4 / 16 * 1rem);
  padding-bottom: calc(16 / 16 * 1rem);
}

/* notification-banner component (info-2) */
.dads-notification-banner {
  --_base-color: var(--color-neutral-solid-gray-536);
  display: grid;
  grid-template-columns: calc(24 / 16 * 1rem) 1fr;
  border: solid var(--_base-color);
  border-radius: calc(12 / 16 * 1rem);
  border-width: calc(3 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  padding: calc(16 / 16 * 1rem) calc(16 / 16 * 1rem) calc(20 / 16 * 1rem);
  gap: calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-bottom: calc(32 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .dads-notification-banner {
    grid-template-columns: calc(36 / 16 * 1rem) 1fr;
    padding: calc(24 / 16 * 1rem) calc(24 / 16 * 1rem) calc(28 / 16 * 1rem);
    column-gap: calc(24 / 16 * 1rem);
  }
}

.dads-notification-banner__icon {
  justify-self: center;
  width: calc(28 / 16 * 1rem);
  height: calc(28 / 16 * 1rem);
  padding-top: calc(3 / 16 * 1rem);
  color: var(--_base-color);
}

@media (min-width: 48rem) {
  .dads-notification-banner__icon {
    width: calc(44 / 16 * 1rem);
    height: calc(44 / 16 * 1rem);
    padding: 0;
  }
}

.dads-notification-banner__heading {
  margin: 0;
  grid-column: 2;
  color: var(--color-neutral-solid-gray-900);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

@media (min-width: 48rem) {
  .dads-notification-banner__heading {
    font-size: calc(20 / 16 * 1rem);
    line-height: 1.5;
  }
}

.dads-notification-banner__body {
  grid-column: 2;
  margin: 0;
  color: var(--color-neutral-solid-gray-800);
}

/* divider component */
.dads-divider {
  margin: 0 0 calc(32 / 16 * 1rem);
  border: 0;
  border-top: 1px solid var(--color-neutral-solid-gray-420);
}

/* blockquote component */
.dads-blockquote {
  margin: 0;
  border-left: calc(8 / 16 * 1rem) solid var(--color-neutral-solid-gray-536);
  padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem) calc(8 / 16 * 1rem) calc(24 / 16 * 1rem);
}

.dads-blockquote p {
  margin: 0;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.dads-blockquote footer {
  margin-top: 0.4em;
  color: var(--color-neutral-solid-gray-536);
  font-size: calc(14 / 16 * 1rem);
}

/* resource-list component (frame style) */
.dads-resource-list {
  display: flex;
  align-items: center;
  background: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-800);
  font-family: var(--font-family-sans);
  overflow-wrap: anywhere;
  --_border-color: var(--color-neutral-solid-gray-420);
}

.dads-resource-list[data-style="frame"] {
  border-radius: calc(16 / 16 * 1rem);
  border: 1px solid var(--_border-color);
}

.dads-resource-list__body {
  position: relative;
  z-index: 0;
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: calc(16 / 16 * 1rem);
  border-radius: inherit;
  padding: calc(16 / 16 * 1rem);
}

.dads-resource-list__contents {
  width: 0;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: calc(4 / 16 * 1rem);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.3;
}

.dads-resource-list__title {
  margin: 0;
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
  line-height: 1.7;
}

.dads-resource-list__title a {
  color: var(--color-key-900);
  text-decoration: underline;
  text-decoration-thickness: calc(1 / 16 * 1rem);
  text-underline-offset: calc(3 / 16 * 1rem);
}

@media (hover: hover) {
  .dads-resource-list__title a:hover {
    color: var(--color-key-1000);
    text-decoration-thickness: calc(3 / 16 * 1rem);
  }
}

.dads-resource-list__support {
  font-size: calc(14 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-600);
}

.dads-resource-list__support > * {
  margin: 0;
}

/* form-control-label component */
.dads-form-control-label {
  margin: 0 0 calc(24 / 16 * 1rem);
  display: flex;
  flex-direction: column;
  gap: calc(8 / 16 * 1rem);
  border: 0;
  padding: 0;
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.dads-form-control-label__label {
  align-self: start;
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
}

.dads-form-control-label__support-text {
  margin: 0;
  color: var(--color-neutral-solid-gray-600);
}

/* textarea component */
.dads-textarea {
  display: block;
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
}

.dads-textarea__textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--color-neutral-solid-gray-600);
  background-color: var(--color-neutral-white);
  padding: calc(16 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  resize: vertical;
}

.dads-textarea__textarea:read-only {
  border-style: dashed;
  background-color: var(--color-neutral-solid-gray-50);
}

@media (hover: hover) {
  .dads-textarea__textarea:not(:read-only):hover {
    border-color: var(--color-neutral-black);
  }
}

.dads-textarea__textarea:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-textarea__counter {
  display: block;
  margin-top: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-600);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* input-text component */
.dads-input-text {
  display: block;
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
}

.dads-input-text__input {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--color-neutral-solid-gray-600);
  background-color: var(--color-neutral-white);
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  line-height: 1;
}

.dads-input-text__input[data-size="md"] {
  height: 3rem;
}

@media (hover: hover) {
  .dads-input-text__input:hover {
    border-color: var(--color-neutral-black);
  }
}

.dads-input-text__input:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

/* description-list component */
.dads-description-list {
  margin: calc(16 / 16 * 1rem) 0;
  display: grid;
  gap: calc(8 / 16 * 1rem) 0;
  overflow-wrap: anywhere;
}

.dads-description-list dt {
  font-weight: bold;
}

.dads-description-list dd {
  margin-left: calc(32 / 16 * 1rem);
}

/* button component */
.dads-button {
  --button-color: var(--color-key-900);
  --button-hover-color: var(--color-key-1000);
  --button-active-color: var(--color-key-1200);
  --button-outline-hover-bg-color: var(--color-key-200);
  --button-outline-active-bg-color: var(--color-key-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(4 / 16 * 1rem);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  font-weight: bold;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

.dads-button[data-type="solid-fill"] {
  border: 4px double transparent;
  background-color: var(--button-color);
  color: var(--color-neutral-white);
}

@media (hover: hover) {
  .dads-button[data-type="solid-fill"]:hover {
    background-color: var(--button-hover-color);
  }
}

.dads-button[data-type="solid-fill"]:active {
  background-color: var(--button-active-color);
}

.dads-button[data-type="solid-fill"]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-button[data-type="outline"] {
  border: 1px solid currentcolor;
  background-color: var(--color-neutral-white);
  color: var(--button-color);
}

@media (hover: hover) {
  .dads-button[data-type="outline"]:hover {
    background-color: var(--button-outline-hover-bg-color);
    color: var(--button-hover-color);
  }
}

.dads-button[data-type="outline"]:active {
  background-color: var(--button-outline-active-bg-color);
  color: var(--button-active-color);
}

.dads-button[data-type="outline"]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-button[data-size="md"] {
  min-width: calc(96 / 16 * 1rem);
  min-height: calc(48 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
}

.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24 / 16 * 1rem);
  background-color: var(--color-neutral-black);
  padding: calc(24 / 16 * 1rem);
}

.boot-overlay__log {
  margin: 0 auto;
  width: 100%;
  max-width: 40rem;
  color: var(--color-neutral-white);
  font-family: var(--font-family-mono);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.7;
}

.boot-line--warn {
  color: var(--color-primitive-yellow-300);
}

#boot-enter {
  --button-color: var(--color-neutral-white);
  --button-hover-color: var(--color-neutral-solid-gray-300);
  --button-active-color: var(--color-neutral-solid-gray-420);
  color: var(--color-neutral-black);
}

.site-footer {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 calc(24 / 16 * 1rem) calc(48 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-536);
  font-size: calc(12 / 16 * 1rem);
  line-height: 1.7;
}

.site-footer p {
  margin: 0 0 calc(4 / 16 * 1rem);
}

.site-footer p:last-child {
  margin-top: calc(12 / 16 * 1rem);
  margin-bottom: 0;
}