/* A Modern CSS Reset */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


.noto-sans-jp-<uniquifier> {
  /* font-family: "Noto Sans JP", sans-serif; */
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

strong {
  font-weight: 500;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  /* font-family: "Noto Sans JP", sans-serif; */
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  background-color: #F8F8F8;
  padding: 0px 60px 60px 60px;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  font-style: normal;
}
@media (max-width: 768px) {
  body {
    min-width: revert;
    font-size: 14px;
  }
}

.font-en {
  font-family: "Jost", sans-serif;
}

.pc-only {
  display: block;
}
@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

.sp-only {
  display: none !important;
}
@media (max-width: 768px) {
  .sp-only {
    display: block !important;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

.common-margin {
  width: 100%;
  height: 30px;
}
.common-margin.ll {
  height: 100px;
}
.common-margin.l {
  height: 60px;
}
.common-margin.m {
  height: 45px;
}
.common-margin.s {
  height: 10px;
}
@media (max-width: 768px) {
  .common-margin {
    width: 100%;
    height: 25px;
  }
  .common-margin.ll {
    height: 80px;
  }
  .common-margin.l {
    height: 50px;
  }
  .common-margin.m {
    height: 30px;
  }
  .common-margin.s {
    height: 6px;
  }
}

a {
  color: black;
  text-decoration: none;
}

ol, ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

header.site-header {
  width: calc(100% + 60px * 2);
  margin-left: -60px;
  margin-bottom: 55px;
  background: #1C46F5;
  border-bottom: 1px solid #eee;
}

header {
  display: flex;
  height: 88px;

  .logo{
    height: 56px;
    margin-top: 14px;
    margin-left: 12px;
  }

  .global-nav {
      max-width: 1120px;
      margin-left: auto;
      padding: 24px 20px;
      display: flex;
      justify-content: flex-end;
  }

  .global-nav__list {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 38px;
      margin: 0;
      padding: 0;
      list-style: none;
  }

  .global-nav__item {
      position: relative;
      font-weight: 700;
      font-size: 15px;
      white-space: nowrap;
  }

  .global-nav__item > a {
      display: block;
      color: #FFF;
      text-decoration: none;
      padding: 8px 0;
  }

  .global-nav__item span {
      font-size: 12px;
      margin-left: 6px;
  }

  .global-nav__dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 150px;
      margin: 0px 0 0;
      margin-left: -20px;
      list-style: none;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
      z-index: 9999;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.08);

      li {
        text-align: center;
        border-bottom: 1px solid #E5E5E5;

        &:last-child {
          border-bottom: 0;
        }
      }
  }

  .global-nav__dropdown--right {
      left: auto;
      right: 0;
      min-width: 210px;
  }

  .global-nav__dropdown li + li {
  }

  .global-nav__dropdown a {
      color: #000;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      display: block;
      padding: 13px 0 14px 0;
  }

  .global-nav__dropdown a:hover{
    background-color: #2C2C2C;
    color: #FFF;
    cursor: pointer;
  }

  .global-nav__item:hover .global-nav__dropdown {
      display: block;
  }

  @media screen and (max-width: 768px) {
      .global-nav__list {
          flex-direction: column;
          gap: 8px;
      }

      .global-nav__dropdown {
          position: static;
          display: block;
          margin-top: 4px;
          border: none;
      }

      .global-nav__dropdown li + li {
          margin-top: 10px;
      }
  }
}


main {
  display: flex;
  width: 1150px;
  margin: 0 auto;
  justify-content: space-between;

  h1 {
    font-size: 30px;
    margin-bottom: 60px;
    height: 70px;
    line-height: 70px;
  }

  .main-inner {
    width: 800px;

    .white-wrapper {
      background-color: #FFF;
      border-radius: 10px;
      margin: 25px 0 25px 0;

      h2 {
        border-bottom: 1px solid #EDEDED;
        font-size: 18px;
        padding: 32px 35px;

        span {
          font-weight: normal;
          padding-left: 15px;
          font-size: 90%;
        }
      }

      .dl-wrapper{
        display: flex;
        flex-wrap: wrap;
        padding: 22px 35px;
      }

      dl {
        display: flex;
        padding: 3px 0;
        width: 50%;

        dt {
          font-size: 13px;
          color: #767676;
          width: 150px;
        }

        dd {
          font-size: 14px;
          width: calc(100% - 150px);
        }

        &.full {
          width: 100%;

          dt {
            display: none;
          }
          dd {
            width: 100%;
          }
        }

      }

      .graph-inner {
        .credit-graph-layout {
          display: flex;
          gap: 60px;
          padding: 60px 60px;
          width: 100%;
        }

        .credit-main {
          width: 430px;
          text-align: center;
        }

        .credit-pie {
          border-radius: 50%;
          background:
            conic-gradient(
              var(--graph-color) calc(var(--rate) * 1%),
              var(--graph-bg) 0
            );
        }

        .credit-pie--main {
          --graph-color: #2446f5;
          --graph-bg: #5570f5;
          width: 200px;
          height: 200px;
        }

        .credit-pie--riron {
          --graph-color: #6cf24f;
          --graph-bg: #d8ffd2;
          width: 90px;
          height: 90px;
        }

        .credit-pie--jitsugi {
          --graph-color: #df70ee;
          --graph-bg: #f5d1fa;
          width: 90px;
          height: 90px;
        }

        .credit-main__text {
          margin-top: 46px;
          font-size: 16px;
        }

        .credit-main__text strong {
          display: block;
        }

        .credit-main__text span {
          display: block;
          margin-top: 5px;
          font-weight: 400;
        }

        .credit-side {
          display: flex;
          flex-direction: column;
          gap: 42px;
        }

        .credit-side__item {
          display: flex;
          align-items: center;
          gap: 28px;
        }

        .credit-side__text {
          min-width: 560px;
        }

        .credit-side__text p {
          display: flex;
          align-items: center;
          gap: 60px;
          font-size: 15px;
          margin: 0;
        }

        .credit-side__text strong {
          font-weight: 700;
        }

        .credit-side__text span {
          font-weight: 400;
        }

        .credit-side__text a {
          display: inline-block;
          margin-top: 8px;
          font-size: 13px;
          color: #2C2C2C;
          border-bottom: 1px dotted #333;
        }

        @media (max-width: 768px) {
          .credit-graph-layout {
            flex-direction: column;
            gap: 40px;
            padding: 40px 0;
          }

          .credit-main {
            width: 100%;
          }

          .credit-pie--main {
            width: 260px;
            height: 260px;
            margin: 0 auto;
          }

          .credit-side__item {
            gap: 24px;
          }

          .credit-pie--riron,
          .credit-pie--jitsugi {
            width: 120px;
            height: 120px;
          }

          .credit-side__text {
            min-width: auto;
          }

          .credit-side__text p {
            display: block;
            font-size: 18px;
          }

          .credit-main__text {
            font-size: 22px;
          }

          .credit-side__text a {
            font-size: 16px;
          }
        }
      }/* graph-inner */


      .history-inner {
        padding: 0px 60px 50px 60px;

        h3 {
          font-size: 17px;
          border-bottom: 1px solid #EDEDED;
          padding-bottom: 20px;
          margin-bottom: 20px;
          margin-top: 20px;

          span {
            padding-right: 10px;
          }
          span.blue {
            color: #EE83F9;
          }
          span.yellow {
            color: #75FB57;
          }
        }


        .attendance-wrapper {
          display: flex;
          align-items: flex-start;
        }

        .subject-attendance {
          width: calc((100% - 15px * 3) / 4);
          margin-right: 15px;

          &:last-child {
            margin-right: 0;
          }

          .name {
            display: flex;
            border: 1px solid #D5D5D5;
            padding: 15px 8px 14px 8px;
            justify-content: space-around;

            .title {
              font-size: 15px;
              font-weight: bold;
            }
            .rate {
              font-weight: normal;
              color: #767676;
              font-size: 14px;
            }
          }

          ul {
            padding: 15px 0 30px 0;

            li {
              padding: 3px 0;
              font-size: 14px;
              display: flex;

              &.inactive {
                color: gray;
              }

              span {
                display: inline-block;
                width: 80%;

                &:last-child {
                  width: 20%;
                  padding-right: 5px;
                  text-align: right;
                }
              }
            }
          }

        }/* subject-attendance */


      }/* history-inner */

    }

  }
  aside {
    width: 320px;
  }
}


footer {
  .inner {
    width: 1150px;
    margin: 50px auto 0 auto;
    font-size: 12px;
    display: flex;

    nav {
      width: 80%;
      text-align: left;

      a {
        padding-right: 30px;
      }
    }

    .copyright {
      width: 50%;
      text-align: right;
    }
  }
}

.btn {
  height: 64px;
  text-align: center;
  line-height: 64px;
  font-size: 15px;
  display: block;
  width: 100%;
  font-weight: bold;

  &.subbtn {
    background-color: #2C2C2C;
    color: #FFF;
  }

  &.backto {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: #1C46F5;
    color: #FFF;
    transition: .2s;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #000;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
      z-index: -1;
    }

    &:hover::before,
    &:focus::before {
      transform: scaleX(1);
    }
  }

  &.btn-operation {
    display: block;
    width: 320px;
    margin: 50px auto 20px auto;
  }
}


