@charset "UTF-8";

/* app-section */
@media all {
  .app-dl {
    display: flex;
    flex-wrap: wrap;
  }
  .app-dt {
    padding: 3rem;
    font-weight: bold;
    text-align: center;
  }
  .app-dt p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      -60deg,
      rgba(0, 97, 162, 1) 31.71%,
      rgba(0, 139, 194, 1) 100%
    );
    border-radius: 5rem;
    color: #fff;
    line-height: 1.5;
  }
  .app-dd {
    border-top: 2rem dotted var(--table-lightblue);
  }
  .app-dl .app-dd:last-child {
    border-bottom: 2rem dotted var(--table-lightblue);
  }
  .button.app-required-notice::before,
  .button.app-required-notice > span {
    border-radius: 10em;
  }
  .app-required-list {
    display: flex;
    flex-wrap: wrap;
  }
  .button.app-required-notice > span,
  .app-dd .button {
    padding-left: 0;
    justify-content: center;
  }
  .app-required-item::before {
    content: "●";
    display: inline-block;
    margin-right: 1em;
    color: var(--main-red);
    font-size: 50%;
    transform: translateY(-0.25em);
  }

  .app-required-check-btn {
    display: flex;
    align-items: center;
  }
  .btn-deco {
    position: relative;
    font-weight: bold;
    color: var(--main-blue);
  }
  .btn-deco::before,
  .btn-deco::after {
    content: "";
    position: absolute;
    display: block;
    width: 27rem;
    height: 2rem;
    background: linear-gradient(to left, #f00, #b507de, #00a2e7);
    transform-origin: left center;
  }

  .app-range-img-btn {
    display: flex;
    align-items: flex-end;
  }
  .app-notice-list {
    margin-top: 1em;
    line-height: 1.5;
  }
  .app-notice-item {
    color: var(--table-lightblue);
  }
  .app-notice-item.red {
    color: var(--main-red);
  }
  .app-notice-item + .app-notice-item {
    margin-top: 0.5em;
  }

  .application-aside {
    text-align: center;
  }
  .application-aside .button {
    justify-content: center;
  }
  .application-aside .button > span {
    padding: 0;
  }

  .app-range-notice {
    margin-top: 1em;
    color: var(--main-blue);
    line-height: 2;
  }
  .app-range-notice a {
    color: var(--main-blue);
    text-decoration: underline;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .app-section {
      margin-top: 30rem;
    }

    .app-dl {
      margin-top: 30rem;
    }
    .app-dt {
      width: 70rem;
      font-size: 13rem;
    }
    .app-dt p {
      font-weight: 400;
    }
    .app-dd {
      padding: 10rem 0 10rem 15rem;
      width: calc(100% - 70rem);
      font-size: 14rem;
      line-height: 32rem;
    }

    .app-dd .button.app-required-notice {
      width: 260rem;
      height: 26rem;
    }
    .app-required-list {
      margin-top: 15rem;
    }
    .app-required-item {
      width: 50%;
      line-height: 1.9;
    }

    .app-required-check-btn {
      margin: 30rem 0 10rem;
    }
    .app-dd .button {
      width: 124rem;
      height: 36rem;
    }
    .btn-deco {
      padding-left: 28rem;
      font-size: 12rem;
      line-height: 18rem;
    }
    .btn-deco::before,
    .btn-deco::after {
      left: 24rem;
    }
    .btn-deco::before {
      top: 0;
      rotate: -25deg;
    }
    .btn-deco::after {
      bottom: 0;
      rotate: 25deg;
    }

    .app-range-img-btn {
      margin-top: 10rem;
    }
    .app-range-img-btn > img {
      margin-right: 20rem;
      width: 110rem;
    }

    .app-notice-list {
      margin-top: 0;
      font-size: 12rem;
      line-height: 22rem;
    }
    .app-notice-item + .app-notice-item {
      margin-top: 0;
    }

    .application-aside,
    .cbt-exam-btn {
      margin: 80rem auto;
    }
    .application-aside .button,
    .cbt-exam-btn .button {
      width: 250rem;
      height: 60rem;
      font-size: 16rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    section.main-section {
      margin-top: 100rem;
    }

    .app-dl {
      margin-top: 50rem;
    }
    .app-dt {
      width: 180rem;
    }
    .app-dd {
      padding: 22rem 20rem;
      width: calc(100% - 180rem);
    }

    .app-dd .button.app-required-notice {
      width: 300rem;
      height: 30rem;
    }

    .app-required-list {
      margin-top: 20rem;
    }
    .app-required-item {
      width: 192rem;
      line-height: 2;
    }

    .app-dd .button {
      width: 200rem;
      height: 40rem;
    }

    .app-required-check-btn {
      margin-top: 50rem;
    }
    .btn-deco {
      padding-left: 40rem;
      font-size: 14rem;
      line-height: 22rem;
    }
    .btn-deco::before,
    .btn-deco::after {
      left: 28rem;
    }
    .btn-deco::before {
      top: 0;
      rotate: -25deg;
    }
    .btn-deco::after {
      bottom: 0;
      rotate: 25deg;
    }
    .lineheight > p {
      line-height: 2.5;
    }

    .app-range-img-btn {
      margin-top: 20rem;
    }
    .app-range-img-btn > img {
      margin-right: 20rem;
      width: 142rem;
    }

    .app-notice-list {
      font-size: 14rem;
    }

    .application-aside {
      margin: 100rem auto;
    }
    .application-aside .button {
      width: 320rem;
      height: 80rem;
      font-size: 20rem;
    }

    .app-range-notice a {
      transition: opacity 0.3s;
    }
    .app-range-notice a:hover {
      opacity: 0.7;
    }
  }
}

/* flow-section */
@media all {
  .flow-section {
    background-color: var(--bg-lightblue);
  }

  .flow-item {
    background-color: #fff;
  }
  .flow-item-no,
  .flow-item-ttl {
    font-family: var(--lineseed);
    font-weight: bold;
  }
  .flow-item-no {
    position: relative;
    display: inline-block;
    --rainbow-text-end: 85%;
  }
  .flow-item-no::after {
    content: "●";
    position: absolute;
    z-index: 3;
    left: 50%;
    color: #00a2e7;
  }
  .flow-item:nth-child(2) .flow-item-no::after {
    color: #5b54e2;
  }
  .flow-item:nth-child(3) .flow-item-no::after {
    color: #b507de;
  }
  .flow-item:nth-child(4) .flow-item-no::after {
    color: #d90472;
  }
  .flow-item:nth-child(5) .flow-item-no::after {
    color: #f00;
  }

  .flow-item-period {
    font-weight: bold;
    color: var(--main-blue);
  }
  .flow-item-txt a {
    text-decoration: underline;
  }

  .flow-item .flow-line {
    position: absolute;
    z-index: 1;
    display: block;
    height: max(1px, 1rem);
    background: #999;
    width: 0;
    transition: width 0.25s;
  }
  .flow-item:nth-child(1) .flow-line {
    background: linear-gradient(to right, #00a2e7, #5b54e2);
  }
  .flow-item:nth-child(2) .flow-line {
    background: linear-gradient(to right, #5b54e2, #b507de);
  }
  .flow-item:nth-child(3) .flow-line {
    background: linear-gradient(to right, #b507de, #d90472);
  }
  .flow-item:nth-child(4) .flow-line {
    background: linear-gradient(to right, #d90472, #f00);
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .flow-section {
      padding: 60rem 25rem;
    }

    .flow-list {
      margin-top: 40rem;
    }

    .flow-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: wrap;
      padding-left: 10rem;
      border-radius: 7rem;
      height: 100rem;
    }
    .flow-item + .flow-item {
      margin-top: 15rem;
    }
    .flow-item-no {
      margin-right: 50rem;
      padding: 32.5rem 0;
      width: 50rem;
      font-size: 35rem;
    }
    .flow-item-no::after {
      top: 45rem;
      left: 62rem;
      font-size: 15rem;
    }
    .flow-item-ttl,
    .flow-item-period,
    .flow-item-txt {
      width: calc(100% - 100rem);
    }

    .flow-item-period,
    .flow-item-txt {
      padding-left: 18rem;
    }
    .flow-item-ttl {
      margin-top: 5rem;
      font-size: 18rem;
    }
    .flow-item-img {
      position: absolute;
      top: 14rem;
      right: -10rem;
      width: 90rem;
      height: 85rem;
    }

    .flow-item-period {
      margin-top: 3rem;
    }
    .flow-item-period p {
      margin-top: 10rem;
    }
    .flow-item-period p:not(:first-child) {
      display: inline-block;
    }

    .flow-item-txt {
      margin-top: 6rem;
      line-height: 24rem;
    }

    .flow-item .flow-line {
      top: 50rem;
      left: 69rem;
      transition-timing-function: ease;
      transition: width 0.75s;
      transform: rotate(90deg);
      transform-origin: left center;
    }
    .flow-line.animated {
      width: 120rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .flow-section {
      padding: 60rem 0 80rem;
      text-align: center;
    }

    .flow-list {
      display: flex;
      justify-content: space-between;
      margin-top: 50rem;
    }

    .flow-item {
      padding-top: 25rem;
      border-radius: 10rem;
      width: 185rem;
      height: 320rem;
    }
    .flow-item-no {
      font-size: 40rem;
    }
    .flow-item-no::after {
      bottom: -43rem;
      font-size: 15rem;
    }
    .flow-line {
      bottom: -36rem;
      left: calc(50% + 8rem);
      transition-timing-function: linear;
    }
    .flow-item:nth-child(1) .flow-line {
      transition-timing-function: ease-in;
      transition-duration: 0.3s;
    }
    .flow-item:nth-child(2) .flow-line {
      transition-delay: 0.3s;
    }
    .flow-item:nth-child(3) .flow-line {
      transition-delay: 0.55s;
    }
    .flow-item:nth-child(4) .flow-line {
      transition-delay: 0.8s;
      transition-duration: 0.3s;
      transition-timing-function: ease-out;
    }
    .flow-line.animated {
      width: 200rem;
    }
    .flow-item-ttl {
      margin-top: 70rem;
      margin-bottom: 30rem;
      font-size: 22rem;
    }
    .flow-item-period > p {
      font-size: 18rem;
      line-height: 32rem;
      white-space: nowrap;
    }
    .pc-90deg {
      rotate: 90deg;
    }
    .flow-item-img img {
      margin-top: 10rem;
      width: 150rem;
    }
    .flow-item-txt {
      line-height: 28rem;
    }
    .flow-item-txt a {
      transition: opacity 0.3s;
    }
    .flow-item-txt a:hover {
      opacity: 0.7;
    }
  }
}

/* cbt-section */
@media all {
  .cbt-content-ttl {
    font-family: var(--lineseed);
    font-weight: bold;
    color: var(--main-blue);
  }

  .cbt-exam-btn {
    text-align: center;
  }
  .cbt-exam-btn .button {
    justify-content: center;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .cbt-section {
      padding: 60rem 0 0;
    }
    .cbt-content-ttl {
      font-size: 20rem;
      text-align: center;
    }
    .cbt-content-txt {
      margin-top: 30rem;
      padding: 0 25rem;
    }
    .cbt-content-pc_right {
      display: block;
      margin-top: 40rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .cbt-section {
      margin-top: 80rem;
    }
    .cbt-content {
      display: flex;
      justify-content: space-between;
      margin-top: 50rem;
    }
    .cbt-content-pc_left {
      width: 520rem;
    }
    .cbt-content-ttl {
      font-size: 22rem;
    }
    .cbt-content-txt {
      margin-top: 20rem;
    }
    .cbt-content-txt > p {
      line-height: 2.5;
    }

    .cbt-content-pc_right {
      width: 420rem;
      clip-path: polygon(28rem 0, 100% 0, 100% 100%, 0 100%);
    }
    .cbt-exam-btn {
      margin: 100rem 0;
    }
    .cbt-exam-btn .button {
      width: 320rem;
      height: 80rem;
      font-size: 20rem;
    }
  }
}

/* exam-section */
@media all {
  .exam-section {
    margin-top: 0;
  }
  .exam-section-inner {
    position: relative;
    background-color: #fff;
  }
  .exam-section-header {
    position: relative;
  }
  .exam-ttl-notice {
    position: absolute;
    top: 1em;
    right: 1em;
    color: var(--txt-gray);
  }
  .exam-item {
    overflow: hidden;
    position: relative;
    background-color: #fff;
  }
  .exam-item-ttl {
    display: flex;
    align-items: center;
  }
  .q-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
  }
  .q-num-xx {
    display: inline-block;
    margin-left: 0.25em;
    padding-right: 0.5em;
    font-family: var(--montserrat);
  }
  .q-ttl {
    display: inline-block;
    margin-left: 0.5em;
  }
  .a-list {
    counter-reset: cnt;
    padding-top: 1.5em;
    padding-left: 1.25em;
  }
  .a-item {
    counter-increment: cnt;
    position: relative;
    padding-left: 1.25em;
  }
  .a-item::before {
    content: counter(cnt) ".";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  .exam-item-content,
  .answer-content {
    display: none;
  }
  .exam-item-opener {
    position: absolute;
  }

  /* pass-status SP にも流用 */
  .answer-button {
    position: relative;
    display: block;
    margin: 0 auto;
    border: none;
    border-radius: 10em;
  }
  .button.answer-button::after {
    content: none;
  }
  .answer-button > span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10em;
    background-color: #fff;
    color: var(--txt);
  }

  .answer-content {
    background-color: #fdf2f3;
  }
  .answer-detail {
    position: relative;
    padding-left: 1.5em;
  }
  .answer-no {
    position: absolute;
    top: 0;
    left: 0;
  }

  .exam-content-btn,
  .data-content-btn {
    position: absolute;
    z-index: 10;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .exam-section {
      padding: 60rem 0;
    }
    .exam-section-inner {
      padding: 70rem 25rem 40rem;
      box-shadow: 3rem 2rem 3rem rgba(0, 0, 0, 0.15);
    }
    .exam-ttl-notice {
      position: absolute;
      top: -25rem;
      right: 0;
      font-size: 11rem;
    }

    .exam-content {
      margin-top: 35rem;
    }

    .exam-item {
      border-radius: 7rem;
      box-shadow: 2rem 2rem 6rem 0rem rgba(0, 0, 0, 0.3);
    }
    .exam-item + .exam-item {
      margin-top: 12rem;
    }
    .exam-item-opener {
      aspect-ratio: unset;
      top: 14rem;
      right: 10rem;
      width: 20rem;
      height: 20rem;
    }

    .q-ttl {
      padding-right: 2.5em;
      font-size: 16rem;
      line-height: 1.2;
    }
    .q-ttl .sp-small {
      display: inline-block;
      font-size: 14rem;
      padding-right: 1em;
    }
    .q-num {
      flex-shrink: 0;
      width: 90rem;
      height: 48rem;
      font-size: 12rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 13rem) 100%, 0 100%);
    }
    .q-num-xx {
      font-size: 16rem;
    }
    .q-text,
    .a-list,
    .answer-content {
      padding: 0 15rem;
      line-height: 2;
    }
    .q-text {
      margin-top: 20rem;
    }
    .a-list {
      margin-top: 10rem;
      padding-left: 2em;
    }

    /* pass-status SP にも流用 */
    .answer-button {
      margin: 20rem auto;
      width: 160rem;
      height: 36rem;
      box-shadow: 3rem 2rem 3rem rgba(0, 0, 0, 0.3);
    }
    .answer-button > span {
      top: max(1px, 1rem);
      left: max(1px, 1rem);
      padding-right: 1.5em;
      width: calc(100% - max(2px, 2rem));
      height: calc(100% - max(2px, 2rem));
    }
    .answer-button .open-close {
      right: 7rem;
      width: 18rem;
      height: 18rem;
      font-size: 12rem;
    }
    .answer-content {
      margin: 0 auto 30rem;
      width: 320rem;
      padding: 15rem;
    }

    .exam-content-btn,
    .data-content-btn {
      left: calc(50% - 100rem);
      bottom: -23rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .exam-section {
      padding: 100rem 0 120rem;
    }
    .exam-section-inner {
      margin: 0 auto;
      padding: 70rem 80rem 80rem;
      width: 1000rem;
      box-shadow: 5rem 5rem 5rem rgba(0, 0, 0, 0.15);
    }
    .exam-section-header {
      margin: 0 auto;
      width: 660rem;
    }
    .exam-section-ttl {
      font-size: 28rem;
    }
    .exam-ttl-notice {
      top: -25rem;
      font-size: 12rem;
    }

    .exam-content {
      margin-top: 60rem;
    }

    .exam-item {
      border-radius: 10rem;
      box-shadow: 3rem 2rem 5rem 2rem rgba(0, 0, 0, 0.3);
    }
    .exam-item + .exam-item {
      margin-top: 20rem;
    }
    .exam-item-ttl:hover {
      cursor: pointer;
    }
    .exam-item-opener {
      top: 15rem;
      right: 15rem;
      width: 30rem;
      height: 30rem;
      transition: opacity 0.3s;
    }
    .exam-item-opener:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .q-ttl {
      font-size: 22rem;
    }
    .q-num {
      width: 145rem;
      height: 60rem;
      font-size: 16rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 20rem) 100%, 0 100%);
    }
    .q-num-xx {
      font-size: 32rem;
    }
    .q-text,
    .a-list,
    .answer-content,
    .q-img {
      margin: 0 auto;
      width: 740rem;
      line-height: 2.125;
    }
    .q-img {
      margin-top: 1em;
    }

    .q-text {
      margin-top: 30rem;
    }

    .answer-button {
      margin: 30rem auto;
      width: 200rem;
      height: 40rem;
      box-shadow: 3rem 2rem 3rem rgba(0, 0, 0, 0.3);
      transition: opacity 0.3s;
    }
    .answer-button:hover {
      opacity: 0.7;
      cursor: pointer;
    }
    .answer-button > span {
      top: max(1px, 1rem);
      left: max(1px, 1rem);
      padding-left: 0;
      padding-right: 1em;
      width: calc(100% - max(2px, 2rem));
      height: calc(100% - max(2px, 2rem));
      transition: 0.3s;
    }
    .answer-button .open-close {
      right: 8rem;
      width: 20rem;
      height: 20rem;
      font-size: 13rem;
    }

    .answer-content {
      margin-bottom: 40rem;
      padding: 20rem 30rem;
    }

    .exam-content-btn {
      left: calc(50% - 100rem);
      bottom: -30rem;
    }
  }
}

/* etc. */
@media all {
  /* sp */
  @media only screen and (max-width: 767px) {
    aside.data-section {
      padding: 80rem 25rem 190rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .site-footer {
      margin-top: 70rem;
    }
  }
}

/* template-section */
@media all {
  /* sp */
  @media only screen and (max-width: 767px) {
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
  }
}