@charset "UTF-8";

/* =============================================================================

Practice CSS

・トップページ用CSS「.practice-×××」

上記はここに記述する

============================================================================= */

@keyframes practice_l-btn-spin {
  to {
    transform:rotate(1turn);
  }
}
.practice_l-btn {
  display:flex;
  justify-content: center;
  align-items: center;
  margin-inline:auto;
  --bw:.4rem;
  width:30.4rem;
  height:6.8rem;
  font-size:2.4rem;
  font-weight:700;
  letter-spacing: .1em;
  overflow:hidden;
  border-radius:100px;
  position:relative;
  z-index:1;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);

  @media (width <= 767px) {
    width:28.0rem;
    height:5.6rem;
    font-size:1.8rem;
  }
  &::before,&::after {
    content:"";
    display:block;
    z-index:-1;
    position:absolute;
  }
  &::before {
    width:100%;
    aspect-ratio:1;
    animation:practice_l-btn-spin 5s infinite linear;
    background-image:linear-gradient(
      to right,
      #9BD7F5 0,
      #FF80B1 100%
    );
  }
  &::after {
    inset:var(--bw);
    border-radius:inherit;
    background-color:#fff;
  }

  > i {
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    width:3.0rem;
    height:auto;
    aspect-ratio:1;
    background-color:var(--cc-navy-B);
    color:#fff;
    position:absolute;
    @media (width <= 767px) {
      width:2.6rem;
    }


    &:first-child {
      left:2.0rem;
      @media (width <= 767px) {
        left:1.6rem;
      }
    }
    &:last-child {
      right:2.0rem;
      @media (width <= 767px) {
        right:1.6rem;
      }
    }

    &.bottom {
      transform:rotate(90deg);
    }
    &.left {
      transform:rotate(180deg);
    }
  }
}


.practice-header {
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  height:22.0rem;

  @media (width <= 767px) {
    height:14.0rem;
  }
}

@scope (.practice-contents_wrap) to (.practice-contents_inner) {
  :scope {
    padding-block:10.0rem;


    @media (width <= 767px) {
      padding-block:6.0rem 8.0rem;
    }
  }

  .heading {
    display:flex;
    align-items:center;
    margin-inline:auto;
    margin-bottom:3.2rem;
    width:fit-content;
    font-size:3.6rem;
    line-height:1;
    letter-spacing:0.05em;
    text-align:center;
    position:relative;

    @media (width <= 767px) {
      margin-bottom:2.0rem;
      font-size:2.8rem;
    }

    img {
      position:absolute;
      left:-5.2rem;
      @media (width <= 767px) {
        left:-2.8rem;
      }
    }
  }
  
  .desc {
    text-align:center;
    font-size:1.8rem;
    letter-spacing:0.05em;
    @media (width <= 767px) {
      font-size:1.6rem;
    }
  }
}