aside {
  background-color: #FFF;
  border-radius: 10px;
  margin-top: 130px;
  padding: 34px 40px;

  h2 {
    border-bottom: 1px solid #EDEDED;
    font-size: 17px;
    padding: 0px 0px 30px 0px;
  }

  .news-list {
    padding: 12px 0 14px 0;
    border-top: 1px dotted #EDEDED;

    &:first-child {
      border-top: none;
    }

    .date {
      color: #767676;
      font-size: 14px;
    }
    a {
      font-size: 15px;
      display: block;
      margin-top: 5px;
    }
  }

  .btn {
    margin-top: 20px;
  }
}




#news-single {
  width: 850px;
  margin: 0 auto;

  h1 {
    font-size: 30px;
    margin: 20px 0 15px 0;
  }

  .date {
    font-size: 13px;
  }

  .body {
    margin-top: 40px;
    font-size: 15px;
    padding: 50px 50px;
    background-color: #FFF;
    border-radius: 10px;
  }

  .body p {
    line-height: 180%;
  }

  .body h2 {
    font-size: 22px;
    margin: 50px 0 20px 0;
  }

  .body h3 {
    font-size: 18px;
    margin: 50px 0 20px 0;
  }

  .body ul {
    margin: 20px 0 20px 20px;
    list-style: disc;
  }

  .body ol {
    list-style: decimal;
    margin: 20px 0 20px 20px;
  }

  .body li {
    margin-bottom: 6px;

  }

  .body img {
    max-width: 100%;
    display: block;
    margin: 30px auto 20px auto;
  }

  .btn {
    display: block;
    width: 320px;
    margin: 50px auto 30px auto;
  }

  @media (max-width: 768px) {
    width: 100%;

    h1 {
    }

    .date {
    }

    .body {
    }

    .body p {
    }

    .body h2 {
    }

    .body h3 {
    }

    .body ul {
    }

    .body ol {
    }

    .body li {
    }

    .body img {
    }

    .btn {
    }

  }

}/*news-single*/


