@charset "UTF-8";

:root {
  --keyColor: #183E78;
}

.ctop-wagokoro {
  margin-bottom: 50px;
  h2 {
    margin: 50px 0;
    text-align: center;
  }

  section {
    margin-inline: auto;
    width: var(--contentW);
    position: relative;

    & + & {
      margin-top: 64px;
    }

    > h3 {
      margin: 0 -12px;
      text-align: center;

      span {
        display: flex;
        position: relative;
        word-break: keep-all;
        font-weight: 600;
        font-size: 2.2rem;
        color: var(--keyColor);

        &::before,
        &::after {
          content: "";
          display: block;
          height: 20px;
          width: 100%;
          border-bottom: 1px dashed currentColor;
        }
        &::before {
          margin-right: 8px;
        }
        &::after {
          margin-left: 8px;
        }
      }

      em {
        display: block;
        margin: 16px auto; 
        font-weight: 600;
        font-size: 2.0rem;
      }

      & + p {
        text-align: center;

        .notice {
          color: #666666;
        }
      }
    }

    ul {
      margin-top: 48px;
      display: flex;

      &.reason-wrapping {
        gap: 12px;

        li {
          width: 100%;

          figcaption {
            margin-bottom: 6px;
            font-weight: 600;
            text-align: center;
          }
        }
      }

      &.reason-noshi {
        flex-wrap: wrap;
        gap: 32px;

        section:has(&) h3 em::after {
          content: "";
          display: inline-block;
          position: absolute;
          height: 100px;
          margin-top: -56px;
          aspect-ratio: 1 / 1;
          background: transparent url('/img/usr/@brands/wagokoro/reason-noshi-f.webp') no-repeat 0 0 /contain;
          z-index: +1;
        }

        li {
          position: relative;
          width: calc((100% - 64px) /3);
          padding-top: 20px;

          .reason-noshi-f {
            display: block;
            width: 100px;
            aspect-ratio: 1 / 1;
            position: absolute;
            top: -8px;
            right: 0;
            filter: drop-shadow(0 0 15px #ffffff);
          }

          h4 {
            margin-bottom: 8px;
            border-bottom: 1px solid #dddddd;
            padding-left: 38px;
            font-weight: 600;
            font-size: 2.0rem;
            background: transparent url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2211%22%20viewBox%3D%220%200%2024%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.9881%209.60989C11.3835%207.80405%2010.1984%205.39357%207.75568%203.50711C5.40969%201.6932%202.75736%201.04826%200.79834%200.79834%22%20stroke%3D%22%23433D37%22%20stroke-width%3D%221.59624%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M0.79834%200.79834C1.40298%202.60418%202.58806%205.01467%205.03079%206.90113C7.37677%208.71503%2010.0291%209.36804%2011.9881%209.60989%22%20stroke%3D%22%23433D37%22%20stroke-width%3D%221.59624%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M11.9962%209.60989C12.6009%207.80405%2013.7859%205.39357%2016.2287%203.50711C18.5746%201.6932%2021.227%201.04019%2023.186%200.79834%22%20stroke%3D%22%23433D37%22%20stroke-width%3D%221.59624%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M23.1779%200.79834C22.5733%202.60418%2021.3882%205.01467%2018.9455%206.90113C16.5995%208.71503%2013.9472%209.36804%2011.9882%209.60989%22%20stroke%3D%22%23433D37%22%20stroke-width%3D%221.59624%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A') no-repeat 8px 50% /24px;

            small {
              margin-left: 4px;
              font-size: 1.8rem;
            }
          }

          figure {
          }
        }
      }

      &.reason-items {
        flex-wrap: wrap;
        gap: 5px;
        padding: 5px;
        background: var(--col_paleGray);

        li {
          width: calc((100% - 20px) /5);
        }
      }
    }

    .reason-noshi-btn {
      margin: 40px auto 0;
      text-align: center;
    }

  }
}

@media screen and (max-width: 640px) {
.ctop-wagokoro {
  border-bottom: 1px solid #00000028;
  padding-bottom: 50px;

  h2 {
    margin: 40px 0 30px;
  }

  & section {
    & > h3 {
      padding: 0;

      span {
        font-size: 1.7rem;

        &::before, &::after {
          height: 0.8em;
        }
      }

      em {
        font-style: normal;
        font-size: 1.8rem;
      }
    }

    ul {
      margin-top: 32px;

      &.reason-wrapping {
        flex-direction: column;
        gap: 24px;
        
      }

      &.reason-noshi {
        flex-direction: unset;
        gap: 16px 8px;

        section:has(&) h3 em::after {
          height: 72px;
          margin-top: -36px;
        }

        li {
          width: calc((100% - 8px) /2);

          .reason-noshi-f {
              width: 56px;
              top: 10px;
          }

          h4 {
            font-size: 1.8rem;
            padding: 0;
            background: none;

            small {
              margin-left: 1px;
              font-size: 1.4rem;
            }
          }
        }
      }

      &.reason-items {
        gap: 2px;

        li {
          width: calc((100% - 4px) /3);

          &:nth-child(6) {
            display: none;
          }
        }
      }
    }


  }
}
}