@charset "utf-8";


html {
    font-size: 18px;
}
  
:root {
    --color-white: #fff;
    --color-lightgreen: #55E810;
    --color-black: #273030;
    --color-font_dgray: #8D888D;
    /* フォントサイズ */
    --root-font-size: 18;
    --fs: calc(1rem / var(--root-font-size)); /* 例：適切な式に修正 */
    /* --fs:  / 18 * 1rem;  */
    --fs-xxs: 0.5rem; /*8-9*/
    --fs-xs: 0.75rem; /*12-13.5*/
    --fs-sm: 0.875rem; /*14-15.75*/
    --fs-md: 1rem; /*16-18*/
    --fs-lg: 1.125rem; /*18-20.25*/
    --fs-xl: 1.375rem; /*22-24.75*/
    --fs-2xl: 1.5em; /*24-27*/
    --fs-3xl: 1.75rem; /*28-31.5*/
    --fs-4xl: 1.875rem; /*30-33.75*/
    --fs-5xl: 3rem; /*48-54*/
    

    /* スペーシング */
    --sp-unit: 1em;
    --sp-3xs: calc(0.25 * var(--sp-unit));/*4-4.5*/
    --sp-xxs: calc(0.5 * var(--sp-unit));/*8-9*/
    --sp-xs: calc(0.75 * var(--sp-unit));/*12-13.5*/
    --sp-sm: calc(0.875 * var(--sp-unit));/*14-15.75*/
    --sp-md: calc(1 * var(--sp-unit));/*16-18*/
    --sp-lg: calc(1.25 * var(--sp-unit));/*18-20.25*/
    --sp-xl: calc(1.375 * var(--sp-unit)); /*22-24.75*/
    --sp-2xl: calc(1.5 * var(--sp-unit));/*24-27*/
    --sp-3xl: calc(1.75 * var(--sp-unit)); /*28-31.5*/
    --sp-4xl: calc(1.875 * var(--sp-unit)); /*30-33.75*/
    --sp-5xl: calc(3 * var(--sp-unit)); /*48-54*/
    --sp-6xl: calc(4.25 * var(--sp-unit));/*68-76.5*/
    --sp-7xl: calc(5.25 * var(--sp-unit));/*84-94.5*/
    --sp-8xl: calc(6.25 * var(--sp-unit));/*100-112.5*/
}

/*   基本　　*/
body{
margin: 0;
background-color: var(--color-lightgreen);
font-size: 1rem;
font-family: "source-han-sans-vf",sans-serif;
font-variation-settings: 'wght' 400;
color: var(--color-bk);
font-weight: 400;
font-style: normal;
}

/*   背景　　*/
.white {
  background-color: var(--color-white);
  margin-inline: auto;
  padding: var(--sp-5xl) 0 0;
  border-radius: 6px;
  margin: 8px;
}

/*   全体余白　　*/
.w_container {
  width: min(90%, 800px);
  margin: auto;
}

h1, h2, h3, h4, h5, h6, p, figure, ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
a {
    color: inherit;
    text-decoration: none;
  }
img{
      max-width: 100%;
      height: auto;
      display: block;
  }
p, li {
    text-align: justify;
  }
p {
    line-height: 2rem;
}