/* 標準ブロック */
/* ボタン */
.wp-block-buttons {
  justify-content: center;
}
.wp-block-button,
.card-link-button {
  width: fit-content;
  margin: 0 auto;
  a {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 16px 32px;
    color: #fff;
    background: #67b1da;
    border-radius: 32px;
    font-size: clamp(
      1rem,
      calc(0.875rem + 0.333vw),
      1.125rem
    ); /* min: 16px, max: 18px */
    letter-spacing: 3px;
    &:link,
    &:visited,
    &:focus,
    &:hover {
      color: #fff;
      text-decoration: none;
    }
  }
  &.wp-block-button_w {
    a {
      color: #3ea7e3;
      background: #fff;
    }
  }
}

/* カードリンクブロック */
.card-link-wrapper {
  position: relative;
  width: 100%;
  margin: 4rem auto 0;
  padding: 4rem;
  background: #fff;
  border-radius: 32px;
}
.card-link-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.7rem;
  .card-link-title {
    font-size: 1.5rem;
    font-weight: 400;
  }
}

/* サービスメニューブロック（特別メニュー） */
.service-wrapper {
  max-width: 934px;
  margin-inline: auto;
  a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 1024px;
    margin: 1.7rem auto 0;
    background: #fff;
    border-radius: 24px;
    color: #529dc7;
    overflow: hidden;
    transition: all 0.5s ease;
    border: 5px solid #5eabd5;
    figure {
      margin: 0;
      overflow: hidden;
      img {
        width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 18px 0 0 18px;
        transition: all 0.5s ease-in;
      }
    }
    svg {
      color: #73b0d9;
    }
    &:link,
    &:visited,
    &:focus,
    &:hover {
      color: #529dc7;
      text-decoration: none;
      svg {
        color: #73b0d9;
        transition: all 0.5s ease-in;
      }
    }
    &:hover {
      figure {
        img {
          transform: scale3d(1.2, 1.2, 1.2);
        }
      }
      svg {
        transform: scale3d(1.2, 1.2, 1.2);
      }
    }
  }
}
.service-inwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.7rem;
  flex: 0 0 70%;
  padding: 1.2rem;
  .service-content {
    flex: 1;
    .service-name {
      font-size: clamp(
        1.25rem,
        calc(1rem + 0.667vw),
        1.5rem
      ); /* min: 20px, max: 24px */
    }
    .style_heading-sub {
      margin: 0;
      &:before {
        background-size: 86%;
        background-position: center center;
      }
    }
    p {
      font-size: clamp(
        0.875rem,
        calc(0.75rem + 0.333vw),
        1rem
      ); /* min: 14px, max: 16px */
      letter-spacing: clamp(
        0.088rem,
        calc(0.075rem + 0.033vw),
        0.1rem
      ); /* min: 1.4px, max: 1.6px */
      line-height: 165%;
      color: #313131;
      margin: 8px 0 0;
      padding: 0 0 0 2.8rem;
      @media screen and (max-width: 800px) {
        line-height: 1.45;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .service-wrapper {
    a {
      flex-direction: column;
      figure {
        img {
          width: 100%;
          height: auto;
          border-radius: 24px 24px 0 0;
        }
      }
    }
  }
  .service-inwrap {
    gap: 0.875rem;
  }
}

/* サービスコンテンツヘッダーブロック */
figure.service-contents-header {
  position: relative;
  width: 100%;
  max-width: 1184px;
  margin: 0 auto;
  img {
    width: 100%;
    max-height: 400px;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 16px;
  }
  figcaption {
    display: block;
    margin: 4rem 0 0;
    p {
      font-size: clamp(
        1rem,
        calc(0.875rem + 0.333vw),
        1.125rem
      ); /* min: 16px, max: 18px */
      margin: 0;
      & + p {
        margin: 1.7rem 0 0;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  figure.service-contents-header {
    img {
      max-width: 100%;
    }
    figcaption {
      position: relative;
      bottom: unset;
      right: unset;
      margin: 2rem 0 0;
    }
  }
}

/* フロー（テキストのみ）ブロック */
.lflow-wrapper {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 1.7rem auto 0;
}
.lflow-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2rem 3rem;
  .lflow-list-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% / 3) - 4rem);
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    .lflow-title {
      font-size: clamp(
        1.25rem,
        calc(1rem + 0.667vw),
        1.5rem
      ); /* min: 20px, max: 24px */
      font-weight: 700;
      margin: 0;
    }
    .lflow-desc {
      font-size: clamp(
        1rem,
        calc(0.875rem + 0.333vw),
        1.125rem
      ); /* min: 16px, max: 18px */
      line-height: 1.6;
      margin: 0;
      p {
        margin: 0;
        & + p {
          margin: 1.7rem 0 0;
        }
      }
    }
    &:not(:last-child):after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -3rem;
      content: "";
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%238DC1DE' fill-rule='evenodd' d='M8.713 18.693A.75.75 0 0 1 8.25 18V6a.75.75 0 0 1 1.28-.53l6 6a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 0 1-.817.163' clip-rule='evenodd'/%3E%3C/svg%3E");
      width: 48px;
      height: 48px;
    }
  }
}
@media screen and (max-width: 768px) {
  .lflow-list {
    justify-content: flex-start;
    .lflow-list-content {
      width: calc(100% - 3rem);
    }
  }
}

