/* //////////////////////////////////////////////////

Title : flower-collect.scss
For   : aoyama-flowermarket/

Created       : 2026-04-14
Last Modified : 2026-04-14

==========================================

Content

////////////////////////////////////////////////// */
/**
 * layout
 */
.p-page-fc__section {
  margin-inline: auto;
  max-width: var(--max-w-section-variant, var(--container-middle));
  width: var(--w-section-variant, 95%);
  padding-block: var(--py-section-variant, var(--py-section));
}
@media (max-width: 767px) {
  .p-page-fc__section {
    --py-section: 40px;
  }
}
@media (min-width: 768px) {
  .p-page-fc__section {
    --py-section: 80px;
  }
}
@media (max-width: 767px) {
  .p-page-fc__section:first-child {
    --py-section-variant: 0 40px;
  }
}
@media (min-width: 768px) {
  .p-page-fc__section:first-child {
    --py-section-variant: 0 80px;
  }
}
.p-page-fc__section .p-page-fc__header {
  --w-header-variant: 100%;
}
.p-page-fc__section .p-page-fc__section {
  --max-w-section-variant: 100%;
  --w-section-variant: 100%;
}

/**
 * flower collect components
 */
/* --- header --- */
.p-page-fc__header {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-y-header);
  max-width: var(--max-w-header-variant, var(--container-middle));
  width: var(--w-header-variant, 95%);
  margin-inline: auto;
  text-align: var(--text-align-header-variant, inherit);
}
@media (max-width: 767px) {
  .p-page-fc__header--main {
    --gap-y-header: 30px;
  }
}
@media (min-width: 768px) {
  .p-page-fc__header--main {
    --gap-y-header: 60px;
  }
}
@media (max-width: 767px) {
  .p-page-fc__header--sub {
    --gap-y-header: 20px;
  }
}
@media (min-width: 768px) {
  .p-page-fc__header--sub {
    --gap-y-header: 40px;
  }
}
.p-page-fc__header + * {
  margin-block: var(--space-y-header-variant, var(--space-y-header));
}
@media (max-width: 767px) {
  .p-page-fc__header + * {
    --space-y-header: 30px 0;
  }
}
@media (min-width: 768px) {
  .p-page-fc__header + * {
    --space-y-header: 60px 0;
  }
}
.p-page-fc__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5em;
}

/* --- typography --- */
.p-page-fc__heading {
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-normal);
  letter-spacing: 0.04em;
  text-box-trim: trim-both;
}
.p-page-fc__lead {
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
  font-weight: var(--fw-lead-variant, 500);
  letter-spacing: 0.04em;
  text-box-trim: trim-both;
}
.p-page-fc__description {
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-box-trim: trim-both;
}

/**
 * hero
 */
