@charset "UTF-8";

/*----- parts -----*/
.bg_blue_ {
  background-color: var( --col_paleGray );
}

/*----- page -----*/
.page_contents {
  h1 {
    text-align: center;
    font-size: 2.2rem;

    span {
      display: block;
      font-size: 1.2rem;
    }
  }

  h2 {
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 2px solid var( --cl-heading );
    font-weight: normal;
  }

  h3 {
    margin-bottom: 16px;
    background-color: var( --cl-heading );
    color: #fff;
    letter-spacing: .075em;
    font-size: 1.6rem;
    font-weight: normal;
  }

  p {
    margin-bottom: 20px;
    line-height: 1.8;
    word-break: break-all;
    text-align: justify;
  }

  h4 {
    font-size: 1.6rem;
    padding: 0 8px 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid  var( --cl-heading );
  }

  h5 {
    margin-bottom: 10px;
    padding: 8px;
    font-weight: 600;
    font-size: 1.6rem;
    background-color: var( --col_paleGray );

    .fp_guide & {
      margin: 10px 0 0;
      padding: 8px 8px 8px calc(24px + 1.6rem);
      color: var( --cl-heading );
      text-indent: -3.2rem;

      & + p {
        padding: 8px 8px 8px calc(24px + 1.6rem);
        text-indent: -2.8rem;
      }
    }
  }

  .page_box1 {
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    padding: 14px;
    text-align: center;

    span {
      font-size: 1.2rem;
    }
  }

  .txt_l {
    font-weight: 600;
    font-size: 1.4rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .page_button1 {
    display: block;
    width: 70%;
    margin: 0 auto 30px auto;
    padding: 10px;
    font-size: 1.6rem;
  }

  .page_table {
    font-size: 1.2rem;
    margin-bottom: 30px;
    background-color: #fff;

    th {
      vertical-align: middle;
      font-weight: 600;
    }
  }

  .txt_s {
    font-size: 1.2rem;
    color: #808080;
  }

  .page_box2 {
    background-color: var( --col_paleGray );
    padding: 14px;
  }

  ul, ol {
    &.compact li {
      margin: 0 !important;
    }
  }

  dl {
    dt {
      margin: 10px 0 0 0;

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

    dd {
      padding: 0 0 0 10px;
    }

    &.compact {
      margin-bottom: 20px;

      dt {
        float: left;
        margin: 0 1em 0 0;

        &:has(+ &) {
          width: 100%;

          & ~ dt:has(+ dd) {
            margin-left: 10px;
          }
        }
      }

      dd {
        &::after {
          clear: both;
          display: block;
          content: "";
        }
      }
    }
  }

  /*---- プライバシーポリシー ----*/
  &.pp-content {
    .page_contents_inner {
      & > :is(ul, ol, dl) {
        padding: 0;
      }

      li {
        list-style: none;
        margin: 0 0 20px;

        &:last-child {
          margin: 0;
        }

        &:not(:has(*)) {
          padding-left: 1em;
          text-indent: -1em;
        }

        h3, h4, h5, h6 {
          border: none;
          margin: 20px 0 8px;
          padding: unset;
          color: unset;
          line-height: 1.5;
          font-family: unset;
          font-weight: 600;
          font-size: 1.6rem;
          background-color: unset;
        }

        ol > & {
          margin: 0 0 8px;

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

        table {
          margin: 20px 0;
        }
      }
    }

    /*-- Pマーク --*/
    .page_contents_pmark .pmark {
      width: 150px;
    }
  }

  /*-- 会社概要 --*/
  /*-- 特定商取引法に基づく表記 --*/
  &.com-content,
  &.law-content {
    .page_table {
      tr {
        display: flex;
        flex-direction: column;

        th {
          border-width: 1px 0 0;
          line-height: 1.6rem;
          width: 100%;

          tr:first-child & {
            border-top: none;
          }
        }
        td {
          border: none;
          font-size: 1.4rem;
        }
      }
    }
  }
}

/*---- 仏事 ----*/
main.pane-main:has(.block-butsuji) {
  display: flex;
  flex-direction: column;

  .block-topic-path {
    margin-top: 0 !important;
    order: 999;
  }
}

.block-butsuji {
  margin: 0 -12px 0 !important;
  font-family: "Klee One", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", cursive;

  .block-butsuji-top-comment {
    margin-top: 56px;
    padding: 1px 16px 0;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.875;
    letter-spacing: .1em;
  }

  .block-butsuji-top-item {
    display: flex;
    flex-direction: column;
    margin-top: 40px;

    .item-img {
      margin-top: 20px;
      order: 20;

      img {
        display: block;
        width: 100%;
      }
    }

    .item-txt {
      font-size: 1.8rem;
      font-weight: 600;
      text-align: center;
      letter-spacing: .1em;
      order: 10;
    }
  }

  .block-butsuji-h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 12px;

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #c79ad1;
    }

    > span {
      display: block;
      position: relative;
      padding: 0 30px;
      background: var( --col_Background );
      font-size: 2.2rem;
      font-weight: 600;
      letter-spacing: .1em;
    }
  }

  .block-butsuji-select {
    margin-top: 60px;
  }

  .block-butsuji-select-item {
    margin-top: 20px;

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

  .block-butsuji-select-item-desc {
    padding: 0 12px;

    .item-ttl {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 2.4rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.417;
      letter-spacing: .1em;
    }

    .item-img {
      margin-top: 30px;

      img {
        display: block;
        width: 100%;

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

    .item-comment {
      margin-top: 20px;
      text-align: justify;
      font-size: 1.6rem;
      letter-spacing: .1em;
    }
  }

  .block-butsuji-select-item-list {
    margin-top: 40px;
    padding: 16px 0;
    background-color: rgb(199 154 209 /.3);

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

    li {
      flex-shrink: 0;
      width: 65vw;
      padding: 8px;
      background: #fff;
      font-family: var( --ff-serif );
      text-align: center;
    }

    .list-img {
      margin: -8px  -8px 16px;

      img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }
    }

    .list-name {
      margin-top: 14px;
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1.375;
      letter-spacing: .04em;
    }

    .list-price {
      margin: 12px 0;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
      font-size: 1.6rem;
      line-height: 1;

      > span {
        &:nth-child(1) {
          font-size: 1.8rem;

          .yen {
            margin-right: 2px;
            letter-spacing: .05em;
            font-size: 2.2rem;
            font-weight: 600;
          }
        }

        &:nth-child(2) {
          font-size: 1.4rem;
        }
      }
    }

    p {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      letter-spacing: .1em;

      &.sale-price {
        color: #d01414;
      }

      &.default-price > span {
        &:nth-child(1) {
          font-size: 1.3rem;

          .yen {
            font-weight: 600;
          }
        }

        &:nth-child(2) {
          font-size: 1rem;
        }
      }
    }

    .sale-comment {
      margin-top: 2px;
      color: #d01414;
      font-size: 1.3rem;
      font-weight: 600;
      line-height: 1.2;
    }

    .list-num {
      margin-top: 5px;
      font-size: 1.6rem;
    }

    .list-link-1,
    .list-link-2,
    .list-link-3 {
      margin-top: 10px;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 1.4rem;
        font-weight: 400;
        text-align: center;
        text-decoration: none;

        .list-link-1 & {
          border-radius: 5px;
          border: 1px solid var( --col_Gold );
          font-size: 1.3rem;
          height: 36px;
          color: var( --cl-a );
          letter-spacing: .05em;
        }

        .list-link-3 & {
          box-sizing: border-box;
          display: flex;
          border-radius: 8px;
          width: 100%;
          padding: 0;
          text-decoration: none;
          height: 56px;
          font-weight: 600;
          font-size: 1.6rem;
          color: #fff;
          background: #ad85b5;

          &::after {
            background-color: #fff;
          }
        }
      }
    }

    .yen {
      font-family: var( --ff-sans_serif );
    }
  }

  /*---- サービス ----*/
  .top-sect_service {
    margin: 0;

    .block-butsuji-h2 {
      margin: 60px 0 20px;
    }

    .series_lineup_list {
      display: flex;
      gap: 16px 10px;
      flex-wrap: wrap;
      margin: 0 12px;

      > li {
        flex-basis: calc((100% - 10px) /2);

        &:nth-of-type(3),
        &:nth-of-type(4) {
          flex-basis: 100%;
        }

        a::after {
          display: none;
        }
      }
    }
  }

  /*---- 関連シリーズリンク ----*/
  .ctop-relcat-links {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/*---- eGift ----*/
.guide-eGift {
  border-radius: 8px;
  margin: 40px auto 20px;
  padding: 12px 16px 16px;
  background: color-mix(in srgb, var( --col_Gold ) 9%, transparent);

  h3 {
    margin: 0;
    width: 100%;
    padding: 0 0 8px;
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(90deg, #43c7e3 0, #11c2a3 70%) !important;
    font-family: var( --ff-sans_serif );
    font-weight: 600;
    font-size: 1.6rem;
    background-color: transparent;
  }

  > div {
    display: flex;
    flex-direction: column;
    gap: 16px;

    p {
      display: block;
      margin: 0;
      padding: 0;

      br {
        display: none;
      }

      &:last-child {
        a {
          display: flex;
          width: 100%;
          border-radius: 8px;
          font-size: 1.6rem;
          height:48px;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}