.common-finish {
  width: 850px;
  margin: 0 auto;


  h1 {
    font-size: 28px;
    margin: 20px 0 15px 0;
  }

  .date {
    font-size: 13px;
  }

  .c-result-text {
    margin-top: 40px;
    font-size: 15px;
  }
}/*common-finish*/


.common-list,
.common-form {
  width: 850px;
  margin: 0 auto;
  padding-bottom: 50px;

  h1 {
    font-size: 30px;
    margin: 20px 0 55px 0;
  }

  .body {
    padding: 0px 0 40px 0;
    font-size: 15px;
  }

  .error-box {
    color: red;
    font-size: 13px;
  }

  .archive-list {
    background-color: #FFF;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 22px 30px;

    .title {
      font-size: 16px;
      margin: 0;
      padding: 0;
      font-weight: bold;

      &.bottom {
        margin-bottom: 12px;
      }
    }
    .deadline {
      font-size: 13px;

      span {
        color: gray;
        padding-right: 15px;
      }
    }

    time {
      font-size: 13px;
      color: gray;
    }
  }

  .pagination {
    margin-top: 50px;
    
    .page-numbers {
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin: 0 1px;
      background-color: #FFF;

      &.next,
      &.prev {
        background: none;
        font-size: 15px;
      }
      &.current {
        background-color: #1C46F5;
        color: #FFF;
      }
    }
  }/*pagination*/

  form {
    margin-top: 40px;
    padding: 40px 40px 40px 40px;
    background-color: rgba(256, 256, 256, 1.5);

  
    .c-contact-form-item {
      display: flex;
      margin-bottom: 18px;

      label {
        width: 40%;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;

        .c-contact-form-item__required {
          font-size: 11px;
          color: red;
          background-color: pink;
          padding: 3px 8px;
          border-radius: 10px;
          margin-left: 10px;
        }

      }

      .c-contact-form-item__input {
        width: 60%;
        font-size: 18px;
        height: 60px;
        padding: 0 14px;
        border: 1px solid #B9B9B9;
        border-radius: 3px;
      }
      .c-contact-form-item__content {
        width: 60%;

          .c-contact-form-item__input {
            width: 100%;
          }
      }
      .c-contact-form-item__note {
        font-size: 13px;
        color: gray;
        margin: 10px 0 20px 0;
      }
      textarea {
        font-size: 18px;
        padding: 10px 15px;
        width: 60%;
        height: 200px;
        border: 1px solid #B9B9B9;
        border-radius: 3px;
      }
    }



    .notice {
      color: red;
      font-size: 12px;
      padding: 12px 15px;
      border-radius: 2px;
      background-color: beige;
    }
  
  }/*form*/


}/*common-finish*/