/* フロー（写真あり）ブロック */
.cflow-wrapper {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 1.7rem auto 0;
}
.cflow-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.cflow-list-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  .cflow-content {
    flex: 1 0 70%;
    padding: 1.2rem;
    .cflow-title {
      font-size: clamp(
        1.25rem,
        calc(1rem + 0.667vw),
        1.5rem
      ); /* min: 20px, max: 24px */
      font-weight: 700;
      margin: 0;
    }
    .cflow-desc {
      font-size: clamp(
        1rem,
        calc(0.875rem + 0.333vw),
        1.125rem
      ); /* min: 16px, max: 18px */
      line-height: 1.6;
      margin: 0;
      p {
        margin: 0;
        & + p {
          margin: 1.7rem 0 0;
        }
      }
    }
  }
  .cflow-image {
    margin: 0;
    img {
      width: 300px;
      height: 200px;
      object-fit: cover;
      border-radius: 0 24px 24px 0;
    }
  }
  &:not(:last-child)::after {
    position: absolute;
    left: 10%;
    bottom: -2rem;
    content: "";
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%238DC1DE' d='M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
  }
}
@media screen and (max-width: 836px) {
  .cflow-list-wrapper {
    .cflow-image {
      img {
        width: 100%;
        height: 240px;
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .cflow-list-wrapper {
    flex-direction: column-reverse;
    .cflow-image {
      img {
        width: 100%;
        height: auto;
        border-radius: 24px 24px 0 0;
      }
    }
    &:not(:last-child)::after {
      left: 50%;
      transform: translateX(-50%);
      bottom: -2.25rem;
    }
  }
}

/* 写真付きアンカーリンクブロック */
.anchor-img-link {
  position: relative;
  display: flex;
  gap: clamp(1rem, calc(0.5rem + 1.333vw), 1.5rem); /* min: 16px, max: 24px */
  justify-content: center;
  align-items: center;
  margin: 3rem auto 0;
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #73b0d9;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    &:link,
    &:visited,
    &:focus,
    &:hover {
      text-decoration: none;
    }
    .anchor-img-link__img {
      margin: 0;
      img {
        width: 300px;
        height: clamp(
          4.688rem,
          calc(0rem + 12.5vw),
          9.375rem
        ); /* min: 75px, max: 150px */
        border-radius: 0;
        object-fit: cover;
      }
    }
    .anchor-img-link__title {
      font-size: clamp(
        0.875rem,
        calc(0.625rem + 0.667vw),
        1.125rem
      ); /* min: 14px, max: 18px */
      font-weight: 400;
      margin: 0;
      &:after {
        display: inline-block;
        content: "";
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m15 8l-4.03 6L7 8z'/%3E%3C/svg%3E");
        width: 24px;
        height: 24px;
      }
    }
  }
}

/* こだわりブロック */
.commitment-wrapper {
  position: relative;
  width: 100%;
  margin: 1.7rem auto 0;
  padding: 1rem 1rem 1rem 2rem;
}
.commitment-inner {
  counter-reset: num;
}
.commitment-box {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  counter-increment: num;
  &:before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    content: counter(num);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #3ea7e3;
    color: #fff;
    text-align: center;
    top: -1.25rem;
    left: -1.5rem;
    z-index: 1;
  }
  & + .commitment-box {
    margin: 3.5rem 0 0;
  }
  .commitment-image {
    flex: 0 0 300px;
    img {
      max-width: 100%;
      height: auto;
      border-radius: 32px;
    }
  }
  .commitment-title {
    font-size: 20px;
    font-weight: 700;
  }
  .commitment-content {
    font-size: 16px;
  }
}

/* 私たちの目指すサービスブロック */
.aimfor-wrapper {
  position: relative;
  width: 100%;
  margin: 1.7rem auto 0;
  padding: 0 0 0 2rem;
  & + .aimfor-wrapper {
    margin: 3.5rem auto 0;
  }
}
.aimfor-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.aimfor-image-right {
  flex-direction: row-reverse;
}
.aimfor-image-wrapper {
  flex: 0 0 550px;
  margin: 0;
}
.aimfor-title {
  color: #53a3cf;
  font-size: 26px;
  margin-bottom: 17px;
}

/* 基本料金、加工料金ブロック */
.lzb-block {
  position: relative;
}
.lzb-block-price__wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: #fff;
  margin: 1.7rem auto 0;
  padding: 1.25rem;
  border-radius: 32px;
  gap: 1rem;
  &:first-child {
    margin: 0 auto;
  }
  .lzb-block-header {
    flex-basis: 200px;
    img {
      width: 96px;
      height: 96px;
      filter: invert(22%) sepia(6%) saturate(0%) hue-rotate(125deg)
        brightness(93%) contrast(102%);
    }
  }
  .lzb-block-price__list {
    flex: 0 0 80%;
  }
  .lzb-item-name_header,
  .lzb-item-name {
    flex: 0 0 50%;
  }
}
.lzb-block-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lzb-price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0.95rem;
  @media screen and (max-width:600px) {
    font-size:0.875rem;
  }
}

