@charset "utf-8";

/* ------------------------------
  to B
  corporate / education
------------------------------ */

:root {
  --wp--preset--color--deep-blue: #267fb9; /* 旧デザイン用 */
}

.text--eiken {
  color: var(--color-mgry);
  font-size: var(--size-s);
}

/* layout
==================================================== */
*[class*="l-section"],
*[class*="l-inner"] {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.l-section,
.l-inner--s {
  width: var(--width-s);
}
.l-inner--m {
  width: var(--width-m);
}
.l-contents {
  margin: var(--size-3l) auto var(--size-max);
}
.l-bg-gry {
  background: var(--color-lgry);
}
.l-bg-bl {
  background: var(--color-lbl);
}


/* module
==================================================== */
*[class*="m-title"] {
  font-weight: 700;
}
*[class*="m-title"]:not(.m-title--q) {
  line-height: var(--lheight-s);
}
.m-title--l {
  font-size: var(--size-3l);
}
.m-title--m {
  margin-bottom: var(--size-l);
  font-size: var(--size-2l);
}
.m-title--s {
  margin-bottom: var(--size-base);
  font-size: var(--size-l);
}
.m-link--opacity {
  display: inline-block;
  transition: opacity 0.2s;
  &:hover {
    opacity: 0.6;
  }
}
.m-link--line {
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}
.m-list__dot > li {
  margin-left: 1.5em;
  list-style: disc;
}

/* state
==================================================== */
.s-mt--m {
  margin-top: var(--size-m);
}
.s-fs--s {
  font-size: var(--size-s);
}
.s-fw--b {
  font-weight: 700;
}
.s-ta--center {
  text-align: center;
}


/* 個別パーツ
==================================================== */
.header .header--title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
}
.main {
  padding: var(--size-4l) 0;
}
.l-path--nav .m-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: var(--width-m);
  margin: 0 auto calc(var(--size-base) * -1);
  & .__item {
    margin-bottom: var(--size-base);
    line-height: var(--lheight-s);
    font-size: var(--size-s);
    &:not(:last-of-type) {
      margin-right: 1em;
      &::after {
        content: "\f054";
        display: inline-block;
        margin-left: 1em;
        color: var(--color-gry);
        font-weight: 700;
        font-family: "Font Awesome 7 free";
      }
    }
  }
}
.m-list--post ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: calc(var(--size-3l) * -1);
  & .list__item {
    margin-bottom: var(--size-3l);
    & .link {
      display: block;
      transition: opacity 0.2s;
      &:hover {
        opacity: 0.6;
      }
    }
    & .img {
      & img {
        overflow: hidden;
        border-radius: var(--size-base);
      }
      & figcaption {
        display: block;
        margin-top: var(--size-min);
        line-height: var(--lheight-s);
        font-weight: 700;
      }
    }
    & .label {
      display: flex;
      flex-wrap: wrap;
      margin: var(--size-base) calc(var(--size-min) * -1) 0 0;
      & span {
        display: block;
        margin: 0 var(--size-min) var(--size-min) 0;
        padding: 0.5em;
        line-height: 1;
        color: var(--color-wh);
        border-radius: var(--size-min);
        &.type {
          background: #5e6ab8;
        }
        &.school {
          background: #01af7a;
        }
      }
    }
  }
}
.--otherpost {
  & .m-title--l {
    margin-bottom: var(--size-3l);
  }
  & .c-btn--common {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(300px, calc(100% - var(--size-max)));
    color: var(--color-wh);
    font-weight: 700;
    &::after {
      content: "\f178";
      position: absolute;
      top: 50%;
      right: var(--size-3l);
      display: block;
      width: auto;
      height: auto;
      font-weight: 700;
      font-family: "Font Awesome 7 free";
      background: none;
      transform: translateY(-50%);
    }
  }
}

@media screen and (min-width: 768px) {
  .header .header--title {
    height: 150px;
    font-size: var(--size-3l);
  }
  .l-path--nav {
    margin-bottom: var(--size-4l);
  }
  .m-list--post ul {
    &::before,
    &::after {
      content: "";
      display: inline-block;
    }
    &::before {
      order: 1;
    }
    & .label span {
      font-size: var(--size-s);
    }
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-base: 7px;
  }
  .header .header--title {
    height: 100px;
    font-size: var(--size-2l);
  }
  .l-path--nav {
    margin-bottom: var(--size-3l);
    padding: 0 var(--size-m);
  }
  .m-list--post ul {
    & .label span {
      font-size: var(--size-2s);
    }
  }
}

body.all,
body.corporate.single {
  & .--otherpost {
    display: none;
  }
}

