@charset "utf-8";

/* ------------------------------
 base root
------------------------------ */

:root {
  --width-s: min(800px, 100%);
  --width-m: min(1120px, 100%);

  --color-base--bk: #222;
  --color-base--bl: #002B41;

  --color-wh: #fff;
  --color-gry: #ededed;
  --color-dgry: #3f3f3f;
  --color-mgry: #a2a2a2;
  --color-lgry: #fafafa;

  --color-bl: #143F83;
  --color-sbl: #058FD2;
  --color-lbl: #ddf1f4;
  --color-dbl: #002B41;
  --color-pk: #ed1e79;
  --color-grn: #00af7b;

  --size-base: 8px;
  --size-3s: calc(var(--size-base) * 1.25);  /* 10px */
  --size-2s: calc(var(--size-base) * 1.5); /* 12px */
  --size-s: calc(var(--size-base) * 1.75); /* 14px */
  --size-m: calc(var(--size-base) * 2);  /* 16px */
  --size-l: calc(var(--size-base) * 2.5);  /* 20px */
  --size-2l: calc(var(--size-base) * 3);  /* 24px */
  --size-3l: calc(var(--size-base) * 3.5);  /* 28px */
  --size-4l: calc(var(--size-base) * 5);  /* 40px */
  --size-5l: calc(var(--size-base) * 7);  /* 56px */

  --size-min: calc(var(--size-base) / 2);
  --size-max: calc(var(--size-base) * 10);

  --lheight-xs: 1.2;
  --lheight-s: 1.4;
  --lheight-m: 1.58;
  --lheight-base: 1.75;

  --family-en: "Anton", "Noto Sans JP", sans-serif;
  --family-ja--zenkaku: "Zen Kaku Gothic New", sans-serif;
}

body {
  line-height: var(--lheight-base);
  color: var(--color-base--bk);
  font-size: var(--size-m);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  text-align: justify;
}
a {
  color: inherit;
  text-decoration: none;
  .fa-solid {
    display: inline-block;
  }
}
li {
  list-style: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
picture {
  display: block;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

/* 共通パーツ
==================================================== */
.header {
  & .header--nav {
    display: flex;
    align-items: center;
    width: var(--width-m);
    margin: 0 auto;
    & .m-name {
      line-height: var(--lheight-s);
      font-size: var(--size-2s);
    }
  }
  & .header--title {
    background: linear-gradient(135deg, #fcfff0 0%, #d1eff0 100%);
    border-bottom: 1px solid var(--color-sbl);
  }
}
.footer {
  & .l-area.--cta {
    color: var(--color-wh);
    font-weight: 700;
    background: linear-gradient( to right, #1572b5 0%, #9dddd5 100%);
    & .m-title--l {
      margin-right: var(--size-4l);
      letter-spacing: 0.05em;
      color: var(--color-wh);
    }
    & .m-list--cta .__item {
      & + .__item {
        margin-left: var(--size-base);
      }
      & .m-link--opacity {
        width: 100%;
        border: 1px solid rgba(255,255,255,0.3);
      }
    }
  }
  & .--otherpost .c-btn--common {
    border-radius: 2em;
    background: linear-gradient( to right, #1572b5 0%, #9dddd5 100% );
  }
  & .footer--copyright,
  & .footer--nav {
    line-height: var(--lheight-s);
  }
  & .footer--nav {
    padding: var(--size-base) 0;
    font-size: var(--size-s);
    background: var(--color-lbl);
    & .m-list {
      display: flex;
      align-items: center;
      justify-content: center;
      & .__item {
        position: relative;
        & + .__item::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          display: block;
          width: 1px;
          height: 1em;
          background: var(--color-base--bk);
          transform: translateY(-50%);
        }
      }
      
      & .m-link--opacity {
        padding: var(--size-base) 1em;
      }
    }
  }
  & .footer--copyright {
    display: block;
    padding: var(--size-m) 0;
    color: var(--color-wh);
    text-align: center;
    background: var(--color-dgry);
  }
}
.m-list--cta {
  display: flex;
  align-items: center;
  line-height: var(--lheight-xs);
  & .m-link--opacity {
    display: block;
    width: 12em;
    padding: var(--size-2s) 0;
    color: var(--color-wh);
    font-weight: 500;
    text-align: center;
    border-radius: 2em;
    & .fa-solid {
      margin-right: var(--size-min);
    }
    &.--download {
      background: var(--color-grn);
    }
    &.--contact {
      background: var(--color-pk);
    }
  }
}


/* レスポンシブ
==================================================== */
@media screen and (min-width: 768px) {
  .is-only--sp {
    display: none;
  }
  *[class*="l-bg"] {
    padding: var(--size-5l) 0;
  }
  .l-flex {
    display: flex;
    & > .__img {
      width: 160px;
      margin-right: var(--size-2l);
      & + .__detail {
        width: calc(100% - 160px - var(--size-2l));
      }
    }
  }
  .text--eiken {
    font-size: var(--size-s);
  }
  .header {
    & .header--nav {
      height: 80px;
      & .m-logo {
        width: 250px;
        margin-right: var(--size-m);
      }
      & .m-list--cta {
        margin-left: auto;
        font-size: var(--size-s);
        & .__item + .__item {
          margin-left: var(--size-base);
        }
      }
    }
  }
  .footer {
    & .l-area.--cta .l-flex {
      align-items: center;
      justify-content: center;
      height: 240px;
      background: url("/assets2/images/education/cta-bg.png") center left / contain no-repeat;
      & .m-title--l {
        margin-right: var(--size-4l);
        letter-spacing: 0.05em;
        color: var(--color-wh);
      }
      & .m-list--cta .__item {
        width: 15em;
        & + .__item {
          margin-left: var(--size-base);
        }
        & .m-link--opacity {
          padding: var(--size-m);
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .is-only--pc {
    display: none;
  }
  .main {
    padding: var(--size-3l) 0;
  }
  .text--eiken {
    font-size: var(--size-2s);
  }
  .header {
    & .header--nav {
      padding: var(--size-min) var(--size-base);
      & .m-logo {
        width: 180px;
        margin-right: var(--size-base);
      }
      & .m-list--cta {
        display: none;
      }
    }
  }
  .footer {
    & .l-area div[class^="l-inner--"] {
      padding: var(--size-4l) var(--size-m);
    }
    & .l-area.--cta .l-flex .m-list--cta {
      justify-content: space-between;
      margin-top: var(--size-m);
      & .__item {
        width: calc(50% - var(--size-min));
        & .m-link--opacity {
          padding: var(--size-2s) var(--size-m);
        }
      }
    }
    & .footer--nav,
    & .footer--copyright {
      font-size: var(--size-2s);
    }
  }
}