.lzb-price-list li {
  display: flex;
  gap: 0.5rem;
  margin: 0.3rem auto 0;
  max-width: 700px;
}

.lzb-price-item span,
.lzb-price-header span {
  flex: 1;
  padding: 4px 8px;
  text-align: center;
}

.lzb-price-item span:last-child,
.lzb-price-header span:last-child {
  font-weight: 700;
  border-right: none;
}

.lzb-item-name_header,
.lzb-item-regular_header,
.lzb-item-member_header {
  text-align: center;
  border-radius: 32px;
}
.lzb-item-name_header,
.lzb-item-regular_header {
  background: #aedfee;
}
.lzb-item-member_header {
  color: #fff;
  background: #3ea7e3;
}

.lzb-item-regular,
.lzb-item-member {
  text-align: center;
}

.lzb-price-block-wrapper {
  .wp-block-group__inner-container {
    margin: 1.7rem auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.7rem;
  }
}

.lzb-block-option__wrapper {
  width: 100%;
  max-width: calc((100% / 2) - 1.7rem);
  -webkit-column-break-inside: avoid;
  page-breake-inside: avoid;
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 1.25rem;
  border-radius: 24px;
  @media screen and (max-width: 767px) {
    max-width: 100%;
  }
  .lzb-block-desc {
    margin: 1rem 0 0;
  }
  .lzb-block-price__list {
    flex: 1;
    width: 100%;
    margin: 1rem 0 0;
  }
  .lzb-item-name_header,
  .lzb-item-name {
    flex: 0 0 70%;
  }
  .lzb-option-icon_wrap {
    display: flex;
    align-items: center;
    height: 96px;
    margin: 0;
    img {
      width: 96px;
      height: auto;
      border-radius: 0;
    }
  }
}

.lzb-price-note {
  width: 100%;
  margin: 0.875rem 0 0;
  small {
    font-size: 1rem;
    font-weight: 700;
    color: #da6b67;
  }
}