/* 一覧
==================================================== */
body.all {
  & .m-list--post ul {
    & .list__item {
      display: flex;
      flex-direction: column;
      & .img figcaption {
        margin-top: var(--size-base);
        padding-bottom: var(--size-base);
        font-size: var(--size-l);
        border-bottom: 1px solid var(--color-base--bk);
      }
      & .label {
        margin: var(--size-m) 0 var(--size-base);
      }
      .more {
        display: block;
        width: fit-content;
        margin: auto 0 0 auto;
        color: var(--color-sbl);
        font-weight: 700;
        &::after {
          content: "\f054";
          display: inline-block;
          margin-left: 0.5em;
          color: var(--color-sbl);
          font-size: var(--size-s);
          font-weight: 700;
          font-family: "Font Awesome 7 free";
        }
      }
    }
  }
  .m-select {
    display: flex;
    align-items: center;
    margin-bottom: var(--size-3l);
    font-size: var(--size-s);
    select {
      position: relative;
      padding: 0.25em 1em 0.25em 0.5em;
      -moz-appearance: auto;
      -webkit-appearance: auto;
      &.type {
        background: rgba(94,106,184,0.15);
      }
      &.school {
        background: rgba(1,175,122,0.15);
      }
    }
  }
  & .no-result {
    margin-bottom: var(--size-4l);
  }
  & .l-inner--m.--eiken {
    margin-top: var(--size-max);
  }
  @media screen and (min-width: 768px) {
    & .m-list--post ul {
      & .list__item,
      &::before,
      &::after {
        width: calc(100% / 3 - var(--size-m));
      }
    }
    .m-select {
      width: fit-content;
      margin-left: auto;
      div {
        margin-left: 2em;
      }
    }
  }
  @media screen and (max-width: 767px) {
    & .main .l-inner--m {
      padding: 0 var(--size-m);
    }
    .m-select {
      justify-content: space-between;
      div:first-of-type {
        width: calc(38% - var(--size-base));
      }
      div:last-of-type {
        width: calc(62% - var(--size-base));
      }
      select {
        display: block;
        margin-top: var(--size-min);
        width: 100%;
      }
    }
  }
}

/* 個別記事
==================================================== */
body.single {
  & .m-list--post ul {
    &::before,
    &::after,
    & .list__item {
      width: calc(25% - var(--size-m));
      & .img figcaption {
        margin-top: var(--size-min);
      }
    }
    & .l-inner--m + .l-inner--m {
      margin-top: var(--size-max);
    }
  }
  & .m-link--more {
    display: inline-block;
    color: var(--color-bl);
    text-decoration: underline;
    &::before {
      content: "\f105";
      display: inline-block;
      margin-right: 0.5em;
      font-weight: 700;
      font-family: "Font Awesome 7 free";
      text-decoration: none;
    }
    &:hover {
      text-decoration: none;
    }
  }
  @media screen and (min-width: 768px) {
    .main p:not([class^="m-title--"]) {
      line-height: 2;
    }
    & .--otherpost {
      padding: var(--size-5l) 0;
      & .c-btn--common {
        height: 60px;
        margin: var(--size-4l) auto 0;
      }
    }
    & .m-list--post ul .list__item {
      width: calc(25% - var(--size-m));
    }
  }
  @media screen and (max-width: 767px) {
    .main p:not([class^="m-title--"]) {
      line-height: 1.8;
    }
    & .--otherpost .c-btn--common {
      height: 48px;
      margin: var(--size-3l) auto 0;
    }
    & .m-list--post ul .list__item {
      width: calc(50% - var(--size-base));
    }
    & .l-inner--m.--eiken {
      padding: 0 var(--size-m);
    }
  }
}

