@import url(./global/_variable.css);

/* service-flow */
/* ============================================ */

/* flow-change */
/* ============================================ */
.flow-change {
  background-color: var(--bg01_c);
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  border-radius: 50px 50px 0 0;
  position: relative;
  @media (width <= 896px) {
    padding-block: 40px;
  }
}
.flow-change__inner {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 20px;
}
.flow-change__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.625rem, -0.1408rem + 3.1532vw, 2.5rem); /* 40~26(1340~896) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.flow-change__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 50px;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }
}
.flow-change__item {
}
.flow-change__item--after {
}
.flow-change__item-img {
  width: 100%;
  height: auto;
}
.flow-change__item-body {
  padding: 45px 30px 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  @media (width <= 896px) {
    padding: 32px 20px 28px;
    gap: 20px;
  }
}
.body_befor {
  background-color: #fff;
}
.body_after {
  background-color: var(--main_c);
}
.flow-change__item-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.flow-change__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 20px;
  border-radius: 43px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.9375rem, 0.5591rem + 0.6757vw, 1.125rem); /* 18~15(1340~896) */
  font-weight: 700;
  line-height: 1.6;
}
.flow-change__item-badge--before {
  background: #EDF2F9;
  color: var(--main_c);
}
.flow-change__item-badge--after {
  background: var(--dark_c);
  color: #fff;
}
.flow-change__item-label {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.375rem, 0.1137rem + 2.2523vw, 2rem); /* 32~22(1340~896) */
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
}
.flow-change__item-label--before {
  color: var(--dark_c);
}
.flow-change__item-label--after {
  color: #fff;
}
.flow-change__item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.9375rem, 0.5591rem + 0.6757vw, 1.125rem); /* 18~15(1340~896) */
  font-weight: 500;
  line-height: 2;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.flow-change__item-txt--after {
  color: #fff;
}

/* flow-daily */
/* ============================================ */
.flow-daily {
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.flow-daily__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}
.flow-daily__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.flow-daily__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.625rem, -0.1408rem + 3.1532vw, 2.5rem); /* 40~26(1340~896) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.flow-daily__list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 45px;
  @media (width <= 896px) {
    gap: 16px;
    margin-top: 32px;
  }
}
.flow-daily__item {
  display: flex;
  align-items: center;
  gap: 45px;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  @media (width <= 896px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }
}
.flow-daily__item-img {
  flex-shrink: 0;
  width: 270px;
  height: auto;
  aspect-ratio: 270 / 180;
  object-fit: cover;
  border-radius: 10px;
  @media (width <= 896px) {
    width: 100%;
  }
}
.flow-daily__item-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  @media (width <= 896px) {
    gap: 12px;
  }
}
.flow-daily__item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.flow-daily__item-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--main_c);
  font-family: 'Inter', var(--font_normal);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}
.flow-daily__item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.3682rem + 1.3514vw, 1.5rem); /* 24~18(1340~896) */
  font-weight: 500;
  color: var(--font_c);
  word-break: keep-all;
}
.flow-daily__item-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 20px;
  border: 1px solid var(--main_c);
  border-radius: 43px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.9375rem, 0.5591rem + 0.6757vw, 1.125rem); /* 18~15(1340~896) */
  font-weight: 700;
  line-height: 1.6;
  color: var(--main_c);
  white-space: nowrap;
}
.flow-daily__item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  line-height: 1.6;
  color: var(--font_c);
  word-break: keep-all;
}

/* flow-point */
/* ============================================ */
.flow-point {
  background: var(--bg01_c);
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.flow-point__inner {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 20px;
}
.flow-point__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.flow-point__label {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, -0.0101rem + 2.0270vw, 1.6875rem); /* 27~18(1340~896) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--main_c);
  text-align: center;
}
.flow-point__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.875rem, -0.3953rem + 4.0541vw, 3rem); /* 48~30(1340~896) */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.flow-point__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 45px;
  @media (width <= 1025px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (width <= 600px) {
    grid-template-columns: 1fr;
    margin-top: 28px;
    gap: 36px;
  }
}
.flow-point__item-img {
  display: block;
  width: 100%;
  aspect-ratio: 544 / 412;
  object-fit: cover;
  border-radius: 20px;
}
.flow-point__item-ttl {
  margin-top: 35px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.3682rem + 1.3514vw, 1.5rem); /* 24~18(1340~896) */
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
  @media (width <= 896px) {
    margin-top: 16px;
  }
}
.flow-point__item-txt {
  margin-top: 20px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  line-height: 2.1;
  color: var(--font_c);
  @media (width <= 896px) {
    margin-top: 10px;
  }
}

/* flow-intro */
/* ============================================ */
.flow-intro {
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  background-color: #FFF;
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.flow-intro__inner {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 20px;
}
.flow-intro__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.flow-intro__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.625rem, -0.1408rem + 3.1532vw, 2.5rem); /* 40~26(1340~896) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.flow-intro__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: #DAE9FF;
  border-radius: 10px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.9375rem, 0.5591rem + 0.6757vw, 1.125rem); /* 18~15(1340~896) */
  font-weight: 700;
  line-height: 1.6;
  color: var(--main_c);
}
.flow-intro__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 50px;
  @media (width <= 1025px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (width <= 600px) {
    grid-template-columns: 1fr;
    max-width: 425px;
    margin-inline: auto;
  }
}
.flow-intro__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 55px 30px 50px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  @media (width <= 896px) {
    gap: 24px;
    padding: 32px 20px;
  }
}
.flow-intro__item-icon {
  display: block;
  width: auto;
  height: 130px;
  max-width: 100%;
}
.flow-intro__item-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.flow-intro__item-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 30px;
  background: var(--main_c);
  border-radius: 30px;
  font-family: 'Inter', var(--font_normal);
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.flow-intro__item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.1160rem + 1.8018vw, 1.625rem); /* 26~18(1340~896) */
  font-weight: 500;
  color: var(--font_c);
  word-break: keep-all;
}
.flow-intro__item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  line-height: 1.7;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}