.choice-wrapper {
  margin-top: 20px;
}
form {
  .choice-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .choice-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
  }

  .choice-item input {
    display: none;
  }

  /* チェックボックス */
  .choice-check {
    width: 26px;
    height: 26px;
    border: 2px solid #999;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: .2s;
    flex-shrink: 0;
  }

  /* チェック時 */
  .choice-item input:checked + .choice-check {
    background: #007bff;
    border-color: #007bff;
  }

  /* チェックマーク */
  .choice-item input:checked + .choice-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 10px;
    height: 13px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }

  /* ホバー */
  .choice-item:hover .choice-check {
    border-color: #007bff;
  }

  .choice-text {
    flex: 1;
  }

  .form-btn {
    font-size: 16px;
    text-align: center;
    background-color: #2C2C2C;
    color: #FFF;
    font-weight: bold;
    width: 320px;
    padding: 0;
    height: 64px;
    line-height: 60px;
    border: none;
    display: block;
    margin: 30px auto 0px auto;
  }
}
.can-multi {
  font-size: 12px;
  padding: 2px 10px;
  background-color: #eee;
  display: inline-block;
  color: gray;
  border-radius: 3px;
}

.common-single {
  width: 850px;
  margin: 0 auto;
  padding-bottom: 50px;

  h1 {
    font-size: 30px;
    margin: 20px 0 30px 0;
  }

  .body {
    padding: 10px 0 20px 0;
    font-size: 15px;
  }

  .error-box {
    color: red;
    font-size: 13px;
  }

  .publish_date {
    color: gray;
    font-size: 14px;
    margin-top: -15px;
  }

  .deadline {
    font-size: 14px;

    span {
      color: gray;
      padding-right: 15px;
    }
  }

  .content {
    border-radius: 5px;
    background-color: #FFF;
    padding: 50px 50px;
    margin-top: 50px;
    font-size: 15px;
    line-height: 160%;

    h2,h3,h4 {
      margin-bottom: 30px;
      margin-top: 30px;

      &:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
      }
    }
    h2 {
      font-size: 20px;
      border-top: 1px solid #eeeeee;
      padding-top: 30px;
    }
    h3 {
      font-size: 19px;
      padding-top: 20px;
    }
    h4 {
      font-size: 15px;
    }

    p {
      margin: 20px 0;

      &:first-child {
        margin-top: 0;
      }
    }

    li {
      list-style: none;
      padding-left: 5px;
      margin-bottom: 4px;
    }
    ol,
    ul {
      margin-left: 15px;
      margin-top: 30px;
      margin-bottom: 30px;
    }
    ul {
      li {
        list-style: disc;
      }
    }
    ol {
      li {
        list-style: decimal;
      }
    }


    img {
      display: block;
      margin: 50px auto;
      max-width: 100%;
    }

  }/*content*/

  .backto-btn-wrapper {
    width: 320px;
    text-align: center;
    margin: 50px auto 30px auto;
  }

}