/* サービス下層で使っている料金表ブロック */
.lzb-block-price__list {
  @media screen and (max-width: 600px) {
    /* overflow-x:auto; */
    display: block;
    font-size:0.875rem;
  }
  .lzb-price-list {
    border: 1px solid #cfcfcf;
    .lzb-price-header {
      display: flex;
      gap: 0;
      max-width: 100%;
      margin: 0;
      .lzb-item-name_header,
      .lzb-item-regular_header,
      .lzb-item-member_header {
        flex: 1;
        padding: 8px 1rem;
        text-align: center;
        border-radius: 0;
      }
      .lzb-item-name_header {
        flex: 0 0 50%;
        border-right: 1px solid #cfcfcf;
        @media screen and (max-width: 600px) {
          flex: 0 0 50%;
        }
      }
      .lzb-item-regular_header {
        @media screen and (max-width: 600px) {
          flex: 0 0 40% !important;
        }
      }
      .lzb-item-member_header {
        color: #fff;
        background: #67add4;
        border-left: 1px solid #cfcfcf;
        @media screen and (max-width: 600px) {
          flex: 0 0 40% !important;
        }
      }
    }
    .lzb-price-item {
      display: flex;
      gap: 0;
      max-width: 100%;
      margin: 0;
      .lzb-item-name,
      .lzb-item-regular,
      .lzb-item-member {
        flex: 1;
        padding: 1rem;
        background: #f2f2f2;
      }
      .lzb-item-name {
        display: flex;
        flex: 0 0 50%;
        align-items: center;
        text-align: left;
        border-top: 1px solid #cfcfcf;
        border-right: 1px solid #cfcfcf;
        background-color: #fff;
        @media screen and (max-width: 600px) {
          flex: 0 0 50%;
        }
      }
      .lzb-item-regular {
        border-top: 1px solid #cfcfcf;
        background-color: #fff;
        @media screen and (max-width: 600px) {
          flex: 0 0 40% !important;
        }
      }
      .lzb-item-member {
        border-top: 1px solid #cfcfcf;
        border-left: 1px solid #cfcfcf;
        @media screen and (max-width: 600px) {
          flex: 0 0 40% !important;
        }
      }
      .price-strong {
        font-size: clamp(
          1.25rem,
          calc(1rem + 0.667vw),
          1.5rem
        ); /* min: 20px, max: 24px */ /* min: 20px, max: 22px */
        font-weight: 700;
        line-height: 1;
        color: #ee3a52;
        padding: 0;
      }
    }
  }
}
.menu-block {
  .lzb-block-price__list {
    .lzb-price-list {
      border: unset;
      border-bottom: 1px solid #5eabd5;
      .lzb-price-header {
        display: flex;
        gap: 0;
        max-width: 100%;
        margin: 0;
        .lzb-item-name_header,
        .lzb-item-regular_header,
        .lzb-item-member_header {
          display:flex;
          justify-content:center;
          align-items:center;
          flex: 1;
          padding: 0.5rem 1rem;
          text-align: center;
          border-radius: 0;
        }
        .lzb-item-name_header {
          flex: 0 0 50%;
          border-right: 1px solid #5eabd5;
          @media screen and (max-width: 600px) {
            flex: 0 0 60% !important;
          }
        }
        .lzb-item-regular_header {
          @media screen and (max-width: 600px) {
            flex: 0 0 40% !important;
          }
        }
        .lzb-item-member_header {
          color: #fff;
          background: #67add4;
          border-left: 1px solid #5eabd5;
          @media screen and (max-width: 600px) {
            flex: 0 0 40% !important;
          }
        }
      }
      .lzb-price-item {
        display: flex;
        gap: 0;
        max-width: 100%;
        margin: 0;
        .lzb-item-name,
        .lzb-item-regular,
        .lzb-item-member {
          flex: 1;
          padding: 1rem;
          background: transparent;
        }
        .lzb-item-name {
          display: flex;
          flex: 0 0 50%;
          align-items: center;
          text-align: left;
          border-top: 1px solid #5eabd5;
          border-right: 1px solid #5eabd5;
          @media screen and (max-width: 600px) {
            flex: 0 0 60% !important;
          }
        }
        .lzb-item-regular {
          border-top: 1px solid #5eabd5;
          @media screen and (max-width: 600px) {
            flex: 0 0 40% !important;
          }
        }
        .lzb-item-member {
          border-top: 1px solid #5eabd5;
          border-left: 1px solid #5eabd5;
          @media screen and (max-width: 600px) {
            flex: 0 0 40% !important;
          }
        }
        .price-strong {
          font-size: clamp(
            1.25rem,
            calc(1rem + 0.667vw),
            1.5rem
          ); /* min: 20px, max: 24px */ /* min: 20px, max: 22px */
          font-weight: 700;
          line-height: 1;
          color: #ee3a52;
          padding: 0;
        }
      }
    }
  }
  .lzb-block-price_m__list {
    .lzb-price-list {
      border: unset;
      border-bottom: 1px solid #5eabd5;
      .lzb-price-header {
        display: flex;
        gap: 0;
        max-width: 100%;
        margin: 0;
        .lzb-item-name_header,
        .lzb-item-regular_header,
        .lzb-item-member_header {
          flex: 1;
          padding: 0.5rem 1rem;
          text-align: center;
          border-radius: 0;
        }
        .lzb-item-name_header {
          flex: 0 0 50%;
          border-right: 1px solid #5eabd5;
          @media screen and (max-width: 600px) {
            flex: 0 0 50%;
          }
        }
        .lzb-item-regular_header {
          flex: 0 0 46%;
          @media screen and (max-width: 600px) {
            flex: 0 0 48%;
          }
        }
      }
      .lzb-price-item {
        display: flex;
        gap: 0;
        max-width: 100%;
        margin: 0;
        .lzb-item-name,
        .lzb-item-regular,
        .lzb-item-member {
          flex: 1;
          padding: 1rem;
          background: transparent;
          @media screen and (max-width: 600px) {
            padding: 0.6rem;
          }
        }
        .lzb-item-name {
          display: flex;
          flex: 0 0 54%;
          align-items: center;
          text-align: left;
          border-top: 1px solid #5eabd5;
          border-right: 1px solid #5eabd5;
          @media screen and (max-width: 600px) {
            flex: 0 0 50%;
          }
        }
        .lzb-item-regular {
          border-top: 1px solid #5eabd5;
          flex: 0 0 46%;
          @media screen and (max-width: 600px) {
            flex: 0 0 48%;
          }
          .member-price {
            display: block;
            font-size: 1.25em;
            @media screen and (max-width: 600px) {
              padding: 0;
              font-size: 1.14em;
            }
            .member-label {
              font-size: 13px;
              font-weight: 400;
              margin: 8px 0 0;
              @media screen and (max-width: 600px) {
                padding: 0;
              }
            }
          }
        }
        .lzb-item-member {
          border-top: 1px solid #5eabd5;
          border-left: 1px solid #5eabd5;
        }
        .price-strong {
          font-size: clamp(
            1.25rem,
            calc(1rem + 0.667vw),
            1.5rem
          ); /* min: 20px, max: 24px */ /* min: 20px, max: 22px */
          font-weight: 700;
          line-height: 1;
          color: #ee3a52;
          padding: 0;
        }
      }
    }
  }
}

