/* common.css */
:root {
  /* ============ Theme Typography ============ */

  /* ----- size */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  /* ----- weight */
  --normal: 400;
  --bold: 700;
  --medium: 500;

  /* -----（仮） */
  --base-font-family-base: dnp-shuei-mgothic-std, sans-serif;
  --base-font-size-lg: 18px;
  --base-font-size-md: 16px;
  --base-font-size-sm: 14px;
  --base-font-size-base: 16px;
  --base-line-height-base: 1.7;
  --base-font-weight-base: var(--normal);
  --base-font-weight-bold: var(--bold);
  --base-font-weight-md: var(--medium);
  --base-letter-spacing-base: 0.08em;

  /* -----（仮） */
  --heading-font-weight-base: var(--bold);
  --heading-font-style: normal;
  --heading-letter-spacing: 0.08em;
  --heading-line-height-base: 1.6;
  --heading-font-size-h1: 48px;
  --heading-font-size-h2: 32px;
  --heading-font-size-h3: 24px;
  --heading-font-size-h4: 20px;
  --heading-font-size-h5: 18px;
  --heading-font-size-h6: 16px;

  /* ============ Theme Colors ============ */

  /* ----- 基本色（仮） */
  --color-white: #fff;
  --color-black: #000;

  /* ----- 背景やUI要素（仮） */
  --color-surface-0: #fff;
  --color-surface-900: #000;
  --bg-modal: rgb(0 0 0 / 40%);

  /* ----- */
  --color-primary-100: #eafffd;
  --color-primary-500: #c2f8fd;
  --color-primary-900: #2d8cb1;

  /* ----- */
  --color-secondary-100: #fef9f0;
  --color-secondary-200: #fff5e2;
  --color-secondary-300: #ffefd1;
  --color-secondary-400: #feaa23;
  --color-secondary-500: #fec66b;
  --color-secondary-700: #feaa23;

  /* ----- */
  --gradation-primary-900: linear-gradient(90deg, #2d8cb1 0%, #2db197 100%);
  --gradation-secondary-900: linear-gradient(90deg, #fe9b23 0%, #ffb640 100%);

  /* ----- */
  --color-text-base: #333;
  --color-text-title: #555;

  /* ----- */
  --color-blue-100: #eafffd;
  --color-blue-900: #1690ed;

  /* ----- */
  --color-red-100: #fff6f8; /* NOTE: variant tabelとは違う値 */
  --color-red-200: #ffedf0; /* NOTE: variant tabe　100の値 */
  --color-red-900: #ff3968;

  /* ----- */
  --color-orange-100: #fffbf4;
  --color-orange-200: #fff5e2;
  --color-orange-300: #ffefd1;
  --color-orange-400: #ffe7b9;

  /* ----- */
  --color-gray-100: #f7f7f7;
  --color-gray-300: #efefef;
  --color-gray-400: #e1e1e1;
  --color-gray-500: #cfcfcf;
  --color-gray-600: #acacac;
  --color-gray-700: #555;
  --color-gray-800: #444;
  --color-gray-900: #333;

  /* ----- アクセントカラー TODO: アクセントカラー定義  */
  --color-accent-base: var(--color-black);
  --color-accent-link-base: var(--color-black);
  --color-accent-focus: var(--color-black);
  --accent-error: #d52240;
  --accent-strong: #dc5100; /* ?Warningではない？ */

  /* ============ Theme Space ============ */

  /* ----- TODO: Space定義の整理 */
  --spacing-base: 4px;
  --spacing-x1: calc(var(--spacing-base) * 1);
  --spacing-x2: calc(var(--spacing-base) * 2);
  --spacing-x3: calc(var(--spacing-base) * 3);
  --spacing-x4: calc(var(--spacing-base) * 4);
  --spacing-x5: calc(var(--spacing-base) * 5);
  --spacing-x6: calc(var(--spacing-base) * 6);
  --spacing-x7: calc(var(--spacing-base) * 7);
  --spacing-x8: calc(var(--spacing-base) * 8);
  --spacing-x9: calc(var(--spacing-base) * 9);
  --spacing-x10: calc(var(--spacing-base) * 10);
  --spacing-x14: calc(var(--spacing-base) * 14);
  --spacing-x18: calc(var(--spacing-base) * 18);
  --spacing-x20: calc(var(--spacing-base) * 20);
  --spacing-x24: calc(var(--spacing-base) * 24);
  --spacing-x28: calc(var(--spacing-base) * 28);

  /* ----- TODO: Space定義の整理 */
  --spacing-0: 0;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* ----- TODO: space定義の整理 */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 80px;

  /* ============ Theme Gap Space ============ */

  /* ----- TODO: gap定義の整理 */
  --gap-16: 16px;
  --gap-24: 24px;
  --gap-40: 40px;
  --gap-80: 80px;

  /* ----- TODO: gap定義の整理 */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 80px;

  /* ============ Theme Radius ============ */

  /* ----- TODO: Radius定義の整理 */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-40: 40px;
  --radius-56: 56px;
  --radius-80: 80px;
  --radius-full: 9999px;

  /* ============ Theme shadow ============ */

  /* ----- Undefined style */

  /* ============ Theme Easing ============ */

  /* Sine（もっとも弱い） */
  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-sine-inout: cubic-bezier(0.445, 0.05, 0.55, 0.95);

  /* Quad（弱め。Sineより強く、Cubicより弱い） */
  --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-quad-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /* Cubic（Quadより強く、Quartより弱い） */
  --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-cubic-inout: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Quart（Cubicより強く、Quintより弱い） */
  --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-quart-inout: cubic-bezier(0.77, 0, 0.175, 1);

  /* Quint（Quartより強く、Expoより弱い） */
  --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-quint-inout: cubic-bezier(0.86, 0, 0.07, 1);

  /* Expo（もっとも強い） */
  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-expo-inout: cubic-bezier(1, 0, 0, 1);

  /* Circ（Expoのような強さを持つが、加速や減速の時間がよりゆるやか。） */
  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-circ-inout: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  /* Back（少し行き過ぎてから戻ってくるような動き） */
  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-back-inout: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media all and (max-width: 1087.98px) {
:root {
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-2xl: 20px;
}
  }
@media all and (max-width: 1087.98px) {
:root {
    /* -----（仮） */
    --base-font-size-lg: 16px;
    --base-font-size-md: 14px;
    --base-font-size-sm: 12px;
    --base-letter-spacing-base: 0.08em;
    --base-font-size-base: 14px;

    /* -----（仮） */
    --heading-font-size-h1: 48px;
    --heading-font-size-h2: 28px;
    --heading-font-size-h3: 24px;
    --heading-font-size-h4: 20px;
    --heading-font-size-h5: 18px;
    --heading-font-size-h6: 16px;
}
  }
@media all and (max-width: 1087.98px) {
:root {
    /* ----- TODO: space定義の整理 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
}
  }
@media all and (max-width: 1087.98px) {
:root {
    /* ----- TODO: gap定義の整理 */
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;
    --gap-xl: 40px;
}
  }
/* ============ reset styles ============  */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-align: left;
}
i {
  font-style: normal;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 1em;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: inherit;
  text-decoration: none;
}
address {
  font-style: normal;
}
ul,
ol {
  list-style: none;
}
img,
picture,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
fieldset {
  border: 0;
}
button,
select {
  appearance: none;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  border: none;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button,
label,
select,
summary,
[role='button'],
[role='option'] {
  letter-spacing: inherit;
  cursor: pointer;
}
textarea {
  resize: vertical;
}
[type='search'] {
  appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  appearance: none;
}
::-webkit-file-upload-button {
  font: inherit;
  appearance: auto;
}
details > summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
label:has(> input:disabled),
label:has(+ input:disabled) {
  cursor: not-allowed;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
  border: none;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  width: 100%;
  font-family: var(--base-font-family-base);
  font-size: var(--base-font-size-base);
  font-style: normal;
  font-weight: var(--base-font-weight-base);
  line-height: var(--base-line-height-base);
  color: var(--color-text-base);
  letter-spacing: var(--base-letter-spacing-base);
  background: #fff;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:disabled {
  cursor: not-allowed;
}
::placeholder {
  color: #717171; /* TODO: placeholderカラーのcss管理見直し */
}
input,
textarea,
select,
button {
  letter-spacing: var(--base-letter-spacing-base);
}
input:focus-visible {
  outline: 2px solid var(--color-primary-900); /* TODO: 差し替え＆変数定義 --color-accent */
}
textarea:focus-visible {
  outline: 2px solid var(--color-primary-900); /* TODO: 差し替え＆変数定義 --color-accent */
}
select:focus-visible {
  outline: none;
  border: 2px solid var(--color-primary-900); /* TODO: 差し替え＆変数定義 --color-accent */
}
hr {
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-gray-300); /* TODO: 線の色変数定義見直し（--border-color-primaryとして定義するべきかどうか） */
}
hr.base-separator-line-horizontal {
  width: 100%;
}
hr.base-separator-line-vertical {
  width: 1px;
  height: 100%;
  background-color: var(--color-gray-300);
  border: 0;
}
/* ----- */
.base-item-stack-center {
  display: flex;
  justify-content: center;
}
/* ----- DeviceSpecific visibility */
@media all and (min-width: 1088px) {
  .show-mobile-only {
    display: none !important;
  }
}
@media all and (max-width: 1087.98px) {
  .show-desktop-only {
    display: none !important;
  }
}
/* ----- */
.base-text-caption,
.base-text-note {
  font-size: var(--base-font-size-sm);
  color: var(--color-text-base); /* TODO: 差し替え＆変数定義 */
}
/* Screen Reader Only */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}
/* ----- */
@keyframes css-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.css-animation-fade-in {
  opacity: 0;
  animation-name: css-fade-in;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* easeInOutQuad */
  animation-fill-mode: both;
}
/* ----- link text styles */
.base-link-text {
  display: inline;
  align-items: center;
  font-weight: var(--bold);
  color: var(--color-primary-900);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.base-link-text[target='_blank']::after {
    display: inline-block;
    width: 1em;
    height: 1em;
    content: '';
    background-image: url('/images/icons/icon-external-link.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0.1em);
  }
/* hover */
@media (any-hover: hover) {
  .base-link-text:hover {
    text-decoration: none;
  }
}
/* ----- list styles */
/* 番号付きリスト */
.base-ordered-list {
  padding-left: 1.5em;
  list-style-type: decimal;
}
/* 順序なしリスト */
.base-unordered-list {
  padding-left: 1.5em;
  list-style-type: disc;
}
/* マーク付きテキスト */
.base-marked-text-list > li {
    display: flex;
    gap: var(--spacing-8);
  }
.base-marked-text-list > li::before {
    display: flex;
    flex-shrink: 0;
    color: var(--color-primary-900);
    content: attr(data-content) '';
  }
/* 注釈リスト */
.base-caution-list {
  display: flex;
  flex-flow: column wrap;
  gap: 4px 16px;
  font-size: var(--text-sm);
}
.base-caution-list[data-item-stack='row'] {
    flex-direction: row;
  }
@media all and (max-width: 1087.98px) {
.base-caution-list {
    font-size: var(--text-xs);
}
  }
.base-caution-list .list-item {
    position: relative;
    padding-left: 1.5em;
  }
.base-caution-list .list-item::before {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-content) '';
  }
.base-caution-list[data-indent-size='2em'] .list-item {
    padding-left: 2em;
  }
.base-caution-list[data-indent-size='2.5em'] .list-item {
    padding-left: 2.5em;
  }