@charset "UTF-8";

:root {
  --ff-serif: "shippori-mincho", serif;
  --keyCol: #334a41;
}

.page-goods {
}

.pane-topic-path {

  .page-event:has(.block-event-page--header-img) & {
    display: none;
  }
}

.block-event-page {
  position: relative;
  z-index: 0;

  .block-event-page--header-img {
    margin: 0;
    min-height: 501.5px;

    img {
      display: block;
    }
  }
}

.ctop-lead {
  width: 720px;
  margin: 44px auto 0;
  border: 1px solid #8f8f8f;
  border-width: 0 1px;
  padding: 16px;
  text-align: center;
  word-break: keep-all;
  font-family: unset;
  color: var(--cl-br, #433d37);
}

.block-header-left-btns,
.footer-sitemap {
  display: none !important;
}

.ctop-so-content {
  --cl-br: #666464;
    margin: 24px 0 0;
    position: relative;
    text-align: center;
    font-family: var(--ff-serif);
    z-index: 0;

    h3 {
      margin: 0 0 0 -0.08em;
      padding: 0;
      letter-spacing: 0.08em;
      font-weight: 700;
      font-size: 2.2rem;
      color: #666464;
    }

    .so-reasons {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin: 46px 0 0;

      li {
        list-style: none;
        position: relative;
        margin: 0;
        width: calc((100% - 32px) /3);

        &::before {
          content: "";
          display: block;
          margin: 0 auto;
          height: 24px;
          aspect-ratio: 1 / 1;
          padding: 0;
          line-height: 24px;
          font-weight: 700;
          font-size: 2.6rem;
          color: var(--keyCol);
        }
        &:nth-child(1)::before { content: "1" }
        &:nth-child(2)::before { content: "2" }
        &:nth-child(3)::before { content: "3" }

        .so-reason-title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          margin: 8px auto 0;
          letter-spacing: 0.075em;
          font-weight: 700;
          font-size: 2.2rem;
          color: var(--keyCol);

          &::before,
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: -2px;
            left: 50%;
            height: 28px;
            width: 8px;
            mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%206%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M5.5%201.5L1%203.5V17.5L5.5%2019.5V1.5Z%22%20stroke%3D%22%23433D37%22%2F%3E%0A%3C%2Fsvg%3E%0A");
            background-color: var(--keyCol);
          }
          &::before {
            transform: translateX(-34px);
          }
          &::after {
            transform: translateX(29px) rotateY(180deg);
          }
        }

        .so-reason-text {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 24px 0 0;
          min-height: 6em;
          padding: 0;
          line-height: 1.8;
          letter-spacing: -0.025em;
          font-weight: 600;
          font-size: 1.6rem;
        }

        .so-reason-image {
          margin-top: 32px;

          img {
            max-width: 336px;
            aspect-ratio: 4 / 3;
            object-fit: contain;
          }
        }

      .so-reason-link {
        margin: 8px 0 0;
        p {
          margin-bottom: 4px;
          font-weight: 700;
          font-size: 1.6rem;
          color: var(--keyCol);
        }
        .so-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin: 0 auto;
          border-radius: 8px;
          height: 64px;
          width: 300px;
          padding: 0;
          letter-spacing: 0.05em;;
          text-decoration: none;
          font-size: 2.0rem;
          color: #ffffff;
          background-color: var(--keyCol);

          &::after {
            content: "";
            margin: 0;
            height: 24px;
            width: 21px;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            position: absolute;
            right: 3px;
            mask-image: none;
            background: none;
            background-color: #ffffff;
          }
        }
      }
    }
  }
}

footer.pane-footer {
  .footer-content {
    .block-footer-links {
      .block-footer-contact {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 0 24px;
        overflow: hidden;

        h2 {
          width: 100%;
          height: 32px;
          flex-grow: 0;
        }

        .tel {
          flex-grow: 1;
        }

        .tel,
        .web {
          margin: 0 !important;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: calc(100% - 56px);
        }
      }
    }
  }
}

/*---- 商品詳細 ----*/
.pane-goods-left-side {
  .block-goods-comment1 {
    order: 5;
    margin-top: 24px;
  }
  .block-goods-comment3 {
    order: 0;
    margin-top: 20px;
  }
}