/* オプション: モバイル対応 */
@media (max-width: 1000px) {
  .aimfor-image-wrapper {
    flex: 0 0 400px;
  }
}
@media (max-width: 768px) {
  .aimfor-inner {
    display: block;
  }
  .aimfor-image-wrapper {
    margin-bottom: 40px;
  }
  .commitment-box {
    .commitment-image {
      flex: 0 0 250px;
    }
  }
  .page-wrap {
    h2.wp-block-heading {
      font-size: 27px;
    }
  }
  .card-link-wrapper {
    padding: 2rem;
  }
  .card-link-inner {
    .card-link-title {
      margin-bottom: 0px;
    }
  }
}
@media (max-width: 600px) {
  .lzb-block-price__wrapper {
    flex-direction: column;
    align-items: center;
    .lzb-block-header {
      flex-basis: unset;
      img {
        width: 100px;
        height: auto;
      }
    }
    .lzb-block-price__list {
      flex-basis: unset;
    }
    .lzb-item-name_header,
    .lzb-item-name {
      flex: 0 0 33%;
    }
  }

  .lzb-price-item span,
  .lzb-price-header span {
    border-right: none;
  }

  .lzb-price-item span:last-child,
  .lzb-price-header span:last-child {
    border-bottom: none;
  }
  .masonry-grid_layout {
    .wp-block-group__inner-container {
      column-count: 1;
    }
  }
  .lzb-block-option__wrapper {
    img {
      width: 100px;
      height: auto;
    }
  }
  .commitment-box {
    display: block;
  }
  .commitment-box {
    .commitment-image {
      margin-bottom: 30px;
    }
  }
  .aimfor-wrapper {
    padding: 0;
  }
}
