@charset "UTF-8";

.block-category-list--event {
  position: relative;
  margin: 0;

  &:has(.block-top-event--image) {
    margin: 0 -12px;
    overflow: hidden;

    &::before {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: 10px;
      background: linear-gradient(#00000000, #000000ff);
      opacity: .08;
      z-index: 90;
    }
  }
}

h2#category-list--goods {
  margin: 0 0 8px;
  padding-top: 50px;
  font-feature-settings: unset;
  text-align: center;
  border-bottom: 1px solid #00000028;
  font-size: 2.4rem;
}

#skip-content {
  display: none;
  position: fixed;
  box-sizing: border-box;
  width: 100vw;
  height: 56px;
  bottom: 0;
  padding: 0 56px 0 0;
  text-align: center;
  background: #ffffffdd;
  backdrop-filter: blur(10px);
  z-index: 50;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var( --cl-a );
    text-decoration: none;
    transition: .3s;

    span {
      color: #fff;
      background: #666;
      font-size: 1.4rem;
      font-feature-settings: "palt";
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 44px;
      padding: 0 12px;
    }
  }

  &.is_active {
    display: block;
  }
}

h2 {
  &.block-top-event--image {
    padding: 0;
    min-height: calc(100vw * 1.2);
  }

  &.ctop-ttl {
    --color: #ccc;
    display: flex;
    flex-direction: column;
    margin: 30px auto 20px;
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px 0;

    strong {
      position: relative;
      font-size: 2.4rem;
      color: var( --hdColor );
      border-bottom: 6px solid var( --hdColor );
      padding: 0;
      font-weight: normal;

      sub {
        font-size: 75%;
      }

      &::after {
        display: block;
        content: "";
        position: absolute;
        height: 6px;
        width: 100%;
        left: 0;
        border: 0;
        background: #fff;
        opacity: .8;
      }
    }

    small {
      margin-top: 1rem;
      font-size: 1.4rem;
      letter-spacing: .1rem;
    }
  }
}

p {
  &.ctop-txt {
    color: #5a533f;
    padding: 0;
    line-height: 1.75;
    word-break: keep-all;
    overflow-wrap: anywhere;
    word-break: auto-phrase;
  }

  &.align-center {
    text-align: center;
  }
}

.ctop-notice {
  width: 100%;
  margin: 16px auto 0;
  text-align: center;
  line-height: 1.5;
  font-size: 1.3rem;
  color: #666;
}

.ctop-lead {
  margin: 24px auto 0;
  border: 1px solid #8f8f8f;
  border-width: 0 1px;
  padding: 0 16px;
  text-align: justify;
  line-height: 2;
  word-break: break-all;
  overflow-wrap: anywhere;
  color: var( --cl-br );
}