#archive-whitepaper {

  .main-inner {
    .nav {  
      padding: 60px 40px 50px 40px;

      a {
        font-weight: bold;
        margin-right: 6px;
        padding: 16px 20px;
        font-size: 14px;
        border-radius: 40px;
        border: 1px solid #1C46F5;

        &:hover {
          background-color: #1C46F5;
          color: #FFF;
        }
      }
    }

    .white-wrapper {
      .description {
        padding: 30px 40px;
        font-size: 90%;
      }

      .whitepaper-row {
        padding: 20px 40px;
        font-size: 95%;

        .title {
          font-weight: bold;
          margin-bottom: 10px;

          &:before {
            content: "●";
            margin-right: 5px;
            color: #1C46F5;
          }
        }

        .attachment {
          padding-right: 8px;
          font-size: 90%;

          &:hover {
            color: #1C46F5;
            text-decoration: underline;
          }

          img {
            height: 17px;
            margin-right: 4px;
            margin-bottom: -4px;
          }
        }
      }/*whitepaper-row*/

      .empty {
        font-size: 90%;
        padding: 30px 40px;
        color: gray;
      }
    }

  }/*main-inner*/

}/*#archive-whitepaper*/



.icon-favorite,
#icon-favorite {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-image: url(/assets/images/icon-favorite-inactive.png);

  &:hover {
    cursor: pointer;
  }

  &.inactive {
    background-image: url(/assets/images/icon-favorite-inactive.png);
  }
  &.active {
    background-image: url(/assets/images/icon-favorite-active.png);
  }
}


