@charset "UTF-8";

img {
  vertical-align: bottom;
}

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

#skip-content {
  display: none;
  position: fixed;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 48px;
  padding: 0;
  bottom: 4px;
  right: 56px;
  background: #ffffffe0;
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  z-index: 100;

  &.is_active {
    display: block;
  }

  a {
    display: block;
    text-decoration: none;
    padding: 0 40px 0 16px;
    line-height: 48px;
    color: var( --col_Gold );
    font-weight: 600;
    font-size: 1.2rem;
    transition: .5s;

    &::after {
      position: absolute;
      content: "";
      display: block;
      transform: rotate(90deg);
      bottom: 10px;
      right: 8px;
      width: 24px;
      height: 24px;
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxOCIgY3k9IjE4IiByPSIxNyIgZmlsbD0id2hpdGUiIHN0cm9rZT0iI0IxOUI3QiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTE2IDI0TDIyIDE4TDE2IDEyIiBzdHJva2U9IiM0MzI4MEUiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==") no-repeat 0 0 / cover;
      opacity: .8;
    }
  }
}

.ctop-ttl {
  h2& {
    display: flex;
    flex-direction: column;
    margin: 50px auto;
    flex-wrap: nowrap;
    align-items: center;
    font-feature-settings: normal;

    strong {
      position: relative;
      font-size: 3.9rem;
      color: var( --hdColor );
      border-bottom: 9px solid var( --hdColor );
      padding: 0 1em;

      sub {
        font-size: 75%;
      }

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

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

  p& {
    color: var( --cl-br );
    font-size: 1.7rem;
    line-height: 1.75;

    & + p {
      margin-top: 1em;
    }
  }
}

p {
  &.ctop-txt {
    margin-top: 24px;
    font-size: 1.7rem;
    line-height: 1.75;

    & + p {
      margin-top: 1em;
    }
  }

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

.ctop-imgbox {
  display: block;
  margin: 40px auto 20px;
  text-align: center;
}

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

.ctop-typeList {
  display: flex;
  width: 1060px;
  margin: 40px auto 20px;
  justify-content: space-between;

  > div {
    display: flex;
    text-align: center;
    flex-direction: column;
    max-width: 33%;
    justify-content: space-between;
  }

  > li {
    background: linear-gradient(transparent 48px, #000 48px, #000 100%);

    & + & {
      padding-left: 1px;
    }
  }

  .ctop-typelist-text {
    flex-grow: 1;

    h3 {
      margin: 0 0 10px;
    }
  }

  > * {
    figure {
      display: flex;
      align-content: flex-end;

      img {
        object-fit: contain;
      }
    }

    *:last-child {
      flex-grow: 1;
    }
  }

  a {
    opacity: 1;
    transition: .5s;

    &:hover {
      opacity: .7;

      img {
        scale: 102%;
      }
    }
  }
}

.cs-list-title {
  h3& {
    position: absolute;
    width: 500px;
    margin: 0;
    top: 0;
    right: calc(50% + 15px);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    label {
      display: flex;
      padding: 10px;
      font-size: 1.8rem;
      height: 50px;
      background: #f5f5f5;
      font-family: var( --ff-sans_serif );
      text-align: center;
      cursor: pointer;
      align-content: center;
      justify-content: center;
      align-items: flex-end;
      opacity: .7;
      transition: .7s;

      &:hover {
        opacity: 1;
      }

      .cs-list-title:has(:checked) & {
        color: #fff;
        font-weight: 600;
        animation: fadeIn ease .7s;
        opacity: 1;

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

      input {
        display: none;
      }
    }
  }

  &:has(:checked) + ul {
    display: flex !important;
    padding: 30px 0 0;
    flex-wrap: wrap;
    gap: 5px;
    opacity: 1;
    height: 100%;
  }
}

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

.ctop-lead {
  width: 720px;
  margin: 32px auto 0;
  border: 1px solid #8f8f8f;
  border-width: 0 1px;
  padding: 0 32px;
  line-height: 2;
  text-align: center;
  word-break: keep-all;
  line-break: anywhere;
  font-family: unset;
}

.ctop-type-feature {
  margin: 50px auto 0;
  width: 1060px;

  ul {
    margin: -24px -16px;
    padding: 24px 16px;
    display: flex;
    justify-content: stretch;
    gap: 56px;
    background: #fff;

    li {
      position: relative;
      min-width: calc((100% - 112px) /3);
      background: #fff;

      & + &::before {
        content: "";
        display: block;
        position: absolute;
        left: -29px;
        height: 100%;
        width: 2px;
        background: #684534;
      }
    }
  }
}

.ctop-mv {
  margin: 56px 0 0 calc((var( --wrapperW ) - 100cqw) /2);
  padding: 40px 0;
  width: 100cqw;
  text-align: center;
  overflow: hidden;

  /*-- handy --*/
  &.handy {
    background: #e7e4b9;

    td {
      img {
        width: 250px;
      }
    }
  }
}

.ctop-content {
  /*---- テーブル ----*/
  .table-wrapper {
    margin: 24px auto;
    width: 1060px;

    table {
      position: relative;
      border-collapse: collapse;
      border: 1px solid #ccc;
      table-layout: fixed;
      width: 100%;

      colgroup {
        col {
          &:first-child {
            background: #f5f5f5;
            width: 12em;
          }
        }
      }

      thead {
        position: sticky;
        top: -1px;

        td {
          border: 0;
        }
      }

      tbody {
        tr:nth-child(1) td:first-child {
          border: none;
        }

        th, td {
          border: 1px solid #ccc;

          sup {
            vertical-align: top;
            font-size: 1.1rem;
          }
        }
      }
      tfoot {
        background: #f5f5f5;

        td {
          &:not(:first-child) {
            border: 1px solid #ccc;
            border-width: 0 1px;
          }
          a {
            padding: 0 12px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-weight: 600;

            &::before {
              flex-shrink: 0;
              display: block;
              content: "";
              width: 16px;
              height: 16px;
              margin: -4px 6px 0 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; }
        }
      }

      tr {
        &:nth-of-type(-n + 2) { /* 画像まで */
          td:has(img) {
            padding: 8px;
          }
        }

        &:nth-of-type(n + 2) { /* データ行 */
          th {
            padding: 6px;
          }
          td {
            padding: 4px 8px;
          }
        }

        th {
          font-size: 1.2rem;
          font-weight: 600;
          vertical-align: middle;

          &[scope=row] {
            position: relative;
            span {
              position: sticky;
              display: block;
              margin: 0;
              padding: 2px 0;
              text-align: center;
              letter-spacing: .05em;
              font-size: 1.6rem;
              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; }
            }
          }
          &[scope=column] {
            padding: 0 0 0 8px;
          }
        }
      }
    }
  }

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

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

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

      &.noi3 {
        background: #fffffa;
      }
      &.noi2 {
        --noiColor: #c5a86f;
        width: 634px;

        .noi-ttl {
          margin-bottom: 24px;
        }

        .inner {
          gap: 0 96px;
        }
      }

      .inner {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 0 96px;

        dl.engimono {
          margin-bottom: 17px;

          &::before {
            content: "";
            display: block;
            height: 48px;
            width: 48px;
            position: absolute;
            top: 60px;
            left: -72px;
            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") 0 0 / 48px auto;
          }
        }

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

          &.hikigashi {
            &::before {
              content: "";
              display: block;
              height: 48px;
              width: 48px;
              position: absolute;
              top: 60px;
              left: -72px;
              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") 0 0 / 48px auto;
            }
          }

          dt {
            margin: 16px 0 0;
            font-weight: 600;
            font-size: 1.6rem;
            color: #666;
          }

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

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

            img {
              height: 166px;
              width: 117px;
              object-fit: cover;

              &:hover {
                z-index: +1;
                border: 2px solid #fff;
              }
            }

            ul {
              display: flex;
              overflow: hidden;
              width: 350px;

              li {
                display: flex;
                justify-content: flex-start;
                width: 117px;
                box-shadow: 0 0 4px rgb(0 0 0 /.25);

                &:not(:first-child) {
                  margin-left: calc((350px - (117px * 10)) /9);
                }
              }
            }
          }
        }
      }
    }
  }

  /*---- コース ----*/
  .course {
    margin: 30px auto 0;
    width: 1060px;

    table {
      width: 100%;
      border: 1px solid #aaa;
      border-collapse: collapse;

      thead {
        th {
          text-align: center;

          &[colspan] {
            text-align: left;
          }

          &[rowspan] {

            &:nth-child(2) {
              text-align: right;
              border-right: 2px solid #999;
            }
          }
        }
      }

      tbody {
        tr {
          &:nth-child(odd) {
            border-top: 2px solid #aaa;
          }
          &:nth-child(even) {
            border-top: 1px dashed #ccc;
          }

          th {
            &[scope] {
              width: 5em;
              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; }
              }
            }
          }
          td:nth-last-child(10) {
            border-left: 2px solid #aaa;
          }
          &:nth-child(even) {
            background: #f8f8f8;
            }
          }
        }
      }

      th, td {
        border: 1px solid #ccc;
        border-width: 0 1px;
        padding: 8px;
      }

      th {
        font-weight: 600;
        font-size: 1.2rem;

        &[scope=row] {
          white-space: nowrap;
        }
      }

      td {
        text-align: center;

        a {
          display: block;
          margin: -8px;
          padding: 8px;

          &:hover {
            border-color: var( --col_Gold );
            border-bottom: 0;
            color: #fff;
            background: color-mix(in srgb, var( --col_Gold ) 60%, transparent);
            text-decoration: underline;
          }

          small {
            font-size: 1.0rem;
            margin: 0 0 0 2px;
          }
        }
      }
    }

  /*---- ギフトラッピング ----*/
  .gift-wrapping {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 32px auto 0;

    > dl {
      width: calc((1060px - 96px) /5);

      & + &::before {
        content: "";
        display: block;
        width: 1px;
        border-left: 1px solid #ccc;
      }

      > dt {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 0;

        strong {
          font-weight: 600;
        }

        small {
          font-size: 1.1rem;
        }
      }

      > dd {
        margin: 12px 0 0;

        &.gift-wrapping-img {
          img {
            width: 100%;
            aspect-ratio: 5 / 6;
          }
        }

        ul {
          li {
            display: flex;
            margin: 4px 0 0;
            font-weight: 600;
            font-size: 1.2rem;

            &::before {
              display: inline-block;
              content: "・";
              margin: 0 4px 0 0;
              padding: 0 0 0 1em;
              text-indent: -1em;
            }
          }
        }
      }
    }
  }
}

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

  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;

    li {
      width: 350px;
      position: relative;

      a {
        display: block;

        img {
          box-sizing: content-box;
          border: 1px solid #bababa;
          width: 100%;
          aspect-ratio: 700 / 330;
        }
      }
    }
  }
}

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

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

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

