@charset "utf-8";

/* ---------- base styles ---------- */
:root {
    --main-color: rgba(133 203 197 / 100%);
    --main-color-light: rgba(133 203 197 / 23%);
    --main-color-light2: rgba(133 203 156 / 100%);
    --main-color-light3: rgba(133 203 156 / 23%);
    --main-color-light4: rgba(227 243 242 / 100%);
    --sub-color: rgba(70 164 156 / 100%);
    --sub-color-light: rgba(205 234 231 / 100%);
    --sub-color-dark: rgba(60 154 146 / 100%);
    --secondary-color: rgba(255 255 255 / 100%);
    --secondary-color-pink: rgba(226 187 190 / 100%);
    --secondary-color-ash: rgba(242 236 236 / 100%);
    --secondary-color-gray: rgba(221 221 221 / 100%);
    --card-blue: rgba(218 239 238 / 100%);
    --card-green: rgba(224 241 227 / 100%);
    --card-pink: rgba(242 236 236 / 100%);
    --circle-green: rgba(133 203 156 / 100%);
    --circle-pink: rgba(241 133 148 / 100%);
    --background: rgba(241 249 248 / 100%);
    --border-color: rgba(221 221 221 / 100%);
    --menu-background: rgba(228 245 244 / 100%);
    --menu-border: rgba(208 232 229 / 100%);
    --body-text: rgba(51 51 51 / 100%);
    --body-text-light: rgba(112 112 112 / 100%);
    --text-small: rgba(141 141 141 / 100%);
    --text-card: rgba(103 103 103 / 100%);
    --table-line: rgba(229 229 229 / 100%);
    --orange: rgba(239 183 93 / 100%);
    --orange-light: rgba(255 249 218 / 100%);
    --red: rgba(235 135 135 / 100%);
    --red-light: rgba(255 227 230 / 100%);
    --blue: rgba(119 196 234 / 100%);
    --blue-light: rgba(226 241 255 / 100%);
    --border-green: rgba(208 232 229 / 100%);

    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
}
html {
    font-size: 16px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: var(--font-regular);
    margin: 0 !important;
}
body {
    background-color: var(--background);
    color: var(--body-text);
}
ul, ol {
    margin: 0;
    padding: 0;
}
hr {
    border: none;
    background-color: var(--sub-color);
    height: 1px;
}
a {
    color: var(--main-color);
    text-decoration: underline;
}
table {
    border-collapse: collapse;
}
thead {
    border: none !important;
}
th, td {
    border: 1px solid var(--table-line);
}
img {
    height: auto;
}

/* ---------- アコーディオンの三角形 ---------- */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--sub-color-dark);
  border-bottom: 2px solid var(--sub-color-dark);
  transform: rotate(-45deg);
  margin-right: 0.75rem;
  translate: 0 -2px;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  transform: rotate(45deg);
}