.ctop-imgbox {
  display: block;
  margin: 20px 0;

  img {
    width: 100%;

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

/*---- ctop-content ----*/
.ctop-content {
  --hdColor: #ccc;
  --tabColor-cs1: #666;
  --tabColor-cs2: #999;

  .ctop-typeList {
    margin: 40px 0;

    > div {
      text-align: center;

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

    > li + li {
      margin-top: 30px;
      padding-top: 30px;
      border-top: 1px dashed #ccc;
    }
  }

  .ctop-brandlist {
    h2& {
      margin: 0 0 20px;
      padding: 50px 0 10px;
      text-align: center;
      border-bottom: 1px solid #eee;
    }

    div& {
      min-width: 100px;
      min-height: 100px;
      flex-wrap: nowrap;
      position: relative;
      padding-top: 50px;
      margin: 20px auto 0;
    }
  }

  h3.cs-list-title {
    position: absolute;
    width: 50%;
    margin: 0;
    top: 0;
    right: 50%;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    padding: 0;

    label {
      display: flex;
      font-size: 1.8rem;
      height: 50px;
      background: #f5f5f5;
      font-family: var( --ff-sans_serif );
      text-align: center;
      align-content: center;
      flex-direction: column;
      justify-content: center;

      input {
        display: none;
      }

      .cs-valie {
        display: block;
        font-size: 1.3rem;
      }
    }

    &:has(:checked) label {
      color: #fff;
      font-weight: 600;
      animation: fadeIn ease .7s;

      .cs1 & { background: var( --tabColor-cs1 ); }
      .cs2 & { background: var( --tabColor-cs2 ); }
    }

    .cs2 & {
      left: 50%;
    }
  }

  div.ctop-courcelist {
    ul.cs-items {
      display: none;
      margin: 0;
      border-top: 3px solid #111010;
      animation: fadeIn ease .7s;

      .cs1 & { border-color: var( --tabColor-cs1 ); }
      .cs2 & { border-color: var( --tabColor-cs2 ); }

      .cs-item {
        --cs-color: #ccc;
        position: relative;
        flex-basis: calc((100% - 10px)/2);
        display: flex;
        flex-wrap: wrap;
        border-radius: 6px;

        .cs1 & { background: var( --tabColor-cs1 ); }
        .cs2 & { background: var( --tabColor-cs2 ); }

        h4 {
          flex-basis: 100%;
          background: #ffffff33;
          align-items: center;
          font-size: 1.4rem;
          text-transform: uppercase;
          font-feature-settings: "palt";

          a {
            display: flex;
            text-decoration: none;
            font-family: var( --ff-sans_serif );
            height: 100%;
            flex-direction: column;
            align-items: center;
            padding: 8px 4px 4px;

            sup {
              font-size: 2.4rem;
              letter-spacing: .15em;
              margin-left: .25em;
              vertical-align: baseline;
              line-height: 2.8rem;
              font-family: var( --ff-serif );
              color: #fff;
            }
          }
        }

        .cs-item-detail {
          background: #f5f5f5b5;
          padding: 8px 8px 8px;
          flex-wrap: nowrap;
          align-items: stretch;
          position: relative;
          display: flex;
          flex-direction: column-reverse;
        }

        .cs-item-detail-l {
          flex-basis: calc(55% - 8px);
          background: #ffffff66;
          padding: 4px;
          margin: 8px 0 0;
          border-radius: 4px;

          h5 {
            font-size: 1.2rem;
            font-weight: 600;
            font-family: var( --ff-sans_serif );
            margin-bottom: 5px;
            text-align: center;
            border-bottom: 1px solid #ffffffcc;
          }

          dl {
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            justify-content: space-between;
            font-size: 1.4rem;

            dt {
              flex-shrink: 0;
              flex-grow: 0;
              flex-basis: 60%;
              padding-right: .3em;
              position: relative;
              font-size: 1.2rem;

              &::after {
                content: ":";
                position: absolute;
                display: block;
                top: 0;
                right: 0;
              }
            }

            dd {
              text-align: right;
            }
          }
        }

        .cs-item-detail-r {
          display: flex;
          flex-basis: 45%;
          flex-direction: column;

          .cs-item-price {
            display: flex;
            font-weight: 600;
            font-size: 3rem;
            text-align: center;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            gap: 4px;
            margin-top: -6px;

            small {
              font-size: 1.4rem;
            }

            sub {
              font-size: 2rem;
            }
          }

          .handy-cs-btns {
            display: flex;
            flex-direction: column;
            gap: 6px;

            a {
              display: flex;
              color: #fff;
              background: var( --col_Gold );
              text-decoration: none;
              text-align: center;
              height: 44px;
              font-size: 1.4rem;
              font-weight: 600;
              justify-content: center;
              border-radius: 8px;
              align-items: center;

              &[target*="_blank"] {
                background: #b19b7b99;
                height: 36px;
                border-radius: 4px;
                font-weight: normal;
              }
            }
          }
        }
      }
    }

    .cs-list-title:has(:checked) + ul {
      display: flex !important;
      padding: 16px 0 0;
      flex-wrap: wrap;
      gap: 10px 6px;
      opacity: 1;
      height: 100%;
    }
  }
}

/*---- 関連シリーズリンク ----*/
.ctop-relcat-links {
  order: 10;
  margin: 32px 0 24px;

  ul {
    display: flex;
    flex-direction: column;
    gap: 16px;

    li {
      position: relative;
      border: 1px solid #bababa;

      img {
        aspect-ratio: 700 / 330;
      }
    }
  }
}

/*---- animation ----*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*---- .ctcon-handy ----*/
.ctop-hs-shprList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 40px;

  li {
    flex-basis: calc((100% - 20px) /2);
  }
}

/*---- .ctcon-plaisir ----*/
.ctop-typeList > div:last-child {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}

.js-ctop-tgl-content { /*---- ２ページ目以降のコンテンツ省略 ----*/
  position: relative;
  overflow: hidden;
  height: auto;
  margin: 0 -12px;
  padding: 0 12px;
  transition: .5s;

  &::before {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding: 50px 0 0 0;
    content: "";
    transition: .5s;
    background: linear-gradient(transparent 0%, var( --col_Background ));
    z-index: +1;
  }

  &::after {
      opacity: 0;
  }

  &.is-close {
      height: 64px;
      cursor: pointer;

    &::before {
      opacity: 1;
    }

    &::after {
      content: "省略されたコンテンツを表示";
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var( --col_Gold );
      font-weight: normal;
      border-radius: 24px;
      padding: 0 10px;
      width: 320px;
      height: 38px;
      background: #eee url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiICBzdHJva2U9IiNiYWE2NmQiIHN0cm9rZS13aWR0aD0iMXB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNC41IDhIMTEuNSIvPgo8cGF0aCBkPSJNOC4wMDUgNC41MDQ4OEw4LjAwNSAxMS41MDQ5Ii8+Cjwvc3ZnPg==") no-repeat calc(100% - 4px) 50% /28px;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      z-index: +2;
    }
  }
}

.ctop-type-feature {
  margin: 30px 0 0;

  ul {
    margin: 0 -12px;
    padding: 0 12px;
    display: flex;
    scroll-snap-type: x mandatory;
    gap: 16px;
    overflow-x: scroll;

    li {
      display: block;
      position: relative;
      background: #fff;;
      scroll-snap-align: center;

      img {
        max-width: unset;
        width: calc((100vw - 50px));
      }

      & + &::before {
        content: "";
        display: block;
        background: red;
      }
    }
  }
}

.ctop-mv {
  margin: 16px -12px 0;
  padding: 24px 12px;
  width: 100cqw;
  text-align: center;
  overflow: hidden;

  /*---- handy ----*/
  &.handy {
    margin-top: 32px;
    background: #e7e4b9;
  }
}

.ctop-content {
  /*---- テーブル ----*/
  .table-wrapper {
    position: relative;
    margin: 0 -16px 0;
    width: 100vw;
    overflow: scroll;
    scroll-snap-type: x mandatory;

    table {
      margin: 0 16px 0 16px;
      position: relative;
      left: -130px;

      tr {
        &:nth-of-type(-n + 2) {
          th, td {
            border: none;
            margin: 0;
            padding: 0;

            &:has(img) {
              padding: 16px !important;
            }
          }

          th[scope="row"] {
            position: relative;

            &:not(:first-of-type) {
              &::before {
                content: "";
                display: block;
                height: 100%;
                width: 8px;
                position: absolute;
                left: -4px;
                background: #fff;

              }
            }

            &::after {
              content: "";
              display: block;
              width: calc(100vw - 32px);
            }

            span {
              display: block;
              margin: 0;
              padding: 6px 0;
              text-align: center;
              color: #fff;
              white-space: nowrap;

              th:nth-of-type(1) & { background: #d38636; }
              th:nth-of-type(2) & { background: #be6770; }
              th:nth-of-type(3) & { background: #8c83ae; }
            }
          }
        }

        &:nth-of-type(n + 2) {
          th {
            font-weight: 600;

            &[scope="column"] {
              position: sticky;
              left: 12px;
              min-width: 130px !important;
              width: 130px !important;
              padding: 0 8px !important;
              text-align: left;
              white-space: nowrap;
              font-weight: 600;
              font-size: 1.2rem;
              background: color-mix(in srgb, var( --col_paleGray ) 45%, transparent);
              backdrop-filter: blur(1px);
              z-index: +1;
            }
          }

          td {
            padding: 4px 4px 4px 142px !important;
          }
        }

        th, td {
          border-top: .5px solid #00000028;
          padding: 0 !important;
          scroll-snap-align: center;
        }
      }

      tfoot {
        td {
          padding: 16px 6px 0 !important;
          text-align: center;

          a {
            padding: 0 12px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-weight: 600;
            background: #f5f5f5;
            border-radius: 50px;
            height: 38px;

            &::before {
              flex-shrink: 0;
              display: block;
              content: "";
              width: 16px;
              height: 16px;
              margin: 16px 6px 16px 0;
              opacity: .6;
              background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogbm9uZTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS40MDY1OTM0MDY1OTM0MDE2IDEuNDA2NTkzNDA2NTkzNDAxNikgc2NhbGUoMi44MSAyLjgxKSI+CTxwYXRoIGQ9Ik0gMzcuODgyIDkwIGMgLTAuMzM4IDAgLTAuNjc2IC0wLjA4NiAtMC45ODEgLTAuMjU4IGMgLTAuNjI5IC0wLjM1NCAtMS4wMTkgLTEuMDIgLTEuMDE5IC0xLjc0MiBWIDQ1LjM1NCBMIDMuOTIzIDMuMjA4IEMgMy40NjQgMi42MDQgMy4zODggMS43OTEgMy43MjYgMS4xMSBTIDQuNzU4IDAgNS41MTcgMCBoIDc4Ljk2NiBjIDAuNzYgMCAxLjQ1MyAwLjQzIDEuNzkxIDEuMTEgcyAwLjI2MiAxLjQ5MyAtMC4xOTcgMi4wOTggTCA1NC4xMTggNDUuMzU0IFYgNzkuMzcgYyAwIDAuNjk5IC0wLjM2NSAxLjM0OCAtMC45NjMgMS43MSBsIC0xNC4yMzcgOC42MyBDIDM4LjYwMSA4OS45MDMgMzguMjQxIDkwIDM3Ljg4MiA5MCB6IE0gOS41NDMgNCBsIDI5LjkzMiAzOS40NzQgYyAwLjI2NCAwLjM0OCAwLjQwNiAwLjc3MiAwLjQwNiAxLjIwOCB2IDM5Ljc2NyBsIDEwLjIzNiAtNi4yMDUgViA0NC42ODIgYyAwIC0wLjQzNyAwLjE0MyAtMC44NjEgMC40MDYgLTEuMjA4IEwgODAuNDU3IDQgSCA5LjU0MyB6IE0gNTIuMTE4IDc5LjM3IGggMC4wMSBIIDUyLjExOCB6IiBzdHlsZT0ic3Ryb2tlOiBub25lO3N0cm9rZS13aWR0aDogMTtzdHJva2UtZGFzaGFycmF5OiBub25lO3N0cm9rZS1saW5lY2FwOiBidXR0O3N0cm9rZS1saW5lam9pbjogbWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6IDEwO2ZpbGw6ICM2NjY7ZmlsbC1ydWxlOiBub256ZXJvO29wYWNpdHk6IDE7IiB0cmFuc2Zvcm09IiBtYXRyaXgoMSAwIDAgMSAwIDApICIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPjwvc3ZnPg==") no-repeat 0 0 / contain;
            }
          }

          &:nth-of-type(2) a { color: #d38636; }
          &:nth-of-type(3) a { color: #be6770; }
          &:nth-of-type(4) a { color: #8c83ae; }
        }
      }
    }
  }

  /*---- 品数 ----*/
  --noiColor: #000;
  .catalog {
    --catalogShadow: 0 4px 4px rgb(0 0 0 /.25);
    margin: 32px auto 0;

    .noi-block {
      --noiColor: #4396c0;
      position: relative;
      display: flex;
      flex-direction: column-reverse;
      border: 1px solid #ccc;
      padding: 16px;
      background: #ffffff85;

      .noi-ttl {
        display: flex;
        margin: 16px -16px -16px -16px;
        height: 36px;
        width: calc(100% + 32px);
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1.8rem;
        font-family: var( --ff-sans_serif );
        color: #fff;
        background: var( --noiColor );
      }

      &.noi3 {
        background: #fffffa;
      }

      &.noi2 {
        --noiColor: #c5a86f;
        position: relative;

        .inner {
          position: relative;
          flex-direction: row;
          padding-bottom: 36px;
          justify-content: center;
          gap: 0 56px;
        }

        dl {
          width: 120px;

          &.kinenhin {
            &::before {
              content: "";
              display: block;
              height: 36px;
              width: 36px;
              position: absolute;
              top: 96px;
              left: 50%;
              transform: translateX(-50%);
              background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%2012H24%22%20stroke%3D%22%23D9D9D9%22%20stroke-width%3D%224%22%2F%3E%0A%3Cpath%20d%3D%22M12%2001L12%2024%22%20stroke%3D%22%23D9D9D9%22%20stroke-width%3D%224%22%2F%3E%0A%3C%2Fsvg%3E%0A") 50% 0 / cover;
            }

            .course_numb {
              position: absolute;
              white-space: nowrap;
              text-align: left;
              width: 100%;
              bottom: 0;
              left: 0;
            }
          }
        }
      }
    }

    span {
      display: block;
    }

    .inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 56px 0;

      dl.engimono {
        width: calc();
        margin-bottom: 17px;
        position: relative;

        &::before {
          content: "";
          display: block;
          height: 36px;
          width: 36px;
          position: absolute;
          top: -44px;
          left: 50%;
          transform: translateX(-50%);
          background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%2012H24%22%20stroke%3D%22%23D9D9D9%22%20stroke-width%3D%224%22%2F%3E%0A%3Cpath%20d%3D%22M12%2001L12%2024%22%20stroke%3D%22%23D9D9D9%22%20stroke-width%3D%224%22%2F%3E%0A%3C%2Fsvg%3E%0A") 50% 0 / cover;
        }

        dd {
          width: 160px;
        }
      }

      dl {
        display: flex;
        flex-direction: column;
        align-items: center;

        dt {
          margin: 0 0 12px;
          font-weight: 600;
          font-size: 1.6rem;
          color: #666;
          white-space: nowrap;
          text-align: center;
        }

        dd {
          box-shadow: var( --catalogShadow );
          transition: .3s;

          &:hover {
            scale: 180%;
            z-index: 100;
          }

          ul {
            display: flex;
            flex-direction: column-reverse;
            overflow: hidden;
            background: transparent;
            mix-blend-mode: darken;
            position: relative;

            li {
              z-index: -1;
              box-shadow: 0 0 4px rgb(0 0 0 /.25);

              &:not(:last-child) {
                margin-top: -128%;
              }
            }
          }
        }
      }
    }
  }

  /*---- コース ----*/
  .course {
    margin: 30px -16px 0;
    width: 100vw;
    overflow: scroll;
    scroll-snap-type: x mandatory;

      table {
      margin: 0 16px;
      position: relative;
      writing-mode: vertical-lr;

      thead { outline: 1px Solid lime;
        position: sticky;
        top: 16px;
        left: 16px;

        th {
          &[rowspan] {
            width: 8em;
          }

          &[colspan] {
            text-align: left;
            writing-mode: vertical-lr;
          }
        }
      }

      tbody {
        th {
          &[scope] {
            text-align: center;

            &[rowspan] {
              width: 10em;
              color: #fff;

              tr:nth-of-type(1) & { background: #d38636; }
              tr:nth-of-type(3) & { background: #be6770; }
              tr:nth-of-type(5) & { background: #8c83ae; }
            }
          }
        }
      }
    }

    th, td {
      border: 1px solid #ccc;
      padding: 8px;
        a {
          writing-mode: horizontal-tb;
        }
    }

    th {
      writing-mode: lr;

      &[scope=row] {
        &:has(+ &) {
          width: calc(100vw - (8em + 32px)) !important;
          scroll-snap-align: end;
        }
      }
    }
    td {
      position: relative;
      padding: 0;
      white-space: nowrap;
      vertical-align: center;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: 10px;
        color: var( --col_Gold );
        font-size: 2.0rem;

        &:hover {
          td:has(&) {
            line-height: 1;
            height: 1em;
          }
        }
      }
    }
  }
}

  iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    vertical-align: bottom;
    box-shadow: 0 0 30px #0000000c;
  }

.chuuki {
  position: sticky;
  left: 16px;
  margin: 24px 0 0 16px;

  li {
    margin: 6px 0 0;
    font-size: 1.2rem;
    color: #666;

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

/*---- choice ----*/
.choice.ctop-content {
  .ctop-type-feature {
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .ctop-type {
      display: flex;
      flex-direction: column;
      width: 100%;
      border: 1.5px solid #afadac;
      background-color: #fff;

      .ctop-type-ttl {
        display: flex;
        flex-direction: column;
        align-items: center;

        h3 {
          display: flex;
          height: 48px;
          width: 100%;
          align-items: center;
          margin: 0 auto 0 0;
          padding: 4px 8px;
          color: #fff;
          background: #989487;
          gap: 12px;
          justify-content: center;

          > div {
            display: flex;
            align-items: center;
            font-size: 1.7rem;
            line-height: 1;
            gap: 2px;

            span {
              &:first-child {
                white-space: nowrap;
              }
            }

            & + & {
              padding-left: 16px;
              border-left: 4px dotted #fff;
            }
          }

          & + p {
            flex-grow: 1;
            display: flex;
            margin: 0;
            text-align: center;
            font-family: var( --ff-serif );
            font-weight: 700;
            font-size: 1.6rem;
            color: #989487;
            padding: 8px 0 0;
            align-items: center;
          }
        }
      }

      .ctop-type-detail {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 16px;
        margin: 16px;
        height: 100%;

        img {
          aspect-ratio: 5 / 3;
          object-fit: cover;
        }

        p {
          text-align: justify;
          word-break: break-all;
          line-height: 1.8;
          font-size: 1.4rem;

          &:has(img) {
            margin: 0 -4px;
          }
        }
      }
    }
  }
}