.block-category-list {
  display: flex;
  flex-direction: column;
  z-index: 0;

  .block-category-list--goods {
    order: 1;
  }

  .block-category-list--sub {
    .block-category-style-t {
      display: flex;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 0;
      justify-content: center;
    }
  }
}

/*---- choice ----*/
.choice.ctop-content {
--cl-br: var( --cl-br );
  .ctop-type-feature {
    width: 1060px;
    margin: 20px auto 0;
    display: flex;
    gap: 24px;
    color: var( --cl-br );

    .ctop-type {
    --col_Background: var( --col_Background );
      display: flex;
      flex-direction: column;
      width: calc((100% - 48px) /3);
      border: 1.5px solid #afadac;
      background: var( --col_Background );

      h3 {
        display: flex;
        height: 56px;
        align-items: center;
        margin: 0 auto 0 0;
        padding: 4px 0 4px 12px;
        line-height: 1;
        color: #fff;
        background: #989487;
        width: 184px;
        gap: 8px;

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

          span {

            &:first-child {
              font-size: .9rem;
              letter-spacing: .2em;
            }
          }
        }

        & + p {
          margin: 0;
          line-height: 1.5;
          font-family: var( --ff-serif );
          font-weight: 700;
          font-size: 1.8rem;
          color: #989487;
          padding: 12px 24px;
          border-bottom: 2.5px dotted #8f8f8f;
        }
      }

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

        p {
          line-height: 1.8;
          font-size: 1.4rem;

          &:nth-child(2) {
            flex-grow: 1;
          }
        }
      }
    }
  }
}