:root{
    --main-txt-color: #333;
    --bg-color-lightblue: #d2e6f5;
    --bg-color-blue: #3639a1;
    --tit-color: #14167c;
    /* 12px */
    --fs-12: 1.2rem;
    --lh-12: 1.6;
    /* 14px */
    --fs-14: 1.4rem;
    --lh-14: 1.7;
    /* 16px */
    --fs-16: 1.6rem;
    --lh-16: 1.8;
    /* 18px */
    --fs-18: 1.8rem;
    --lh-18: 1.7;
    /* 24px（見出し） */
    --fs-24: 2.4rem;
    --lh-24: 1.4;
    /* 40px（見出し） */
    --fs-40: 4.0rem;
    --lh-40: 1.4;
}
html{
    font-size: 10px;
}
*{
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
}
img{
    width: 100%;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
}
a{
    text-decoration: none;
    color: inherit;
}
.fs-12 {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}

.fs-14 {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
}

.fs-16 {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}

.fs-18 {
  font-size: var(--fs-18);
  line-height: var(--lh-18);
}

.fs-24 {
  font-size: var(--fs-24);
  line-height: var(--lh-24);
}
.fs-40 {
  font-size: var(--fs-40);
  line-height: var(--lh-40);
}
li{
    list-style: none;
}

.bg__lightblue{
    background-color: var(--bg-color-lightblue);
}
.bg__blue{
    background: var(--bg-color-blue);
}
.color__blue{
    color: var(--tit-color);
}
.dp__flex{
    display: flex;
    &.jc__between{
        justify-content: space-between;
    }
    &.jc__start{
        justify-content: flex-start;
    }
    &.jc__end{
        justify-content: flex-end;
    }
}
.align{
    &__center{
        text-align: center;
    }
    &__right{
        text-align: right;
    }
}
.width__s{
    max-width: 960px;
    margin: 0 auto;
}
.width__l{
    max-width: 1180px;
    margin: 0 auto;
}

/* header */
#header{
    .header__nav__btn{
        gap: 20px;
    }
    .header__nav__list{
        gap: 20px;
    }
}


/* index */
.sec03{
    padding: 50px 0;
    .plan__list{
        gap:30px;
        li{
            border: 1px solid #ccc;
        }
    }
}