/* インタビュー ------------ */
body.interview.single {
  & .main {
    & .m-list--cta {
      padding: 0 var(--size-m);
      justify-content: center;
      & .__item {
        width: min(240px, 80%);
      }
      & .m-link--opacity {
        width: 100%;
        padding: var(--size-m) var(--size-l);
        font-size: var(--size-m);
      }
    }
    & .interview--nav {
      width: var(--width-m);
      & .m-list {
        display: flex;
        justify-content: center;
        gap: var(--size-base);
        & .__item {
          & .m-link--opacity {
            display: block;
            padding: var(--size-s) 0;
            color: var(--color-wh);
            font-weight: 500;
            text-align: center;
            background: var(--color-bl);
            border-radius: var(--size-base);
            &::after {
              content: "\f078";
              position: relative;
              top: -0.1em;
              display: inline-block;
              font-weight: 700;
              font-family: "Font Awesome 7 free";
            }
          }
        }
      }
    }
    & .interview--header {
      position: relative;
      width: var(--width-m);
      margin: 0 auto var(--size-4l);
      & .m-name {
        line-height: var(--lheight-m);
        & strong {
          font-size: var(--size-l);
        }
      }
      & .m-img {
        margin: 0 auto;
      }
      & .s-fs--s {
        margin-top: var(--size-base);
        text-align: right;
      }
    }
    & .interview--overview {
      width: var(--width-m);
      margin: 0 auto;
      background: var(--color-lgry);
    }
    & .interview--about {
      background: var(--color-lbl);
      & .m-dlist {
        border-bottom: 1px solid var(--color-dbl);
        & .__name,
        & .__detail {
          padding: var(--size-s) var(--size-m);
        }
        & .__name {
          color: var(--color-wh);
          background: var(--color-dbl);
        }
        & .__detail {
          background: var(--color-wh);
        }
      }
      & span[class^="m-tag"] {
        display: inline-block;
        padding: 0.25em 1em;
        color: var(--color-wh);
        border-radius: var(--size-min);
        &.m-tag--online {
          background: #00af7b;
        }
        &.m-tag--alt {
          background: #b659b8;
        }
        &.m-tag--abroad {
          background: #377bba;
        }
      }
      & span[class^="s-fc"] {
        font-weight: 700;
        &.s-fc--online {
          color: #00af7b;
        }
        &.s-fc--alt {
          color: #b659b8;
        }
        &.s-fc--abroad {
          color: #377bba;
        }
      }
      & .l-inner--s + .l-inner--s {
        margin-top: var(--size-3l);
      }
    }
    & .interview--outline {
      width: var(--width-s);
      margin: 0 auto var(--size-5l);
      background: var(--color-lgry);
      & ul li {
        margin-left: 1.5em;
        list-style: disc;
      }
      & .s--line {
        margin-top: var(--size-m);
        padding-top: var(--size-m);
      }
    }
    & .interview--movie {
      margin-bottom: var(--size-2l);
      & iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
      }
    }
    & .interview-contents {
      & .m-title--l,
      & .m-title--box {
        position: relative;
      }
      & .m-title--l {
        padding: 0.5em 0;
        color: var(--color-wh);
        background: var(--color-bl);
      }
      & .m-title--q {
        position: relative;
        margin: var(--size-4l) 0 var(--size-s);
        line-height: var(--lheight-m);
        color: var(--color-bl);
        font-size: calc(var(--size-m) * 1.15);
        &::before {
          content: "";
          position: absolute;
          top: calc(0.5em * 1.5);
          left: 0;
          display: block;
          height: 1px;
          background: var(--color-bl);
        }
      }
      &#interview {
        & .m-title--l + section .m-title--box {
          margin-top: 0;
        }
        & .m-title--box {
          margin: var(--size-max) 0 var(--size-4l);
          & h4 {
            color: var(--color-sbl);
            font-size: var(--size-s);
            font-weight: 500;
            &::before {
              content: "●";
              display: inline-block;
              margin-right: 0.25em;
            }
          }
          & .m-title--m {
            margin-bottom: 0;
          }
          & + .m-title--q {
            margin-top: 0;
          }
        }
      }
      &#voice {
        & .l-inner .m-title--q:first-of-type {
          margin-top: 0;
        }
        & .m-title--name {
          background: var(--color-lbl);
          & p {
            font-size: var(--size-s);
          }
        }
      }
      & + .interview-contents {
        margin-top: var(--size-max);
      }
      & .m-img {
        width: min(720px, 100%);
        margin: var(--size-5l) auto;
        & + .m-img {
          margin-top: calc(var(--size-m) * -1);
        }
        & figcaption {
          margin-top: var(--size-min);
          font-size: var(--size-s);
          text-align: center;
        }
      }
      & p + p {
        margin-top: 1em;
      }
    }
    & .interview--charge {
      background: var(--color-lgry);
      & .m-title--s {
        display: flex;
        align-items: center;
        &::before {
          content: "\f508";
          display: inline-block;
          margin-right: var(--size-base);
          color: var(--color-bl);
          font-size: 1.5em;
          font-weight: 700;
          font-family: "Font Awesome 7 free";
        }
      }
    }
  }
  &.old .main {
    padding-bottom: 0;
  }

  @media screen and (min-width: 768px) {
    .main {
      & .m-list--cta {
        margin: var(--size-5l) 0;
        & .__item + .__item {
          margin-left: var(--size-m);
        }
      }
      & .s-td--belt {
        display: inline-block;
        margin-top: 0.25em;
        padding: 0.25em 0.5em 0.3em;
        line-height: var(--lheight-s);
        & + .s-td--belt {
          margin-left: -0.5em;
          padding-left: 0;
        }
      }
      & .interview--nav {
        margin: var(--size-5l) auto var(--size-4l);
        & .m-list .__item {
          width: calc(25% - var(--size-base));
          & .m-link--opacity::after {
            margin-left: var(--size-m);
            font-size: var(--size-s);
          }
        }
      }
      & .interview--header {
        & .m-title {
          margin: -0.25em 0 calc(var(--size-base) * 3.75 * -1);
          font-size: calc(var(--size-base) * 3.75);
          & .s-td--belt {
            color: var(--color-wh);
            background: var(--color-sbl);
          }
        }
        & .m-name {
          position: absolute;
          right: 0;
          bottom: 1.5em;
          text-align: right;
          & .s-td--belt {
            background: var(--color-lbl);
          }
        }
        & .m-img {
          width: 85%;
        }
        & .s-fs--s {
          position: absolute;
          right: 0;
        }
      }
      & .interview--overview {
        padding: var(--size-4l);
      }
      & .interview--about,
      & .interview--charge {
        padding: var(--size-5l) 0;
      }
      & .interview--about {
        & .m-dlist {
          display: flex;
          flex-wrap: wrap;
          & .__name,
          & .__detail {
            border-top: 1px solid var(--color-dbl);
          }
          & .__name {
            display: flex;
            align-items: center;
            width: 6em;
          }
          & .__detail {
            width: calc(100% - 6em);
            border-right: 1px solid var(--color-dbl);
            & + .__name {
              border-top-color: var(--color-wh);
            }
          }
        }
        & span[class^="m-tag"] {
          margin-right: var(--size-base);
        }
      }
      & .interview--outline {
        padding: var(--size-4l);
      }
      & .interview-contents {
        & .m-title--l,
        & .m-title--box {
          left: calc(var(--size-4l) * -1);
          width: calc(100% + var(--size-4l) * 2);
        }
        & .m-title--l {
          margin-bottom: var(--size-4l);
          padding-left: var(--size-4l);
        }
        & .m-title--q {
          padding-left: var(--size-4l);
          &::before {
            width: calc(var(--size-4l) - 0.5em);
          }
        }
        &#interview {
          & .m-title--box {
            padding: var(--size-4l) 0 0 var(--size-4l);
            border-top: calc(var(--size-min) / 2) solid var(--color-gry);
            border-left: calc(var(--size-min) / 2) solid var(--color-gry);
            & h4 {
              margin-bottom: var(--size-min);
            }
          }
        }
        &#voice {
          & section {
            border: 1px solid var(--color-gry);
            & + section {
              border-top: none;
            }
          }
          & .l-inner {
            padding: var(--size-4l) var(--size-4l) var(--size-max);
          }
          & .m-title--name {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--size-4l);
            & figure {
              width: 280px;
            }
            & div {
              width: calc(100% - 280px - var(--size-2l));
            }
          }
        }
      }
      & .interview--charge {
        margin: var(--size-max) 0;
      }
    }
  }

  @media screen and (max-width: 767px) {
    .main {
      & .m-list--cta {
        margin: var(--size-4l) 0;
        & .__item + .__item {
          margin-left: var(--size-base);
        }
      }
      & .interview--nav {
        margin: var(--size-4l) 0;
        padding: 0 var(--size-m);
        & .m-list {
          flex-wrap: wrap;
          margin-bottom: calc(var(--size-base) * -1);
          & .__item {
            width: calc(50% - var(--size-min));
            & .m-link--opacity::after {
              margin-left: var(--size-base);
              font-size: var(--size-xs);
            }
          }
        }
      }
      & .interview--header {
        & .m-title {
          padding: var(--size-m);
          color: var(--color-wh);
          font-size: var(--size-2l);
          background: var(--color-sbl);
        }
        & .m-name {
          padding: var(--size-m);
          background: var(--color-lbl);
        }
        & .s-fs--s {
          padding-right: var(--size-m);
        }
      }
      & .interview--about,
      & .interview--charge {
        padding: var(--size-4l) var(--size-m);
      }
      & .interview--overview {
        padding: var(--size-4l) var(--size-m);
      }
      & .interview--about {
        & .m-dlist {
          border-left: 1px solid var(--color-dbl);
          border-right: 1px solid var(--color-dbl);
          & .__name, & .__detail {
            margin-bottom: 0;
          }
          & .__name {
            line-height: var(--lheight-s);
          }
        }
        & span[class^="m-tag"] {
          margin: 0 var(--size-min) var(--size-min) 0;
        }
      }
      & .interview--outline {
        padding: var(--size-4l) var(--size-m);
      }
      & .interview-contents {
        & .l-inner--s {
          padding: 0 var(--size-m);
        }
        & .m-title--l {
          margin: 0 calc(var(--size-m) * -1) var(--size-4l);
          padding-left: var(--size-m);
        }
        & .m-title--q {
          padding-left: var(--size-3l);
          &::before {
            width: calc(var(--size-3l) - 0.5em);
          }
        }
        &#interview {
          & .m-title--box {
            position: relative;
            padding-top: var(--size-3l);
            &::before {
              content: "";
              display: block;
              position: absolute;
              top: 0;
              width: 25%;
              height: var(--size-min);
              background: var(--color-gry);
            }
            & h4 {
              margin-bottom: var(--size-base);
            }
            & .m-title--m {
              font-size: calc(var(--size-l) * 1.1);
            }
          }
        }
        &#voice {
          & .l-inner {
            padding-top: var(--size-4l);
            padding-bottom: var(--size-5l);
          }
          & .m-title--name {
            margin: 0 calc(var(--size-m) * -1);
            & > div {
              padding: var(--size-l) var(--size-m);
            }
            & .m-title--m {
              margin-bottom: var(--size-m);
              line-height: var(--lheight-m);
              font-size: var(--size-l);
            }
          }
        }
      }
      & .interview--charge {
        margin: var(--size-4l) 0;
      }
    }
  }
}