.p-page-fc-hero {
  --max-w-section-variant: 100%;
}
.p-page-fc-hero .p-page-fc__header--sub {
  --text-align-header-variant: center;
}
.p-page-fc-hero__figure {
  max-width: var(--container-middle);
  margin-inline: auto;
}
.p-page-fc-hero__content {
  --fw-lead-variant: 700;
  max-width: 1300px;
  -webkit-margin-before: 3em;
          margin-block-start: 3em;
  margin-inline: auto;
}
.p-page-fc-hero__cost {
  display: flex;
  flex-direction: column;
  row-gap: 2.5em;
}
.p-page-fc-hero__cost dt {
  text-align: center;
}
.p-page-fc-hero__cost-title {
  font-size: 3.5em;
  font-weight: 700;
  line-height: var(--leading-normal);
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.p-page-fc-hero__cost-title span {
  font-size: 2em;
}
.p-page-fc-hero__cost-list {
  gap: 2em;
}
@media (max-width: 767px) {
  .p-page-fc-hero__cost-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1280px) {
  .p-page-fc-hero__cost-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1281px) {
  .p-page-fc-hero__cost-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
.p-page-fc-hero__cost-item {
  display: flex;
  flex-direction: column;
  row-gap: 1.5em;
  padding-block: 2.5em;
  padding-inline: 2.375em;
  background-color: var(--color-white-subtle);
}
.p-page-fc-hero__cost-item .p-page-fc__lead {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3em;
  text-align: center;
}
.p-page-fc-hero__cost-item dd {
  display: flex;
  flex-direction: column;
  row-gap: 1.5em;
}
.p-page-fc-hero__cost-image {
  max-width: 208px;
  margin-inline: auto;
}
.p-page-fc-hero__cost-headline {
  font-weight: 700;
  line-height: var(--leading-normal);
  letter-spacing: 0.04em;
  text-align: center;
}

/**
 * service
 */
.p-page-fc-service__hero {
  display: grid;
  gap: 3em;
  /* --- for small viewport --- */
  /* --- for large viewport --- */
}
@media (max-width: 767px) {
  .p-page-fc-service__hero {
    grid-template-columns: 100%;
  }
}
@media (min-width: 768px) {
  .p-page-fc-service__hero {
    grid-template-columns: auto 1fr;
  }
}
.p-page-fc-service__hero-image {
  /* --- for small viewport --- */
  /* --- for large viewport --- */
}
@media (max-width: 767px) {
  .p-page-fc-service__hero-image {
    max-width: 500px;
    margin-inline: auto;
  }
}
@media (min-width: 768px) {
  .p-page-fc-service__hero-image {
    width: clamp(300px, 40vw, 472px);
  }
}
.p-page-fc-service__detail {
  -webkit-margin-before: var(--py-section);
          margin-block-start: var(--py-section);
}
.p-page-fc-service__detail-image {
  -webkit-margin-before: calc(var(--py-section) / 2);
          margin-block-start: calc(var(--py-section) / 2);
}

/**
 * structure
 */
.p-page-fc-structure__image {
  max-width: 1000px;
}

/**
 * recommended
 */
.p-page-fc-recommended__list {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
}
.p-page-fc-recommended__item {
  max-width: 262px;
  width: 100%;
}

/**
 * contact
 */
.p-page-fc-contact .p-page-fc__header {
  text-align: center;
}
.p-page-fc-contact__heading {
  font-size: 2em;
  line-height: var(--leading-normal);
  letter-spacing: 0.04em;
  text-box-trim: trim-both;
}

/**
 * reasons
 */
.p-page-fc-reasons__list {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  counter-reset: reason;
}
.p-page-fc-reasons__item {
  display: grid;
  grid-template-columns: clamp(80px, 25vw, 160px) 1fr;
  align-items: center;
  gap: 3em;
}
.p-page-fc-reasons__description {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.p-page-fc-reasons__description dt::before {
  counter-increment: reason;
  content: counter(reason, decimal) ". ";
}

/**
 * reviews
 */
.p-page-fc-reviews {
  --max-w-section-variant: 100%;
  --w-section-variant: 100%;
}
.p-page-fc-reviews__figure {
  display: flex;
  flex-direction: column;
  gap: 3em;
  width: 240px;
}
.p-page-fc-reviews__figure-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: var(--aspect-square);
  background-color: var(--color-white-subtle);
}
.p-page-fc-reviews__figure-image {
  width: 75px;
}

/**
 * achievements
 */
.p-page-fc-achievements .p-page-fc__header {
  text-align: center;
}
.p-page-fc-achievements__heading {
  font-family: var(--font-ja-serif);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--leading-none);
  letter-spacing: -0.04em;
  text-box-trim: trim-both;
}

/**
 * howto
 */
.p-page-fc-howto__steps {
  display: flex;
  flex-direction: column;
  counter-reset: step;
}
.p-page-fc-howto__step {
  --w-step-number: calc(90 / 16 * 1em);
  position: relative;
  display: grid;
  grid-template-columns: var(--w-step-number) 1fr;
  align-items: center;
  width: 100%;
  padding-block: var(--py-step-variant, 1.75em);
  /* --- for small viewport --- */
  /* --- for large viewport --- */
}
@media (max-width: 767px) {
  .p-page-fc-howto__step {
    gap: 5%;
  }
}
@media (min-width: 768px) {
  .p-page-fc-howto__step {
    gap: 5em;
  }
}
.p-page-fc-howto__step:first-child {
  --py-step-variant: 0 calc(28 / 16 * 1em);
  --top-step-line-variant: 50%;
}
.p-page-fc-howto__step:last-child {
  --py-step-variant: calc(28 / 16 * 1em) 0;
  --bottom-step-line-variant: 50%;
}
.p-page-fc-howto__step::before {
  content: "";
  position: absolute;
  top: var(--top-step-line-variant, 0);
  bottom: var(--bottom-step-line-variant, 0);
  left: calc(var(--w-step-number) / 2);
  width: 1px;
  background-color: var(--color-white-subtle);
  z-index: var(--zindex-base);
}
.p-page-fc-howto__step-number {
  position: relative;
  padding-block: 1em;
  background-color: var(--color-white-subtle);
  color: var(--color-primary);
  text-align: center;
  line-height: 1;
  letter-spacing: 0.04em;
  z-index: var(--zindex-front);
}
.p-page-fc-howto__step-number::after {
  counter-increment: step;
  content: " " counter(step, decimal);
}
.p-page-fc-howto__step-content {
  display: grid;
  align-items: center;
  /* --- for small viewport --- */
  /* --- for large viewport --- */
}
@media (max-width: 767px) {
  .p-page-fc-howto__step-content {
    grid-template-columns: 25% 1fr;
    gap: 5%;
  }
}
@media (min-width: 768px) {
  .p-page-fc-howto__step-content {
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 3.125em;
  }
}
.p-page-fc-howto__step-detail {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

/**
 * conclusion
 */
.p-page-fc-conclusion {
  text-align: center;
}
.p-page-fc-conclusion__lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}
/*# sourceMappingURL=flower-collect.css.map */