@charset "UTF-8";
:root {
  /* 基本色 */
  --color-black: #333333;
  --color-white: #ffffff;
  --color-gray: #D9D9D9;
  --color-green: #009143;
  --color-bule: #00728D;
  --color-orange: #FD981C;
  --color-red: #FF0000;
  --color-primary-100: #00735C;
  --color-primary-200: #008C6D;
  --color-primary-300: #298F68;
  --color-primary-400: #49B572;
  --color-gray-100: #DDDDDD;
  --color-gray-200: #E6E6E6;
  --color-gray-300: #ECECEC;
  --color-gray-400: #EFEFEF;
  --color-gray-500: #F1F1F1;
  --color-gray-600: #F7F7F7;
  /* テキスト色 */
  --text-color: #333333;
  --text-hover-color: #5E5E5E;
  --link-color: #333333;
  --link-hover-color: #00735C;
  --button-color: #008C6D;
  --button-hover-color: #00735C;
  /* 影色 */
  --box-shadow-color: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  --box-shadow-hover-color: 10px 10px 15px 0 rgba(0, 0, 0, 0.1);
  /* 境界線色 */
  --border-color: #D9D9D9;
}

/*
 * 目次
 *
 * button-primary
 * button-outline
 * list-unordered
 * list-ordered
 */
/*--------------------------------------------------------------
>>> button-primary
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> button-outline
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> list
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> パーツ出力
--------------------------------------------------------------*/
.button-primary-large {
  display: block;
  width: fit-content;
  border-radius: 32px;
  background-color: var(--button-color);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.button-primary-large:hover, .button-primary-large:active, .button-primary-large:focus-visible, .button-primary-large[aria-current=page], .button-primary-large[aria-selected=true] {
  background-color: var(--button-hover-color);
  color: var(--color-white);
  outline-offset: 4px;
}
.button-primary-large {
  padding: 8px 40px;
  font-size: var(--font-size-large);
}
@media screen and (width >= 1024px) {
  .button-primary-large {
    padding: 12px 80px;
  }
}

.button-primary-small {
  display: block;
  width: fit-content;
  border-radius: 32px;
  background-color: var(--button-color);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.button-primary-small:hover, .button-primary-small:active, .button-primary-small:focus-visible, .button-primary-small[aria-current=page], .button-primary-small[aria-selected=true] {
  background-color: var(--button-hover-color);
  color: var(--color-white);
  outline-offset: 4px;
}
.button-primary-small {
  padding: 8px 24px;
  font-size: var(--font-size-small);
}
@media screen and (width >= 1024px) {
  .button-primary-small {
    padding: 8px 40px;
  }
}

.button-primary-x-small {
  display: block;
  width: fit-content;
  border-radius: 32px;
  background-color: var(--button-color);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.button-primary-x-small:hover, .button-primary-x-small:active, .button-primary-x-small:focus-visible, .button-primary-x-small[aria-current=page], .button-primary-x-small[aria-selected=true] {
  background-color: var(--button-hover-color);
  color: var(--color-white);
  outline-offset: 4px;
}
.button-primary-x-small {
  padding: 8px 24px;
  font-size: var(--font-size-x-small);
}

.button-outline-large {
  display: block;
  width: fit-content;
  border: 1px solid var(--button-color);
  border-radius: 32px;
  background-color: var(--color-white);
  font-weight: var(--font-weight-bold);
  color: var(--button-color);
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.button-outline-large:hover, .button-outline-large:active, .button-outline-large:focus-visible, .button-outline-large[aria-current=page], .button-outline-large[aria-selected=true] {
  border-color: var(--button-hover-color);
  background-color: var(--button-hover-color);
  color: var(--color-white);
  outline-offset: 4px;
}
.button-outline-large {
  padding: 6px 39px;
  font-size: var(--font-size-large);
}
@media screen and (width >= 1024px) {
  .button-outline-large {
    padding: 11px 79px;
  }
}

.button-outline-small {
  display: block;
  width: fit-content;
  border: 1px solid var(--button-color);
  border-radius: 32px;
  background-color: var(--color-white);
  font-weight: var(--font-weight-bold);
  color: var(--button-color);
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.button-outline-small:hover, .button-outline-small:active, .button-outline-small:focus-visible, .button-outline-small[aria-current=page], .button-outline-small[aria-selected=true] {
  border-color: var(--button-hover-color);
  background-color: var(--button-hover-color);
  color: var(--color-white);
  outline-offset: 4px;
}
.button-outline-small {
  padding: 6px 22px;
  font-size: var(--font-size-small);
}
@media screen and (width >= 1024px) {
  .button-outline-small {
    padding: 6px 39px;
  }
}

.button-outline-x-small {
  display: block;
  width: fit-content;
  border: 1px solid var(--button-color);
  border-radius: 32px;
  background-color: var(--color-white);
  font-weight: var(--font-weight-bold);
  color: var(--button-color);
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.button-outline-x-small:hover, .button-outline-x-small:active, .button-outline-x-small:focus-visible, .button-outline-x-small[aria-current=page], .button-outline-x-small[aria-selected=true] {
  border-color: var(--button-hover-color);
  background-color: var(--button-hover-color);
  color: var(--color-white);
  outline-offset: 4px;
}
.button-outline-x-small {
  padding: 6px 22px;
  font-size: var(--font-size-x-small);
}

:root {
  --font-size-h1: 1.75rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.375rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-large: 1rem;
  --font-size-base: 0.875rem;
  --font-size-small: 0.75rem;
  --font-size-x-small: 0.625rem;
}
@media screen and (width >= 1024px) {
  :root {
    --font-size-h1: 2.375rem;
    --font-size-h2: 1.875rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.375rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.125rem;
    --font-size-large: 1.125rem;
    --font-size-base: 1rem;
    --font-size-small: 0.875rem;
    --font-size-x-small: 0.75rem;
  }
}

:root {
  --font-family: "Montserrat", "Noto Sans JP", sans-serif;
  --font-family-ja: "Noto Sans JP", sans-serif;
  --font-family-en: "Montserrat", sans-serif;
  --layout-padding-inline: 1.5rem;
}
@media screen and (width >= 768px) {
  :root {
    --layout-padding-inline: 2.5rem;
  }
}

html:lang(en) {
  --font-weight-base: 300;
  --font-weight-bold: 400;
}

html:lang(ja) {
  --font-weight-base: 400;
  --font-weight-bold: 700;
}

.front-page-content {
  padding-inline: var(--layout-padding-inline);
}
@media screen and (width >= 1024px) {
  .front-page-content {
    max-width: calc(1104px + var(--layout-padding-inline) * 2);
    margin-inline: auto;
  }
}