/* コラム ------------ */
body.column.single {
  & .l-contents {
    width: var(--width-s);
    margin: 0 auto var(--size-max);
  }
  & .l-main {
    & header {
      margin-bottom: var(--size-4l);
      & .m-title {
        margin-bottom: var(--size-3l);
      }
    }
    & section {
      & h2, & h4 {
        line-height: var(--lheight-m);
      }
      & h2 {
        margin: var(--size-max) 0 var(--size-m);
        padding: 0.5em 1em;
        color: var(--color-bl);
        font-size: var(--size-2l);
        background: var(--color-lbl);
      }
      & h3 {
        margin: var(--size-4l) 0 var(--size-m);
        padding-left: var(--size-m);
        font-size: var(--size-l);
        border-left: var(--size-min) solid var(--color-sbl);
      }
      & p + p {
        margin-top: 1em;
      }
      & figure,
      & .m-list__dot {
        margin: 1em 0;
      }
      & a:not(.m-btn) {
        color: var(--color-bl);
        text-decoration: underline;
        &:hover {
          text-decoration: none;
        }
      }
      & figure {
        & figcaption {
          margin-bottom: var(--size-base);
          font-weight: 700;
        }
        & dl {
          display: flex;
          flex-wrap: wrap;
          border: 1px solid var(--color-mgry);
          border-left: none;
          & dt, & dd {
            width: 50%;
            padding: var(--size-base) var(--size-m);
          }
          & dt {
            width: 30%;
            color: var(--color-wh);
            font-weight: 700;
            background: var(--color-mgry);
            &:nth-of-type(n+2) {
              border-top: 1px solid var(--color-wh);
            } 
          }
          & dd {
            width: 70%;
            &:nth-of-type(n+2) {
              border-top: 1px solid var(--color-mgry);
            } 
          }
        }
      }
      & a[href="https://biz.qqeng.com/download-catalogue-school"],
      & a[href="https://share.hsforms.com/1T7nq7ehPTqGOOmmz0HQRawdfagp"] {
        display: block;
        width: fit-content;
        margin: var(--size-2l) auto;
        padding: 0.5em 1em;
        color: #fff;
        font-size: var(--size-l);
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        border-radius: 2em;
        transition: opacity 0.2s;
        &:hover {
          opacity: 0.6;
        }
      }
      & a[href="https://biz.qqeng.com/download-catalogue-school"] {
        background: var(--color-grn);
      }
      & a[href="https://share.hsforms.com/1T7nq7ehPTqGOOmmz0HQRawdfagp"] {
        background: var(--color-pk);
      }
    }
  }

  @media screen and (min-width: 768px) {
    & .l-main {
      & header .m-title {
        font-size: var(--size-4l);
      }
      & section {
        & h2 {
          padding: 0.5em 1em;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    & .l-main {
      & header .m-title {
        padding: 0 var(--size-m);
        font-size: var(--size-2l);
      }
      & > section {
        padding: 0 var(--size-m);
        & h2 {
          margin-left: calc(var(--size-m) * -1);
          margin-right: calc(var(--size-m) * -1);
          padding: 0.5em var(--size-m);
        }
      }
    }
  }
}