#archive-elearning {

  .white-wrapper {
    padding-bottom: 20px;

    h2 {
      margin-bottom: 20px;
    }
  }

  .body {
    font-size: 14px;
    padding-bottom: 30px;
  }
  
  
  .elearning-row {
    display: flex;
    padding: 8px 0px;
    width: calc(100% - 35px * 2);
    margin-left: 35px;
    border-bottom: 1px solid #eee; 

    &:last-child {
      border-bottom: 0;
    }

    .elm {
      &.title {
        width: 30%;
        padding-top: 9px;
        padding-bottom: 7px;
        font-size: 15px;
        font-weight: bold;
      }
      &.description {
        width: calc(100% - 30% - 120px);
        padding-top: 9px;
        font-size: 14px;
      }

      .icon-favorite {
        width: 24px;
        height: 24px;
        margin-top: 6px;

        &:hover {
          cursor: auto !important;
        }
      }
      &.button-area {
        width: 120px;
      }
      &.view-area {
        width: 150px;
      }
      &.view-area,
      &.button-area {
        text-align: right;

        a {
          font-size: 13px;
          width: 96px;
          padding-right: 3px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          color: #FFF;
          display: inline-block;
          background-color: #1C46F5;
          border-radius: 3px;

          .icon-play {
            height: 22px;
            margin-bottom: -6px;
          }

          .icon-test {
            height: 16px;
            margin-bottom: -3px;
          }

          &.inactive {
            background-color: gray;
          }
          &.active {
            background-color: red;
          }
        }
      }
    }
  }

  &.elearning-child {
    .white-wrapper {
      padding-top: 30px;
      padding-bottom: 30px;
    }
  }

}/*#archive-elearning*/



#single-elearning-child {

  .alert-message {
    font-size: 13px;
    color: red;
    margin-top: 30px;
  }

  #icon-favorite {
    margin-bottom: 40px;
  }

  .video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

}/* single-elearning-child */







