/* --------------------------
　        variables
--------------------------*/
:root {
  --c-susume-gray: #ccc;
  --c-susume-blue: #153c96;
  --c-susume-light-blue: #2ea7e0;
  --c-susume-yellow: #fee203;
  --c-susume-orange-dark: #E98E24;
  --c-susume-orange: #ff9100;
  --c-susume-orange-light: #ffb300;
}

/* --------------------------
　        layout
--------------------------*/
:where(body) {
  margin: 0;
}

:where(*, ::before, ::after) {
  box-sizing: border-box;
}

.l-susume-wrapper {
  width: min(100%, 1080px);
  margin-inline: auto;
}

.l-susume-fv {
  h1 {
    margin-block: 0;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-susume-contents {
  width: min(100%, 1100px);
  padding-inline: 50px;
  margin-top: 48px;
  margin-inline: auto;

  @media (width < 768px) {
    margin-top: 28px;
    padding-inline: 0;
  }

  :where(figure) {
    padding: 0;
    margin: 0;
  }

  :is(p, dd, li) {
    font-size: 16px;
  }

  :is(ul, ol) {
    list-style: none;
    padding-left: 0;
    margin-block: 0;
  }

  :where(dl) {
    margin-bottom: 0;
  }

  :where(dd) {
    margin-left: 0;
  }

  :where(p) {
    margin-top: 1.5em;

    @media (width < 768px) {
      margin-top: 1.25em;
    }
  }

  :where(h2, h3, h4, h5, h6){
    margin-bottom: 1em;
    line-height: 1.2;
    
    @media (width < 768px) {
      margin-bottom: 1.2em;
    }
  }

  h2 {
    font-size: 32px;
    padding: 0 0 0 .4em;
    border-left: 6px solid var(--c-susume-blue);

    @media (width < 768px) {
      font-size: 24px;
    }
  }

  h3 {
    font-size: 28px;
    padding: 0 0 .4em 0;
    border-bottom: 2px solid var(--c-susume-blue);

    @media (width < 768px) {
      font-size: 20px;
    }
  }

  h4 {
    font-size: 24px;
    padding: 0 0 .4em 0;
    border-bottom: 2px solid var(--c-susume-gray);

    @media (width < 768px) {
      font-size: 18px;
    }
  }

  dl {
    margin-top: 32px;

    @media (width < 768px) {
      margin-top: 24px;
    }

    > div:not(:first-child) {
      margin-top: 20px;

      @media (width < 768px) {
        margin-top: 18px;
      }
    }
  }

  dt {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    padding-left: 1em;
    text-indent: -1em;
    color: var(--c-susume-blue);

    @media (width < 768px) {
      font-size: 18px;
    }

    &::before {
      content: "■";
    }
  }

  dd {
    margin-top: .4em;
  }

  > section {
    margin-top: 56px;

    @media (width < 768px) {
      margin-top: 40px;
    }

    &[id] {
      scroll-margin-top: 60px;

      @media (width < 768px) {
        scroll-margin-top: 32px;
      }
    }

    > section {
      margin-top: 48px;

      @media (width < 768px) {
        margin-top: 32px;
      }
    }

    picture, figure {
      display: block;
      margin-top: 32px;

      @media (width < 768px) {
        margin-top: 24px;
      }

      img {
        @media (width < 768px) {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  ul {
    li {
      position: relative;
      padding-left: 1.35em;

      &::before {
        content: "";
        position: absolute;
        display: inline-block;
        width: .4lh;
        height: .4lh;
        border: 3px solid var(--c-susume-light-blue);
        border-radius: 50%;
        background-color: white;
        top: .15lh;
        left: 0;

        @media (width < 768px) {
          top: .25lh;
        }
      }
    }
  }

  .c-susume-table-of-contents {
    width: min(100%, 800px);
    margin: 48px auto;
    background-color: #f5f8fa;
    padding: 28px 24px 20px;
    counter-reset: myTableOfContentsCounter;

    @media (width < 768px) {
      margin-top: 36px;
    }

    dt {
      color: black;
    }

    li:not(:first-child) {
      margin-top: .5em;
    }

    li {
      display: flex;
      align-items: first baseline;
      gap: .25em;
      font-size: 16px;
      font-weight: 600;

      &::before {
        counter-increment: myTableOfContentsCounter;
        content: counter(myTableOfContentsCounter)".";
      }
    }

    a {
      color: currentColor;
      text-decoration: none;
      transition: color .3s;

      &:focus-visible {
        color: var(--c-susume-blue);
      }

      @media (any-hover: hover) {
        &:hover {
          color: var(--c-susume-blue);
        }
      }
    }
  }

  .c-susume-caption {
    font-size: 14px;
    padding-left: 1em;
    text-indent: -1em;
    margin-top: .4em;

    &::before {
      content: "※";
    }

    @media (--sp) {
      font-size: 12px;
    }
  }

  .c-susume-ranking {
    list-style: none;
    counter-reset: myRankingCounter;

    li {
      position: relative;
      display: flex;
      gap: .25em;

      &::before {
        counter-increment: myRankingCounter;
        content: "第"counter(myRankingCounter)"位：";
      }
    }
  }

  .c-susume-graph-block {
    padding: 40px 24px 28px;
    margin-top: 36px;
    background-color: #fffdec;

    @media (width < 768px) {
      padding: 32px 20px 24px;
    }

    .c-susume-caption {
      margin-block: 0;

      @media (width < 768px) {
        text-align: left;
      }
    }
  }

  .c-susume-graph-block-inner {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding-bottom: 16px;

    @media (width < 768px) {
      display: block;
      padding-bottom: 8px;
    }

    > figure {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      grid-template-rows: subgrid;
      grid-row: span 2;
      margin-top: 0;

      @media (width < 768px) {
        display: block;
      }

      &:not(:first-child) {
        @media (width < 768px) {
          margin-top: 18px;
        }
      }
    }

    img {
      width: 100%;
      height: auto;
    }

    figcaption {
      font-size: 16px;
      font-weight: bold;
      text-align: center;

      @media (width < 768px) {
        text-align: left;
      }
    }
  }

  .c-susume-btn {
    position: relative;
    text-decoration: none;
    display: block;
    width: min(100%, 424px);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: white;
    border-radius: calc(infinity * 1em);
    background-color: var(--c-susume-orange);
    border: 4px solid var(--c-susume-orange-light);
    padding: .7em 1em;
    margin-inline: auto;
    margin-top: 32px;
    transition: scale .3s, color .3s, background-color .3s;

    @media (width < 768px) {
      font-size: 20px;
      margin-top: 24px;
    }

    .arrow {
      --_arrow-border: 3px solid var(--c-susume-orange);
      position: absolute;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      background-color: white;
      transition: background-color .3s;
      border-radius: 50%;
      inset: 50% 6% auto auto;
      translate: 0 -50%;

      @media (width < 768px) {
        width: 20px;
        height: 20px;
      }

      > span {
        display: block;
        width: 8px;
        height: 8px;
        border-top: var(--_arrow-border);
        border-right: var(--_arrow-border);
        rotate: 45deg;
        transition: border-color .3s;

        @media (width < 768px) {
          width: 6px;
          height: 6px;
        }
      }
    }

    &:focus-visible {
      background-color: white;
      color: var(--c-susume-orange);

      .arrow {
        background-color: var(--c-susume-orange);

        > span {
          border-color: white;
        }
      }
    }

    &:active {
      scale: .95 .95;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: white;
        color: var(--c-susume-orange);

        .arrow {
          background-color: var(--c-susume-orange);

          > span {
            border-color: white;
          }
        }
      }
    }
  }

  .c-susume-chat {
    --_border-color: var(--c-susume-blue);
    --_border-width: 4px;
    --_triangle-rotate: -135deg;

    @media (width < 768px) {
      --_border-width: 2px;
    }

    .item {
      display: flex;
      gap: 24px;
      align-items: center;

      @media (width < 768px) {
        gap: 12px;
      }

      &:nth-child(even) {
        --_border-color: var(--c-susume-light-blue);
        --_triangle-rotate: 45deg;
        flex-direction: row-reverse;

        .desc::before {
          left: auto;
          right: -11px;

          @media (width < 768px) {
            right: -6px;
          }
        }
      }

      &:not(:first-child) {
        margin-top: 24px;
      }
    }

    .image {
      width: 98px;

      @media (width < 768px) {
        width: 56px;
      }
      
      img {
        width: 100%;
        height: auto;
        border-radius: 50%;
        border: var(--_border-width) solid var(--_border-color);
      }
    }

    .desc {
      flex: 1;
      position: relative;
      height: fit-content;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.5;
      padding: 1em;
      background-color: color-mix(in srgb, var(--_border-color) 4%, white);
      border: var(--_border-width) solid var(--_border-color);
      border-radius: 10px;

      &::before {
        content: "";
        position: absolute;
        display: block;
        width: 12px;
        height: 12px;
        background-color: color-mix(in srgb, var(--_border-color) 4%, white);;
        border-top: var(--_border-width) solid var(--_border-color);
        border-right: var(--_border-width) solid var(--_border-color);
        rotate: var(--_triangle-rotate);
        top: 50%;
        left: -11px;
        translate: 0 -50%;

        @media (width < 768px) {
          width: 8px;
          height: 8px;
          left: -6px;
        }
      }
    }

    p {
      margin-block: 0;
    }
  }
}

/* --------------------------
　        utility
--------------------------*/

.u-susume-bold{
  font-weight: bold;
}

.u-susume-text-center {
  text-align: center;
}

.u-susume-text-right {
  text-align: right;
}

.u-susume-anim-filter {
  transition: filter .3s;

  &:focus-visible {
    filter: drop-shadow(0 0 8px rgb(21 60 150 / 60%));
  }

  @media (any-hover: hover) {
    &:hover {
      filter: drop-shadow(0 0 8px rgb(21 60 150 / 60%));
    }
  }
}