@scope (.practice-contents_inner) {
  :scope {
    margin-top:5.2rem;
    background-color:#fff;
    border:1.0rem solid #EBD5A4;

    @media (width > 767px) {
      padding-bottom:8.0rem;
      padding-inline:10.0rem;
    }
    @media (width <= 767px) {
      border-width:.5rem;
      padding-inline:1.5rem;
      margin-top:4.0rem;
      padding-bottom:4.0rem;
    }
  }

  @scope (.intro) {
    :scope {
      display:flex;
      justify-content:center;
      align-items:center;
      margin-block:5.2rem 4.0rem;
      min-height:54.0rem;

      @media (width <= 767px) {
        min-height:48.8rem;
        margin-inline:-1.5rem;
      }
    }

    .text {
      text-align:center;
      font-weight:700;
      font-size:2.0rem;
      line-height:1.5;
      letter-spacing:0.05em;
      text-align:center;
      @media (width <= 767px) {
        font-size:1.4rem;
      }

      p {
        &:not(:first-child) {
          margin-top:1lh;
          @media (width <= 767px) {
            margin-top:1em;
          }
        }
        &:last-of-type {
          margin-top:1em;
          font-size:2.8rem;
          @media (width <= 767px) {
            font-size:1.8rem;
          }
        }
      }
    }

    .m-abs_bg {
      img {
        @media (width > 767px) {
          width:93.2rem
        }
        @media (width <= 767px) {
          width:34.0rem;
          margin-left:.5rem;
        }
      }
    }

    .practice_l-btn {
      margin-top:4.0rem;
      @media (width <= 767px) {
        margin-top:2.4rem;
      }
    }
  }

  @scope (.question) {
    :scope {
      display:grid;
      gap:4.0rem;
      padding-top:8.0rem;

      @media (width <= 767px) {
        gap:2.4rem;
        padding-top:4.0rem;
      }
    }

    .img {
      @media (width > 767px) {
      }
      @media (width <= 767px) {
        margin-inline:-1.5rem;
      }
    }
    .desc {
      text-align:center;
      font-weight:700;
      font-size:2.0rem;
      letter-spacing:0.1em;
      line-height:1.8;
      @media (width > 767px) {
      }
      @media (width <= 767px) {
        font-size:1.6rem;
        line-height:1.6;
        margin-inline:-1.5rem;
      }
    }
  }

  @scope (.input_form) {
    @scope (.input_wrap) {
      :scope {
        display:flex;
        justify-content:center;
        align-items:center;
        gap:1.0rem;
        @media (width <= 767px) {
          gap:2.0rem;
          flex-direction:column;
        }
      }

      .item {
        display:flex;
        align-items:end;
        gap:1.0rem;
        @media (width <= 767px) {
          width:100%;

          &:has(.append) {
            .input {
              flex:0 0 23.0rem;
            }
          }
        }

        .append {
          padding-bottom:1.6rem;
          font-size:1.6rem;
          font-weight:700;
          letter-spacing:0.1em;
        }
      }
      .input {
        flex:1;
        @media (width > 767px) {
          width:30.8rem;
          &:first-child:last-child {
            width:53.0rem;
          }
        }

        .balloon {
          margin-bottom:1.5rem;
          font-weight:700;
          padding:.8rem;
          text-align:center;
          font-size:1.4rem;
          line-height:1;
          letter-spacing:0.05em;
          color:#fff;
          background-color:#6D6D6D;
          position:relative;
          @media (width <= 767px) {
            margin-bottom:.8rem;
            font-size:1.2rem;
          }

          &::after {
            content:"";
            margin-inline:auto;
            width:1.4rem;
            height:calc(.8rem + 1px);
            background-color:#6D6D6D;
            clip-path:polygon(0% 0,100% 0%,50% 100%);
            position:absolute;
            top:calc(100% - 1px);
            inset-inline:0;
            @media (width <= 767px) {
              width:1.2rem;
              height:calc(.6rem + 1px);
            }
          }
        }

        input {
          border:2px solid var(--cc-navy-B);
          box-shadow:inset 3px 3px 0 rgb(from #000000 r g b / .16);
          border-radius:3px;
          padding:1.5rem;
          font-size:16px;
          line-height:1;
          background-color:#fff;
          width:100%;
          transition-property:border-color,box-shadow,background-color,color;
          transition-duration:.3s;

          &::placeholder {
            opacity:.26;
          }

          &:focus {
            border-color:#25B8E3;
            box-shadow:inset 3px 3px 0 rgb(from #25B8E3 r g b / .26);
            background-color:#F0FAFF;
          }

          &:disabled {
            border-color:#cbcbcb;
            box-shadow:inset 0px 0px 0 rgb(from #000 r g b / .26);
            background-color:#ccc;
            color:#fff;
          }
        }
        &:has(.error) input {
          border-color:#EB4D4D;
          box-shadow:inset 3px 3px 0 rgb(from #EB4D4D r g b / .26);
          background-color:rgb(from #EB4D4D r g b / .16);
        }
        .error {
          position:absolute;
          color:#EB4D4D;

          @media (width <= 767px) {
            font-size:1.2rem;
            line-height:1.4;
          }
        }
      }
    }
    .submit {
      display:flex;
      justify-content:center;
      align-items:center;
      margin-inline:auto;
      margin-top:3.0rem;
      background-color:var(--cc-navy-A);
      color:#fff;
      border-radius:3px;
      width:20.0rem;
      height:5.6rem;
      font-size:2.0rem;
      letter-spacing: .2em;
      transition-property:background-color,filter,opacity;
      transition-duration:.3s;
      @media (width <= 767px) {
        margin-top:2.4rem;
        width:18.0rem;
        height:4.8rem;
        font-size:1.8rem;
      }
      

      &:disabled {
        background-color:#ccc;
        pointer-events: none;
      }
    }
  }

  .hints {
    display:grid;
    gap:2.4rem;
    @media (width <= 767px) {
      gap:1.6rem;
    }
  }
  @scope (.hints > .item) {
    :scope {
      --my-color:var(--cc-yellow-A);
      border:2px solid var(--my-color);
      border-radius:1.0rem;
      box-shadow:0 2px 3px rgba(0,0,0,.16);
      background-color:#fff;
      overflow:clip;
      font-size:2.0rem;
      line-height:1.5;
      letter-spacing:0.05em;
      background-color:var(--my-color);
      @media (width <= 767px) {
        font-size:1.6rem;
      }

      &.-answer {
        --my-color:#EB4D4D;
      }
    }

    @scope (.q) {
      :scope {
        display:flex;
        justify-content:start;
        align-items:center;
        gap: 2.4rem;
        border-radius:1.0rem;
        padding:2.0rem 3.0rem;
        font-weight:700;
        color:#fff;
        cursor:pointer;
        background-color:var(--my-color);
        &::before {
          flex-shrink:0;
        }
        @media (width <= 767px) {
          gap: 1.2rem;
          padding:1.2rem 1.6rem;
        }
      }

      .m-i-bf-p_q {
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius:50%;
        width:4.0rem;
        height:auto;
        aspect-ratio:1;
        background-color:#fff;
        @media (width <= 767px) {
          width:3.0rem;
        }
        &::before {
          background-color:var(--my-color);
        }
      }

      > span {
      }

      .status {
        flex-shrink:0;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-left:auto;
        margin-block:auto;
        border-radius:50%;
        flex-shrink:0;
        width:calc(3.0rem + 2px);
        height:auto;
        background-color:var(--cc-navy-B);
        aspect-ratio:1/1;
        @media (width <= 767px) {
          width:calc(2.4rem + 2px);
        }

        &::before,&::after {
          content:"";
          display:block;
          width:calc(1.6rem + 2px);
          height:2px;
          background-color:#fff;
          transition-property:transform;
          transition-duration:.3s;
          position:absolute;
          @media (width <= 767px) {
            width:calc(1.2rem + 2px);
          }
        }
        &::after {
          transform:rotate(90deg);
        }
        .item[open] & {
          &::before,&::after {
            transform:rotate(180deg);
          }
        }
      }
    }

    &::details-content {
      transition-property:content-visibility;
      transition-duration:.3s;
      transition-behavior:allow-discrete;
      content-visibility:hidden;
    }
    &:is([open])::details-content {
      content-visibility:visible;
    }

    @scope (.dc) {
      :scope {
        display:grid;
        background-color:#fff;
        grid-template-rows:0fr;
        transition-property:grid-template-rows;
        transition-duration:.3s;
        transition-behavior:allow-discrete;
      }
      :is([open]) & {
        grid-template-rows:1fr;
      }
      @starting-style {
        :is([open]) & {
          grid-template-rows:1fr;
        }
        :is([open]) & {
          grid-template-rows:0fr;
        }
      }

      .inner {
        overflow:hidden;
      }
    }

    @scope (.a) {
      :scope {
        grid-row:1/-1;
        display:flex;
        align-items:start;
        gap:2.8rem;
        padding:2.0rem 3.0rem;
        @media (width <= 767px) {
          padding:1.2rem 1.6rem;
          font-size:1.4rem;
        }
      }
    }
  }


  @scope (.answer) {
    :scope {
      display:grid;
      gap:3.0rem;
      padding-block:10.0rem .4rem;
      font-weight:700;

      @media (width <= 767px) {
        gap:2.4rem;
        padding-top:4.0rem;
      }
    }

    .comment {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:4.8rem;
      margin-bottom:-1.0rem;
      font-size:2.0rem;
      line-height:1.8;
      position:relative;
      text-align:center;

      @media (width <= 767px) {
        gap:1.6rem;
        margin-bottom:-.5rem;
        font-size:1.6rem;
        line-height:1.6;
      }

      &::before,
      &::after {
        flex-shrink:0;
        content:"";
        height:2lh;
        width:1px;
        background-color:var(--cc-yellow-A);
      }
      &::before {
        transform:rotate(-30deg);
        @media (width <= 767px) {
          transform:rotate(-20deg);
        }
      }
      &::after {
        transform:rotate(30deg);
        @media (width <= 767px) {
          transform:rotate(20deg);
        }
      }
    }
    .img {
      display:flex;
      justify-content:center;
    }

    .check {
      text-align:center;
      font-size:3.6rem;
      line-height:1.6;
      letter-spacing:0.10em;
      @media (width <= 767px) {
        font-size:2.8rem;
      }

      &.-red {
        --my-color:#EB4D4D;
      }
      &.-green {
        --my-color:#21A726;
      }
      &.-blue {
        --my-color:#009DFB;
      }

      ruby {
        rt {
          font-size:1.2rem;

          @media (width <= 767px) {
            font-size:1.0rem;
          }
        }
      }

      .m-i-af-check {
        display:inline-flex;
        justify-content:center;
        align-items:center;
        margin-right:.25em;
        width:3.6rem;
        height:3.6rem;
        background-color:var(--my-color);
        border-radius:50%;
        color:#fff;
        position:relative;
        @media (width <= 767px) {
          width:2.8rem;
          height:2.8rem;
        }
      }

      > span {
        color:var(--my-color);

        @media (width > 767px) {
          margin-right:.25em;
        }
      }
    }
  }

  @scope (.complete) {
    :scope {
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      padding-block:16.0rem 8.0rem;
      color:#fff;
      @media (width > 767px) {
        margin-block:6.0rem -8.0rem;
        margin-inline:-10.0rem;
      }
      @media (width <= 767px) {
        margin-block:6.0rem -4.0rem;
        margin-inline:-1.5rem;
        padding-block:12.0rem 10.0rem;
      }
    }
    .desc {
      font-size:2.0rem;
      line-height:1.8;
      letter-spacing:0.10em;
      filter:drop-shadow(0 0 2.0rem #00B6EF);

      @media (width <= 767px) {
        font-size:1.4rem;
      }
      & + .desc {
        margin-top:1em;
      }

      &.-end {
        margin-top:.5em;
        font-size:3.6rem;
        letter-spacing:0.20em;
        @media (width <= 767px) {
          font-size:2.8rem;
        }
      }
    }

    .logo {
      margin-top:4.8rem;
      @media (width <= 767px) {
        margin-top:2.8rem;
      }
    }

    .clear {
      margin-top:1.2rem;
      font-size:7.9rem;
      line-height:1.2;
      letter-spacing:0.20em;
      filter:drop-shadow(0 0 2.0rem #0586BE);
      @media (width <= 767px) {
        font-size:4.0rem;
        line-height:1.4;
        letter-spacing:0.15em;
        filter:drop-shadow(0 0 1.6rem #0586BE);
      }
    }

    .m-abs_bg {
      mask-image:linear-gradient(to bottom,hsl(0 0% 0% / 0) 0,hsl(0 0% 0% / 1) 32.0rem);
      @media (width <= 767px) {
        mask-image:linear-gradient(to bottom,hsl(0 0% 0% / 0) 0,hsl(0 0% 0% / 1) 24.0rem);
      }
      img {
        mask-position:center bottom;
      }
    }
  }
}

html:has(.practice_js-dialog-answer:open) {
  scrollbar-gutter:stable;
  body {
    overflow:hidden;
  }
}

@scope (.practice_js-dialog-answer) {
  :scope {
    display:none;
    align-items:start;
    justify-content:center;
    width:100vw;
    height:100lvh;
    position:fixed;
    top:0;
    left:0;
    z-index:10000;
    transition-property:opacity,overlay,display;
    transition-behavior: allow-discrete;
    transition-duration:0.5s;
    opacity:0;
    overflow-y:scroll;
    overscroll-behavior:contain;

    &:open {
      display:flex;
      opacity:1;
      @starting-style {
        opacity:0;
      }
      &::backdrop {
        opacity:1;
        @starting-style {
          opacity:0;
        }
      }
    }
    &::backdrop {
      width:100%;
      height:100%;
      background-color:rgb(from var(--cc-navy-B) r g b / 0.5);
      opacity:0;
      transition-property:opacity;
      transition-duration:0.5s;
      position:fixed;
      top:0;
      left:0;
      @media (width > 767px) {
        backdrop-filter:blur(7px);
      }
    }
  }
  .wrapper {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-block:10.0rem;
    width:100%;
    min-height:calc(100lvh + 1px);
    @media (width <= 767px) {
      padding:6.0rem 2.0rem 10.0rem;
    }
  }

  .close_wrap {
    --btn-size:6.0rem;
    margin-block:auto;
    width:var(--btn-size);
    position:absolute;
    inset-block:calc(var(--btn-size) * -.5 - .5rem);
    right:calc(var(--btn-size) * -.5 - .5rem);
    @media (width <= 767px) {
      --btn-size:4.0rem;
      inset-block:calc(var(--btn-size) * -.5);
      right:calc(var(--btn-size) * -.5);
    }

    .practice_js-dialog-close {
      display:flex;
      justify-content:center;
      align-items:center;
      width:var(--btn-size);
      height:var(--btn-size);
      border-radius:50%;
      background-color:var(--cc-navy-A);
      position:sticky;
      top:4.0rem;

      &::before,&::after {
        content:"";
        display:block;
        width:50%;
        height:3px;
        background-color:#fff;
        position:absolute;
      }
      &::before {
        transform:rotate(45deg);
      }
      &::after {
        transform:rotate(-45deg);
      }
    }
  }

  .inner {
    background-color:#fff;
    border:1.0rem solid #EBD5A4;
    position:relative;

    @media (width > 767px) {
      padding:5.0rem;
      width:96.0rem;
    }
    @media (width <= 767px) {
      padding-top:2.0rem;
      border-width:.5rem;
      width:100%;
    }

    .maru {
      margin-inline:auto;
      border-radius:50%;
      border:2.0rem solid #5ED66A;
      width:15.0rem;
      height:auto;
      aspect-ratio:1;
      @media (width <= 767px) {
        border-width:1.5rem;
        width:12.0rem;
      }
    }

    .correct {
      margin-block:1.5rem 3.0rem;
      text-align:center;
      font-size:2.8rem;
      font-weight:700;
      color:#5ED66A;
      letter-spacing:0.10em;
      line-height:1.5;
      @media (width <= 767px) {
        margin-block:.8rem 2.0rem;
        font-size:2.4rem;
      }
    }

    .explanation {
      padding-block:3.2rem;
      display:grid;
      justify-content:center;
      justify-items:center;
      gap:1.6rem;
      background-color:rgb(from #D5AD50 r g b / .07);
      font-weight:700;
      line-height:2;
      text-align:center;
      color:var(--cc-navy-A);
      @media (width <= 767px) {
        padding-block:2.4rem;
        line-height:1.8;
      }

      p + p {
        margin-top:-.8rem;
      }

      b {
        font-size:2.4rem;
      }

      .red {
        color:#EB4D4D;
      }
      .green {
        color:#21A726;
      }
      .blue {
        color:#009DFB;
      }
    }
  }
}


@scope (.practice-final) {
  :scope {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:30.0rem;
    @media (width <= 767px) {
      padding-top:15.0rem;
    }
  }

  .heading {
    margin-bottom:3.2rem;
    font-size:3.6rem;
    font-weight:700;
    letter-spacing:0.10em;
    line-height:1.4;

    @media (width <= 767px) {
      margin-bottom:2.0rem;
      font-size:2.8rem;
      line-height:1.4;
    }
  }

  .img {
    @media (width <= 767px) {
      margin-inline:-2.0rem;
    }
  }

  .btn {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-inline:auto;
    margin-top:4.0rem;
    background-color:#242424;
    color:#fff;
    border-radius:3px;
    width:26.4rem;
    height:6.8rem;
    font-size:2.0rem;
    letter-spacing: .05em;
    transition-property:background-color,filter,opacity;
    transition-duration:.3s;
    @media (width <= 767px) {
      margin-top:2.4rem;
      width:24.0rem;
      height:4.8rem;
      font-size:1.8rem;
    }
  }

  .practice_l-btn {
    margin-top:8.0rem;
    width:34.0rem;
    @media (width <= 767px) {
      margin-top:6.0rem;
      width:32.0rem;
    }
    > span {
      padding-left:3.2rem;
      @media (width <= 767px) {
        padding-left:2.0rem;
      }
    }
  }
}

/* Sample
============================================================================= */
@scope (.practice-selectorName) {
  :scope {
    @media (width > 767px) {
    }
    @media (width <= 767px) {
    }
  }
}