@charset "UTF-8";
/* 901〜1200px: 4列レイアウトのコンパクトカード（1201px〜が通常サイズ） */
/* 1025〜1200px: コンパクト帯の後半は余白に合わせてやや拡げる */
@layer project {
  /*
   * イントロ → ご来店前: 片側だけでセクション間を取る（料金ページの intro/breakdown と同様）。
   * 以前は intro の padding-bottom と previsit の padding-top が両方 6.25rem で二重になっていた。
   */
  .p-flow-page.l-section {
    padding-block: 6.25rem 5rem;
  }
  .p-flow-page__previsit.l-section {
    padding-block: 0;
  }
  .p-flow-page__steps.l-section {
    padding-block: 5rem 6.25rem;
  }
  /*
   * 詳細STEP → アフターフォロー: 片側だけでセクション間を取る。
   * 以前は steps の padding-bottom と aftercare の padding-top が両方 6.25rem で二重だった。
   */
  .p-flow-page__aftercare.l-section {
    padding-block: 0 6.25rem;
  }
  @media not all and (min-width: 1024px) {
    .p-flow-page.l-section {
      padding-block: 4rem 2.75rem;
    }
    .p-flow-page__previsit.l-section {
      padding-block: 0;
    }
    .p-flow-page__steps.l-section {
      padding-block: 4rem;
    }
    .p-flow-page__aftercare.l-section {
      padding-block: 0 4rem;
    }
  }
  @media not all and (min-width: 768px) {
    .p-flow-page.l-section {
      padding-block: clamp(3.5rem, 12vw, 4.5rem) clamp(2rem, 7vw, 2.75rem);
    }
    .p-flow-page__previsit.l-section {
      padding-block: 0;
    }
    .p-flow-page__steps.l-section {
      padding-block: clamp(3.5rem, 12vw, 4.5rem) clamp(2rem, 7vw, 2.75rem);
      padding-top: clamp(2.5rem, 10vw, 3.5rem);
    }
    .p-flow-page__aftercare.l-section {
      padding-block: 0 clamp(3.5rem, 12vw, 4.5rem);
    }
  }
}
@layer project {
  .p-flow-page__intro {
    text-align: center;
  }
  .p-flow-page__kicker {
    margin: 0 0 0.65rem;
    color: var(--color-orange);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 2.1875rem;
  }
  .p-flow-page__hero-title {
    position: relative;
    margin: 0 0 0.65rem;
    font-size: 4.375rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 4.75rem;
  }
  .p-flow-page__hero-title-main {
    color: var(--color-ink);
  }
  .p-flow-page__hero-title-accent {
    position: relative;
    isolation: isolate;
    color: var(--color-orange);
  }
  .p-flow-page__hero-title-accent::after {
    position: absolute;
    bottom: 0.35rem;
    left: 0;
    z-index: -1;
    width: 10rem;
    height: 1.25rem;
    background: var(--color-yellow);
    content: "";
  }
  .p-flow-page__lead {
    margin: 0 auto 2.8rem;
    max-width: 56rem;
    color: var(--color-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 2.1875rem;
  }
  .p-flow-page__lead-accent {
    color: var(--color-orange);
  }
  .p-flow-page__mini-steps {
    --flow-mini-row-gap: 2rem;
    --flow-mini-col-gap: 2.875rem;
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--flow-mini-row-gap) var(--flow-mini-col-gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
  }
  /*
   * 901px以上: 8列グリッドで1行4枚・2行3枚を同じカード幅のまま中央寄せ
   * （2行目は col 2 / 4 / 6 から span 2）
   */
  @media (min-width: 901px) {
    .p-flow-page__mini-steps {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .p-flow-page__mini-steps > li:nth-child(1) {
      grid-column: 1/span 2;
    }
    .p-flow-page__mini-steps > li:nth-child(2) {
      grid-column: 3/span 2;
    }
    .p-flow-page__mini-steps > li:nth-child(3) {
      grid-column: 5/span 2;
    }
    .p-flow-page__mini-steps > li:nth-child(4) {
      grid-column: 7/span 2;
    }
    .p-flow-page__mini-steps > li:nth-child(5) {
      grid-column: 2/span 2;
    }
    .p-flow-page__mini-steps > li:nth-child(6) {
      grid-column: 4/span 2;
    }
    .p-flow-page__mini-steps > li:nth-child(7) {
      grid-column: 6/span 2;
    }
  }
  .p-flow-page__mini-card {
    position: relative;
    display: flex;
    min-height: 6.875rem;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 0.9rem;
    background: var(--color-white);
    border: 1px solid #e5e5e5;
    border-radius: 1rem;
    box-shadow: 0 6px 11px rgba(34, 34, 34, 0.04);
  }
  .p-flow-page__mini-card:not(:nth-child(4)):not(:nth-child(7))::after {
    position: absolute;
    top: 50%;
    /* 列 gap の中央に矢印を置く（gap 変更時も追従） */
    right: calc(-0.5 * (var(--flow-mini-col-gap) + 1.125rem));
    width: 1.125rem;
    height: 1.125rem;
    background: url("../images/home/flow-step-arrow.svg") center/contain no-repeat;
    content: "";
    transform: translateY(-50%);
  }
  .p-flow-page__mini-num {
    display: grid;
    width: 4.45rem;
    height: 4.45rem;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--color-white) 0%, var(--color-orange-soft) 70%, #f7dfc7 100%);
    color: var(--color-orange);
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
  }
  .p-flow-page__mini-label {
    color: var(--color-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.625rem;
    text-align: left;
  }
  /* 901〜1200px: コンパクト（1201px〜はこのブロック外＝通常サイズ） */
  @media (min-width: 901px) and (max-width: 1200px) {
    .p-flow-page__mini-steps {
      --flow-mini-row-gap: 1.25rem;
      --flow-mini-col-gap: 1.5rem;
    }
    .p-flow-page__mini-card {
      min-height: 5.75rem;
      padding: 0.75rem 0.85rem;
      gap: 0.5rem;
    }
    .p-flow-page__mini-num {
      width: 3.5rem;
      height: 3.5rem;
      font-size: 1.75rem;
    }
    .p-flow-page__mini-label {
      font-size: 1.0625rem;
      line-height: 1.35;
    }
  }
  @media (min-width: 1025px) and (max-width: 1200px) {
    .p-flow-page__mini-steps {
      --flow-mini-row-gap: 1.5rem;
      --flow-mini-col-gap: 1.75rem;
    }
    .p-flow-page__mini-card {
      min-height: 6.125rem;
      padding: 0.85rem 1rem;
      gap: 0.65rem;
    }
    .p-flow-page__mini-num {
      width: 3.75rem;
      height: 3.75rem;
      font-size: 1.875rem;
    }
    .p-flow-page__mini-label {
      font-size: 1.125rem;
      line-height: 1.4;
    }
  }
  @media not all and (min-width: 901px) {
    .p-flow-page__mini-steps {
      --flow-mini-row-gap: 0.75rem;
      --flow-mini-col-gap: 0.65rem;
      gap: var(--flow-mini-row-gap) var(--flow-mini-col-gap);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .p-flow-page__mini-steps > li:nth-child(n) {
      grid-column: auto;
    }
    .p-flow-page__mini-card {
      min-height: 0;
      padding: 0.7rem 0.75rem;
      gap: 0.5rem;
    }
    .p-flow-page__mini-num {
      width: 3.125rem;
      height: 3.125rem;
      font-size: 1.5625rem;
    }
    .p-flow-page__mini-label {
      font-size: 0.9375rem;
      line-height: 1.35;
    }
    .p-flow-page__mini-card::after {
      display: none;
    }
  }
  @media not all and (min-width: 768px) {
    .p-flow-page__intro {
      text-align: left;
    }
    .p-flow-page__kicker {
      font-size: clamp(0.95rem, 3.5vw, 1.25rem);
      line-height: 1.75;
    }
    .p-flow-page__hero-title {
      font-size: clamp(2rem, 9vw, 2.75rem);
      line-height: 1.25;
    }
    .p-flow-page__hero-title-accent::after {
      width: 5.5rem;
      height: 0.65rem;
    }
    .p-flow-page__lead {
      margin-bottom: 1.5rem;
      font-size: 1rem;
      line-height: 1.75;
      text-align: left;
    }
    .p-flow-page__mini-steps {
      gap: 0.625rem 0.5rem;
    }
    .p-flow-page__mini-card {
      min-height: 0;
      padding: 0.625rem 0.65rem;
      gap: 0.45rem;
    }
    .p-flow-page__mini-num {
      width: 2.875rem;
      height: 2.875rem;
      font-size: 1.375rem;
    }
    .p-flow-page__mini-label {
      font-size: 0.9375rem;
      line-height: 1.3;
    }
  }
}
@layer project {
  .p-flow-page__previsit-title {
    margin: 0 0 2.5rem;
    color: var(--color-ink);
    font-size: 2.375rem;
    font-weight: 900;
    line-height: 2.5rem;
    text-align: center;
  }
  .p-flow-page__previsit-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-flow-page__notice {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.6875rem;
    gap: 1.25rem;
    background: var(--color-orange-soft);
  }
  .p-flow-page__notice-title {
    margin: 0;
    color: var(--color-orange);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2.5rem;
  }
  .p-flow-page__notice-body {
    margin: 0;
    color: var(--color-ink);
    font-size: 1.0625rem;
    line-height: 1.625rem;
  }
  .p-flow-page__notice-body .u-text-red {
    color: var(--color-red);
  }
  .p-flow-page__notice-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .p-flow-page__notice-list li {
    line-height: 1.625rem;
  }
  @media not all and (min-width: 768px) {
    .p-flow-page__previsit-title {
      margin-bottom: 1.5rem;
      font-size: clamp(1.35rem, 6vw, 2.375rem);
      line-height: 1.35;
    }
    .p-flow-page__previsit-grid {
      grid-template-columns: 1fr;
    }
    .p-flow-page__notice {
      padding: 1rem 1.1rem;
    }
    .p-flow-page__notice-title {
      font-size: clamp(1.125rem, 4.5vw, 1.75rem);
      line-height: 1.45;
    }
    .p-flow-page__notice-body {
      font-size: 1rem;
      line-height: 1.75;
    }
  }
}
@layer project {
  .p-flow-page__steps-title {
    margin: 0 0 5rem;
    color: var(--color-ink);
    font-size: 2.375rem;
    font-weight: 900;
    line-height: 2.5rem;
    text-align: center;
  }
  .p-flow-page__step-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 4rem;
    list-style: none;
  }
  .p-flow-page__step {
    align-items: stretch;
  }
  @media (min-width: 768px) {
    .p-flow-page__step {
      display: grid;
      gap: 2.5rem;
      grid-template-columns: 7.5rem minmax(0, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .p-flow-page__step {
      gap: 10rem;
      grid-template-columns: 11.25rem minmax(0, 1fr);
    }
    .p-flow-page__step-num {
      font-size: 4.375rem;
      line-height: 4.625rem;
    }
    .p-flow-page__step-label {
      font-size: 1.875rem;
      letter-spacing: 0.1875rem;
      line-height: 2.25rem;
    }
  }
  .p-flow-page__step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    text-align: center;
  }
  .p-flow-page__step-label {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: 0.1875rem;
    line-height: 2.25rem;
  }
  .p-flow-page__step-num {
    color: var(--color-orange);
    font-family: var(--font-display);
    font-size: 4.375rem;
    font-weight: 900;
    line-height: 4.625rem;
  }
  .p-flow-page__step-line {
    width: 0;
    flex: 1 1 auto;
    align-self: center;
    min-height: 3rem;
    border-left: 4px dashed #d9d9d9;
  }
  .p-flow-page__step:last-child .p-flow-page__step-line {
    display: none;
  }
  .p-flow-page__step-heading {
    margin: 0 0 0.625rem;
    color: var(--color-orange);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2.5rem;
  }
  .p-flow-page__step-lead {
    margin: 0 0 0.625rem;
    color: var(--color-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.625rem;
  }
  .p-flow-page__step-body {
    margin: 0;
    color: var(--color-ink);
    font-size: 1.0625rem;
    line-height: 1.875rem;
  }
  .p-flow-page__step-body p {
    margin: 0;
  }
  .p-flow-page__step-body p + p {
    margin-top: 0;
  }
  .p-flow-page__step-photos {
    display: flex;
    margin-top: 1.25rem;
    gap: 1.25rem;
  }
  .p-flow-page__step-photo {
    overflow: hidden;
    border: 1px solid #e5e5e5;
    aspect-ratio: 4/3;
  }
  .p-flow-page__step-photo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  /*
   * 768px以上: 2枚は横並び（本文幅に合わせて可変）。
   * 固定 360px + flex-wrap だと、1024px付近で STEP 列 gap が 10rem のとき本文が狭く縦積みになる。
   */
  @media (min-width: 768px) {
    .p-flow-page__step-photos {
      flex-flow: row nowrap;
      align-items: stretch;
    }
    .p-flow-page__step-photo {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      max-width: none;
      height: auto;
    }
    .p-flow-page__step-photo:only-child {
      flex: 0 1 22.5rem;
      max-width: min(100%, 22.5rem);
    }
  }
  @media not all and (min-width: 1024px) {
    .p-flow-page__steps-title {
      margin-bottom: 3rem;
      font-size: clamp(1.5rem, 4vw, 2.375rem);
    }
    .p-flow-page__step-list {
      gap: 3rem;
    }
    .p-flow-page__step-num {
      font-size: 3.25rem;
      line-height: 1.1;
    }
    .p-flow-page__step-label {
      font-size: 1.375rem;
      letter-spacing: 0.12em;
    }
  }
  @media not all and (min-width: 768px) {
    .p-flow-page__steps-title {
      margin-bottom: 2rem;
      text-align: left;
    }
    .p-flow-page__step-list {
      gap: 2.5rem;
    }
    .p-flow-page__step {
      display: grid;
      align-items: center;
      gap: 0.75rem 0.65rem;
      grid-template-columns: auto minmax(0, 1fr);
    }
    .p-flow-page__step-rail {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      min-height: 0;
      grid-column: 1;
      grid-row: 1;
      gap: 0.5rem 0.75rem;
    }
    /* 見出しを STEP 番号の右へ（HTML は h3 のまま、配置のみ変更） */
    .p-flow-page__step-content {
      display: contents;
    }
    .p-flow-page__step-heading {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      align-self: center;
      /* 393px付近≈24px、767px付近≈28px */
      font-size: clamp(1.5rem, 1.375rem + 0.95vw, 1.75rem);
      line-height: 1.35;
    }
    .p-flow-page__step-lead {
      grid-column: 1/-1;
      grid-row: 2;
    }
    .p-flow-page__step-body {
      grid-column: 1/-1;
      grid-row: 3;
    }
    .p-flow-page__step-photos {
      grid-column: 1/-1;
      grid-row: 4;
    }
    .p-flow-page__step-line {
      display: none;
    }
    .p-flow-page__step-label {
      font-size: 0.875rem;
      letter-spacing: 0.08em;
      line-height: 1.25;
    }
    .p-flow-page__step-num {
      font-size: 2.5rem;
      line-height: 1;
    }
    .p-flow-page__step-lead,
    .p-flow-page__step-body {
      font-size: 1rem;
      line-height: 1.75;
    }
    .p-flow-page__step-body p + p {
      margin-top: 0.5rem;
    }
    /* 600〜767px: 2枚写真は横並び（本文幅いっぱいで可変） */
    .p-flow-page__step-photos {
      flex-flow: row nowrap;
      align-items: stretch;
      justify-content: flex-start;
      margin-top: 1rem;
      gap: 0.875rem;
    }
    .p-flow-page__step-photo {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      max-width: none;
      height: auto;
    }
    .p-flow-page__step-photo:only-child {
      flex: 0 1 22.5rem;
      max-width: min(100%, 22.5rem);
    }
    /* 599px以下: 1列・最大360px・中央寄せ */
    @media (max-width: 599px) {
      .p-flow-page__step-photos {
        flex-flow: column nowrap;
        align-items: center;
      }
      .p-flow-page__step-photo,
      .p-flow-page__step-photo:only-child {
        flex: none;
        width: 100%;
        max-width: 22.5rem;
      }
    }
  }
}
@layer project {
  .p-flow-page__aftercare-title {
    margin: 0 0 1.25rem;
    color: var(--color-ink);
    font-size: 2.375rem;
    font-weight: 900;
    line-height: 2.5rem;
  }
  .p-flow-page__aftercare-lead {
    margin: 0 0 1.25rem;
    color: var(--color-orange);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2.5rem;
  }
  .p-flow-page__aftercare-body {
    margin: 0;
    max-width: 75rem;
    color: var(--color-ink);
    font-size: 1.0625rem;
    line-height: 1.875rem;
  }
  @media not all and (min-width: 768px) {
    .p-flow-page__aftercare-title {
      font-size: clamp(1.35rem, 6vw, 2.375rem);
      line-height: 1.35;
    }
    .p-flow-page__aftercare-lead {
      font-size: clamp(1.0625rem, 4.2vw, 1.75rem);
      line-height: 1.45;
    }
    .p-flow-page__aftercare-body {
      font-size: 1rem;
      line-height: 1.75;
    }
  }
}
/*# sourceMappingURL=_maps/flow.css.map */