/* ==============================
   SP版 追加CSS
   style.css の末尾に追加
============================== */
@media screen and (max-width: 768px) {

  body {
    padding: 0 16px 40px;
    font-size: 14px;
    overflow-x: hidden;
  }

  img,
  iframe,
  video {
    max-width: 100%;
  }

  header.site-header {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-bottom: 32px;
  }

  header {
    height: auto;
    min-height: 72px;
    display: block;
    padding: 12px 16px;
  }

  header .logo {
    height: 40px;
    margin: 0;
  }

  header .global-nav {
    max-width: none;
    margin-left: 0;
    padding: 16px 0 0;
  }

  header .global-nav__list {
    align-items: flex-start;
    gap: 4px;
  }

  header .global-nav__item {
    width: 100%;
    font-size: 14px;
  }

  header .global-nav__item > a {
    padding: 10px 0;
  }

  header .global-nav__dropdown {
    width: 100%;
    margin-left: 0;
    box-shadow: none;
  }

  main {
    display: block;
    width: 100%;
  }

  main h1 {
    font-size: 24px;
    height: auto;
    line-height: 1.4;
    margin-bottom: 28px;
  }

  main .main-inner,
  main aside,
  aside {
    width: 100%;
  }

  aside {
    margin-top: 32px;
    padding: 24px 20px;
  }

  main .main-inner .white-wrapper {
    margin: 20px 0;
    border-radius: 8px;
  }

  main .main-inner .white-wrapper h2 {
    font-size: 17px;
    padding: 22px 20px;
  }

  main .main-inner .white-wrapper h2 span {
    display: block;
    padding-left: 0;
    margin-top: 6px;
  }

  main .main-inner .white-wrapper .dl-wrapper {
    display: block;
    padding: 20px;
  }

  main .main-inner .white-wrapper dl {
    display: block;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }

  main .main-inner .white-wrapper dl:last-child {
    border-bottom: 0;
  }

  main .main-inner .white-wrapper dl dt,
  main .main-inner .white-wrapper dl dd {
    width: 100%;
  }

  main .main-inner .white-wrapper dl dt {
    margin-bottom: 4px;
  }

  footer .inner {
    width: 100%;
    display: block;
    margin-top: 36px;
  }

  footer .inner nav,
  footer .inner .copyright {
    width: 100%;
    text-align: left;
  }

  footer .inner nav a {
    display: block;
    padding: 6px 0;
  }

  footer .inner .copyright {
    margin-top: 20px;
  }

  .btn,
  .btn.btn-operation,
  form .form-btn,
  #news-single .btn,
  .common-single .backto-btn-wrapper {
    width: 100%;
    /* max-width: 320px; */
  }

  #news-single,
  .common-finish,
  .common-list,
  .common-form,
  .common-single {
    width: 100%;
  }

  #news-single h1,
  .common-list h1,
  .common-form h1,
  .common-single h1,
  .common-finish h1 {
    font-size: 24px;
    line-height: 1.4;
    margin: 16px 0 10px 0 ;
  }

  .icon-favorite,
  #icon-favorite {
    width: 30px;
    height: 30px;
  }

  #news-single .body,
  .common-single .content {
    padding: 28px 20px;
    margin-top: 28px;
    font-size: 14px;
  }

  .common-list .archive-list,
  .common-form .archive-list {
    padding: 18px 20px;
  }

  .common-list form,
  .common-form form {
    padding: 24px 20px;
    margin-top: 28px;
  }

  .common-list form .c-contact-form-item,
  .common-form form .c-contact-form-item {
    display: block;
    margin-bottom: 20px;
  }

  .common-list form .c-contact-form-item label,
  .common-form form .c-contact-form-item label {
    width: 100%;
    height: auto;
    line-height: 1.5;
    margin-bottom: 8px;
    display: block;
  }

  .common-list form .c-contact-form-item .c-contact-form-item__input,
  .common-form form .c-contact-form-item .c-contact-form-item__input,
  .common-list form .c-contact-form-item .c-contact-form-item__content,
  .common-form form .c-contact-form-item .c-contact-form-item__content,
  .common-list form .c-contact-form-item textarea,
  .common-form form .c-contact-form-item textarea {
    width: 100%;
  }

  .common-list .pagination .page-numbers,
  .common-form .pagination .page-numbers {
    width: 42px;
    height: 42px;
    line-height: 42px;
  }

  main .main-inner .white-wrapper .history-inner {
    padding: 0 20px 32px;
  }

  main .main-inner .white-wrapper .history-inner .attendance-wrapper {
    display: block;
  }

  main .main-inner .white-wrapper .history-inner .subject-attendance {
    width: 100%;
    margin-right: 0;
    margin-bottom: 24px;
  }

  main .main-inner .white-wrapper .graph-inner .credit-graph-layout {
    padding: 32px 20px;
  }

  main .main-inner .white-wrapper .graph-inner .credit-pie--main {
    width: 200px;
    height: 200px;
  }

  main .main-inner .white-wrapper .graph-inner .credit-side__item {
    align-items: flex-start;
  }

  main .main-inner .white-wrapper .graph-inner .credit-pie--riron,
  main .main-inner .white-wrapper .graph-inner .credit-pie--jitsugi {
    width: 80px;
    height: 80px;
  }

  main .main-inner .white-wrapper .graph-inner .credit-main__text {
    font-size: 18px;
  }

  main .main-inner .white-wrapper .graph-inner .credit-side__text p {
    font-size: 15px;
  }

  #archive-whitepaper .main-inner .nav {
    padding: 28px 20px 24px;
  }

  #archive-whitepaper .main-inner .nav a {
    display: inline-block;
    margin-bottom: 10px;
    padding: 12px 16px;
  }

  #archive-whitepaper .main-inner .white-wrapper .description,
  #archive-whitepaper .main-inner .white-wrapper .whitepaper-row,
  #archive-whitepaper .main-inner .white-wrapper .empty {
    padding: 22px 20px;
  }

  #archive-elearning .elearning-row {
    display: block;
    width: calc(100% - 40px);
    margin-left: 20px;
    padding: 16px 0;
  }

  #archive-elearning .elearning-row .elm.title,
  #archive-elearning .elearning-row .elm.description,
  #archive-elearning .elearning-row .elm.button-area,
  #archive-elearning .elearning-row .elm.view-area {
    width: 100%;
    text-align: left;
  }

  #archive-elearning .elearning-row .elm.description {
    margin: 6px 0 12px;
  }

  #archive-elearning .elearning-row .elm.button-area a,
  #archive-elearning .elearning-row .elm.view-area a {
    width: 100%;
    margin-top: 8px;
  }

  #single-elearning-child .video-wrapper {
    aspect-ratio: 16 / 9;
  }

  form .choice-item {
    font-size: 15px;
    align-items: flex-start;
  }

  form .choice-check {
    width: 24px;
    height: 24px;
    margin-top: 1px;
  }
}


/* ==============================
   SP ハンバーガーメニュー
============================== */

.hamburger-btn {
  display: none;
}

@media screen and (max-width: 768px) {

  header.site-header {
    position: relative;
    z-index: 10000;
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* --------------------
     ハンバーガー
  -------------------- */

  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 10002;
  }

  /* 閉じているときは白 */
  .hamburger-btn span {
    display: block;
    width: 28px;
    height: 2px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 2px;
    transition:
      transform .25s ease,
      opacity .25s ease,
      background-color .25s ease;
  }

  /* メニューを開いたときは青 */
  .hamburger-btn.is-open span {
    background-color: #1C46F5;
  }

  .hamburger-btn.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger-btn.is-open span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-btn.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* --------------------
     メニュー全体
  -------------------- */

  header .global-nav {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    margin: 0;
    padding: 100px 24px 40px;
    background-color: #fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 10001;
    overflow-y: auto;
  }

  header .global-nav.is-open {
    transform: translateX(0);
  }

  header .global-nav__list {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  header .global-nav__item {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #E5E5E5;
  }

  header .global-nav__item > a {
    position: relative;
    display: block;
    width: calc(100% - 70px);
    padding: 16px 56px 16px 0;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    box-sizing: border-box;
  }

  header .global-nav__item > a span {
    display: none;
  }

  /* --------------------
     ＋／−アイコン
  -------------------- */

  header .global-nav__item.has-dropdown > a::before,
  header .global-nav__item.has-dropdown > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -62px;
    width: 16px;
    height: 2px;
    background-color: #1C46F5;
    transform-origin: center;
    transition:
      opacity .25s ease,
      transform .25s ease;
  }

  /* 横線 */
  header .global-nav__item.has-dropdown > a::before {
    transform: translateY(-50%);
  }

  /* 縦線 */
  header .global-nav__item.has-dropdown > a::after {
    transform: translateY(-50%) rotate(90deg);
  }

  /*
   * 開いたときは縦線を非表示にして「−」にする
   * JSが付けているクラス名に合わせて両方対応
   */
  header .global-nav__item.has-dropdown.is-open > a::after,
  header
    .global-nav__item.has-dropdown.is-accordion-open
    > a::after {
    opacity: 0;
    transform: translateY(-50%) rotate(90deg);
  }
  

  /* --------------------
     子メニュー
  -------------------- */

  header .global-nav__dropdown {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 12px 20px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  header
    .global-nav__item.is-open
    > .global-nav__dropdown,
  header
    .global-nav__item.is-accordion-open
    > .global-nav__dropdown {
    display: block;
  }

  header .global-nav__dropdown li {
    width: 100%;
    margin: 0;
    border: 0;
    text-align: left;
  }

  header .global-nav__dropdown li + li {
    margin-top: 0;
  }

  header .global-nav__dropdown a {
    display: block;
    width: 100%;
    padding: 10px 0;
    color: #555;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
  }

  header .global-nav__dropdown a:hover {
    color: #1C46F5;
    background: transparent;
  }

  body.is-menu-open {
    overflow: hidden;
  }

  body.is-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 10000;
  }

    /* スマホではPC用のhover開閉を無効化 */
  header .global-nav__item.has-dropdown:hover > .global-nav__dropdown {
    display: none;
  }

  /* is-openが付いている場合だけ表示 */
  header .global-nav__item.has-dropdown.is-open > .global-nav__dropdown {
    display: block;
  }

}