@charset "UTF-8";

/* ============================================
   page-personal (個人Top) 固有スタイル
============================================ */

/* ─── p-personal-mv ─── */

.p-personal-mv {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(82px, 77px + 1.22vw, 95px) clamp(22px, -5px + 7.32vw, 100px);
  background: var(--color-white);
}

.p-personal-mv__inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (min-width: 768px) {
    align-items: flex-start;
    max-width: calc(1216px + 60px);
    padding-block: clamp(10px, -30px + 5.21vw, 45px);
  }
}

.p-personal-mv__bg {
  display: block;
  order: 2;
  width: calc(100% + 68px);
  margin: -16px -8px 12px 0;

  @media (min-width: 768px) {
    order: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 110%;
    max-width: calc(1340px + 60px);
    margin-top: 0;
    margin-inline: 0;
    aspect-ratio: 2678 / 1435;
    padding-inline: 30px;
  }
}

.p-personal-mv__bg img {
  display: block;
  width: 100%;
  height: auto;

  @media (min-width: 768px) {
    height: 100%;
    object-fit: contain;
  }
}

.p-personal-mv__heading {
  order: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;

  @media (min-width: 768px) {
    order: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(10px, 5px + 0.6vw, 14px);
    width: auto;
  }
}

.p-personal-mv__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;

  @media (min-width: 768px) {
    gap: clamp(10px, 3px + 1.64vw, 21px);
  }
}

.p-personal-mv__title-line {
  position: relative;
  display: inline-block;
  --clamp-min: 33;
  --clamp-max: 48;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.4;
  padding-bottom: 6px;

  @media (min-width: 768px) {
    padding-bottom: 7px;
  }
}

.p-personal-mv__title-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 1px;
  background-image: linear-gradient(to right, var(--color-black) 55%, transparent 55%);
  background-size: 7px 1px;
  background-repeat: repeat-x;
}

.p-personal-mv__lead {
  writing-mode: vertical-rl;
  white-space: nowrap;
  --clamp-min: 17;
  --clamp-max: 22;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding-top: 10px;

  @media (min-width: 768px) {
    writing-mode: horizontal-tb;
    letter-spacing: 0;
    white-space: normal;
    margin-bottom: clamp(10px, -59px + 8.93vw, 70px);
  }
}

.p-personal-mv__badges {
  order: 3;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 322px;
  margin-bottom: 25px;
  
  @media (min-width: 768px) {
    order: 0;
    max-width: clamp(250px, 168px + 10.71vw, 322px);
    margin-bottom: 24px;
  }
}

.p-personal-mv__badge {
  position: relative;
  flex: 1;
  --clamp-min: 16;
  --clamp-max: 16;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-align: center;

  @media (min-width: 768px) {
    --clamp-min: 14;
    --clamp-max: 16;
  }
}

.p-personal-mv__badge::before,
.p-personal-mv__badges > .p-personal-mv__badge:last-child::after {
  content: '';
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  width: 10px;
  height: 80px;
  background: linear-gradient(to right, #D4CDC4 0 3px, transparent 3px 7px, #D4CDC4 7px 10px);

  @media (min-width: 768px) {
    background: linear-gradient(to right, #fff 0 3px, transparent 3px 7px, #fff 7px 10px);
  }
}

.p-personal-mv__badge::before {
  left: -3px;

  @media (min-width: 768px) {
    left: 0;
  }
}

.p-personal-mv__badges > .p-personal-mv__badge:last-child::after {
  right: 0;
}

.p-personal-mv__badges > .p-personal-mv__badge:last-child::before {
  left: -15px;
}

.p-personal-mv__badges > .p-personal-mv__badge:last-child::after {
  right: -18px;

  @media (min-width: 768px) {
    right: -15px;
  }
}

.p-personal-mv__badges > .p-personal-mv__badge:first-child {
  letter-spacing: 0.04em;
}

.p-personal-mv__badges > .p-personal-mv__badge:last-child {
  letter-spacing: -0.03em;
}

.p-personal-mv__badge-strong {
  display: inline-block;
  font-weight: var(--font-weight-black);
  background: linear-gradient(transparent 60%, var(--color-yellow) 60%);
  color: var(--color-black);
}

.p-personal-mv__badge-num {
  --clamp-min: 20;
  --clamp-max: 20;

  @media (min-width: 768px) {
    --clamp-min: 18;
    --clamp-max: 20;
  }
}

.p-personal-mv__cta {
  order: 4;
  width: 335px;

  @media (min-width: 768px) {
    order: 0;
    width: 100%;
    max-width: clamp(272px, 200px + 9.38vw, 335px);
  }
}

/* ─── p-personal-about ─── */

.p-personal-about {
  padding-block: 18px 0;
  position: relative;
  overflow-x: clip;

  @media (min-width: 768px) {
    padding-block: clamp(50px, -87px + 17.86vw, 170px) 0;
  }
}

.p-personal-about::before {
  content: '';
  position: absolute;
  top: -125px;
  right: -100px;
  width: 205px;
  aspect-ratio: 811 / 820;
  background: url(../img/personal/personal-about-deco.webp) center / contain no-repeat;
  z-index: -1;

  @media (min-width: 768px) {
    top: 77px;
    left: max(-272px, calc(50% - 1440px / 2 - 272px));
    right: auto;
    width: calc(405 / 1440 * 100%);
    max-width: 405px;
  }
}

.p-personal-about__inner {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-inline: 30px;
  
  @media (min-width: 768px) {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 424px) 1fr;
    padding-inline: 0;
    padding-left: max(30px, calc((100% - 1140px) / 2 + 30px));
  }
}

.p-personal-about__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  
  @media (min-width: 768px) {
    padding-bottom: 20px;
    gap: 20px;
  }
}

.p-personal-about__sub-title {
  margin-bottom: 0;

  @media (min-width: 768px) {
    margin-bottom: 14px;
  }
}

.p-personal-about__title {
  --clamp-min: 24;
  --clamp-max: 32;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  line-height: 1.8;
  
  @media (min-width: 768px) {
    letter-spacing: 0;
  }
}

.p-personal-about__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-personal-about__lead,
.p-personal-about__text {
  --clamp-min: 14;
  --clamp-max: 18;
  letter-spacing: 0;
  line-height: 1.8;
}

.p-personal-about__media {
  position: relative;
  width: calc(100% + 60px); /* SP: 左右 padding 30px を打ち消し */
  margin-inline: -30px;

  @media (min-width: 768px) {
    width: calc(100% + 150px); /* PC: 左に 120px はみ出して文字と重ねる */
    margin-inline: -150px 0;
  }
}

.p-personal-about__image {
  display: block;
  width: 100%;
  aspect-ratio: 750 / 486;
  
  @media (min-width: 768px) {
    aspect-ratio: 956 / 571;
  }
}

.p-personal-about__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(189, 141, 0, 0.1);
}

/* ─── p-personal-features ─── */

.p-personal-features {
  padding-block: 58px 78px;
  background: var(--color-bg-cream);
  overflow-x: clip;

  @media (min-width: 768px) {
    padding-block: 124px;
  }
}

.p-personal-features__inner {
  @media (min-width: 768px) {
    position: relative;
  }
}

.p-personal-features__inner::before {
  @media (min-width: 768px) {
    content: '';
    position: absolute;
    bottom: -140px;
    left: -200px;
    width: 590px;
    aspect-ratio: 208 / 317;
    background: url(../img/personal/personal-feature-deco.webp) center / contain no-repeat;
    transform: rotate(134.88deg);
  }
}

.p-personal-features__inner::after {
  @media (min-width: 768px) {
    content: '';
    position: absolute;
    bottom: -340px;
    right: -300px;
    width: 590px;
    aspect-ratio: 208 / 317;
    background: url(../img/personal/personal-feature-deco.webp) center / contain no-repeat;
    transform: rotate(56.46deg);
  }
}

.p-personal-features__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  margin-bottom: 36px;
  
  @media (min-width: 768px) {
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 75px;
    position: relative;
  }
}

.p-personal-features__heading::before {

  @media (min-width: 768px) {
    content: '';
    position: absolute;
    top: -250px;
    right: -135px;
    width: 590px;
    aspect-ratio: 208 / 317;
    background: url(../img/personal/personal-feature-deco.webp) center / contain no-repeat;
    transform: rotate(-79.27deg);
  }
}

.p-personal-features__lead {
  --clamp-min: 14;
  --clamp-max: 16;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.5;
}

.p-personal-features__list {
  display: flex;
  flex-direction: column;
  gap: 30px;

  @media (min-width: 768px) {
    gap: 88px;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  .p-personal-features__list > .c-step-card:nth-child(even) {
    flex-direction: row-reverse;
  }
}

/* ─── p-personal-worry ─── */

.p-personal-worry {
  background-image: url(../img/personal/personal-worry-bg_sp.webp);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding-block: 50px 48px;
  overflow-x: clip;

  @media (min-width: 768px) {
    aspect-ratio: 2880 / 1262;
    background-image: url(../img/personal/personal-worry-bg.webp);
    padding-block: clamp(80px, 8px + 9.38vw, 143px) 48px;
    position: relative;
  }
}

.p-personal-worry::before {
  @media (min-width: 768px) {
    content: '';
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 150px;
    background: var(--color-gold);
  }
}

.p-personal-worry__inner {
  text-align: center;

  @media (min-width: 768px) {
    max-width: calc(1175px + 60px);
  }
}

.p-personal-worry__title {
  --clamp-min: 24;
  --clamp-max: 28;
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  letter-spacing: 0.16em;
  line-height: 1.5;
  margin-bottom: -18px;
  
  @media (min-width: 768px) {
    margin-bottom: clamp(-60px, -5.208vw + 15px, -25px);
  }
}

.p-personal-worry__list {
  display: grid;
  grid-template-columns: 1fr;

  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0px, -46px + 5.95vw, 40px);
    align-items: start;
  }
}

.p-personal-worry__item {
  aspect-ratio: 554 / 510;
  position: relative;
  width: clamp(274px, 153px + 32.14vw, 400px);
  
  @media (min-width: 768px) {
    aspect-ratio: 724 / 572;
    width: 100%;
  }
}

.p-personal-worry__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-personal-worry__item:nth-child(1) {
  transform: translateX(20px);

  @media (min-width: 768px) {
    transform: translateX(27px);
  }

  &::before {
  background: url(../img/personal/personal-worry01_sp.webp) center / contain no-repeat;
  
  @media (min-width: 768px) {
    background: url(../img/personal/personal-worry01.webp) center / contain no-repeat;
    }
  }
}

.p-personal-worry__item:nth-child(2) {
  justify-self: end;
  transform: translate(10px, -25px);

  @media (min-width: 768px) {
    justify-self: stretch;
    transform: translate(0, 130px);
  }

  &::before {
  background: url(../img/personal/personal-worry02_sp.webp) center / contain no-repeat;

  @media (min-width: 768px) {
    background: url(../img/personal/personal-worry02.webp) center / contain no-repeat;
    }
  }
}

.p-personal-worry__item:nth-child(3) {
  transform: translateX(2px);

  @media (min-width: 768px) {
    transform: translate(-48px, 10px);
  }

  &::before {
  background: url(../img/personal/personal-worry03_sp.webp) center / contain no-repeat;

  @media (min-width: 768px) {
    background: url(../img/personal/personal-worry03.webp) center / contain no-repeat;
    }
  }
}

.p-personal-worry__text {
  --clamp-min: 14;
  --clamp-max: 21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.6;
  position: relative;
}

.p-personal-worry__item:nth-child(1) .p-personal-worry__text {
  top: 51%;

  @media (min-width: 768px) {
    top: 54%;
  }
}

.p-personal-worry__item:nth-child(2) .p-personal-worry__text {
  top: 55%;

  @media (min-width: 768px) {
    top: 54%;
  }
}

.p-personal-worry__item:nth-child(3) .p-personal-worry__text {
  top: 54%;

  @media (min-width: 768px) {
    top: 54%;
  }
}

/* ─── p-personal-staff ─── */

.p-personal-staff {
  padding-block: 58px 180px;
  overflow-x: clip;
  background: var(--color-bg-cream);
  position: relative;

  @media (min-width: 768px) {
    padding-block: 120px 208px;
  }
}

.p-personal-staff::before {
  content: '';
  position: absolute;
  bottom: clamp(-215px, -37.5vw + 73px, -68px);
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  aspect-ratio: 375 / 140;
  background: url(../img/personal/personal-staff-line_sp.webp) center / contain no-repeat;

  @media (min-width: 768px) {
    bottom: clamp(0px, 86px - 4.29vw, 24px);
    width: 100%;
    aspect-ratio: 1440 / 200;
    background: url(../img/personal/personal-staff-line.webp) center / cover no-repeat;
  }
}

.p-personal-staff__inner {

  @media (min-width: 768px) {
    max-width: calc(996px + 60px);
    position: relative;
  }
}

.p-personal-staff__batch {
  text-align: center;
  margin-bottom: 5px;
  
  @media (min-width: 768px) {
    text-align: left;
    position: absolute;
    z-index: 1;
    top: 62px;
    left: clamp(-155px, -43.056vw + 465px, 0px);
    margin-bottom: 100px;
  }
}

.p-personal-staff__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: 40px;

  @media (min-width: 768px) {
    margin-bottom: 100px;
  }
}

.p-personal-staff__lead {
  --clamp-min: 20;
  --clamp-max: 28;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1.5;

  @media (min-width: 768px) {
    letter-spacing: 0;
  }
}

.p-personal-staff__lead-strong {
  color: var(--color-gold);
}

.p-personal-staff__slider {
  display: flex;
  flex-direction: column;
  gap: 40px;

  @media (min-width: 768px) {
    flex-direction: row;
    gap: 0;
    padding-top: 30px;
    margin-top: -30px;
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  @media (min-width: 768px) {
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.p-personal-staff__slider .p-personal-staff__item {
  @media (min-width: 768px) {
    flex: 0 0 auto;
    width: 332px;
    padding-inline: 16px;
  }
}

.p-personal-staff__item {
  padding-inline: 8px;

  @media (min-width: 768px) {
    padding-inline: 0;
  }
}

/* ─── p-personal-price ─── */

.p-personal-price {
  padding-block: 60px 86px;
  position: relative;
  overflow-x: clip;

  @media (min-width: 768px) {
    /* padding-block: 100px; */
    padding-block: 104px;
  }
}

.p-personal-price::before {

  @media (min-width: 768px) {
    content: '';
    position: absolute;
    bottom: 0;
    right: -245px;
    width: calc(1090 / 1440 * 100%);
    aspect-ratio: 1090 / 223;
    background: url(../img/personal/personal-price-deco.webp) center / contain no-repeat;
  }
}

.p-personal-price__heading {
  margin-bottom: 35px;

  @media (min-width: 768px) {
    margin-bottom: 78px;
  }
}

.p-personal-price__inner {
  @media (min-width: 768px) {
    container-type: inline-size;
  }
}

/* ご利用いただける方エリア */

.p-personal-price__target {
  position: relative;
}

.p-personal-price__target-title {
  --clamp-min: 20;
  --clamp-max: 24;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 12px;

  @media (min-width: 768px) {
    margin-bottom: 20px;
  }
}

.p-personal-price__target-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  isolation: isolate;
  margin-bottom: 20px;

  @media (min-width: 768px) {
    flex-direction: row;
    justify-content: center;
    width: auto;
    margin-bottom: 28px;
  }
}

/* 円形要素の重なりレイアウトのためネガティブマージン使用（ルール例外） */
.p-personal-price__target-item {
  position: relative;
  width: 100%;
  aspect-ratio: 315 / 207;
  display: grid;
  place-items: center;

  @media (min-width: 768px) {
    width: 324px;
    aspect-ratio: 1;
    margin-top: 0;
    margin-left: -58px;
  }
}

.p-personal-price__target-item:nth-child(1) {
  margin-top: 0;
  z-index: 100;

  @media (min-width: 768px) {
    margin-left: 0;
  }
}

.p-personal-price__target-item:nth-child(2) {
  margin-top: -47px;
  z-index: 10;

  @media (min-width: 768px) {
    margin-top: 0;
  }
}

.p-personal-price__target-item:nth-child(3) {
  margin-top: -32px;
  z-index: 10;

  @media (min-width: 768px) {
    margin-top: 0;
  }
}
.p-personal-price__target-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg-cream-light);
  border-radius: 50%;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* 2番目・3番目は円全体クリーム色にするため、中身の白円を非表示 */
.p-personal-price__target-item:nth-child(2) .p-personal-price__target-inner::before,
.p-personal-price__target-item:nth-child(3) .p-personal-price__target-inner::before {
  content: none;
}

.p-personal-price__target-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  @media (min-width: 768px) {
    width: clamp(250px, 209px + 5.36vw, 286px);
    height: clamp(250px, 209px + 5.36vw, 286px);
    border-radius: 50%;
  }
}

.p-personal-price__target-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-white);
  border-radius: 50%;
  mix-blend-mode: multiply;
  z-index: -1;
}

.p-personal-price__target-item:nth-child(1) .p-personal-price__target-inner {
  width: 86%;
  height: 86%;
  background: var(--color-white);
  border-radius: 50%;

  @media (min-width: 768px) {
    width: clamp(250px, 209px + 5.36vw, 286px);
    height: clamp(250px, 209px + 5.36vw, 286px);
  }
}

.p-personal-price__target-text {
  --clamp-min: 18;
  --clamp-max: 24;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.5;
}

.p-personal-price__target-text--large {
  --clamp-min: 24;
  --clamp-max: 24;
}

.p-personal-price__target-text-strong {
  --clamp-min: 24;
  --clamp-max: 35;
}

.p-personal-price__target-prefix {
  --clamp-min: 14;
  --clamp-max: 16;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 4px;
}

.p-personal-price__target-areas {
  --clamp-min: 18;
  --clamp-max: 24;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 6px;
}

.p-personal-price__target-suffix {
  --clamp-min: 14;
  --clamp-max: 16;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.5;
}

.p-personal-price__note {
  width: 100%;
  --clamp-min: 14;
  --clamp-max: 18;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left;
  padding-inline: 28px;

  @media (min-width: 768px) {
    text-align: center;
    padding-inline: 0;
  }
}

.p-personal-price__note + .p-personal-price__note {
  margin-top: 8px;
}

/* ─── p-personal-gallery ─── */

.p-personal-gallery {
  aspect-ratio: 375 / 814;
  overflow: hidden;
  background: var(--color-white);

  @media (min-width: 768px) {
    aspect-ratio: 724 / 401;
  }
}

.p-personal-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── p-personal-safety ─── */

.p-personal-safety {
  position: relative;
  padding-block: 48px 50px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(217, 217, 217, 0.6), rgba(217, 217, 217, 0.6)),
    url(../img/personal/personal-safety-bg_sp.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  @media (min-width: 768px) {
    padding-block: 116px 64px;
    background-image:
      linear-gradient(rgba(217, 217, 217, 0.6), rgba(217, 217, 217, 0.6)),
      url(../img/personal/personal-safety-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

.p-personal-safety__inner {
  position: relative;
  z-index: 1;
  padding-inline: 20px;
}

.p-personal-safety__panel {
  position: relative;
  padding: 0 20px 52px;
  background: var(--color-white);
  overflow: hidden;

  @media (min-width: 768px) {
    padding: 28px 40px 60px 25px;
  }
}

.p-personal-safety__heading {
  transform: translate(-18px, -12px);
  margin-bottom: 34px;

  @media (min-width: 768px) {
    transform: translate(25px, -12px);
    margin-bottom: 22px;
  }
}

.p-personal-safety__sub-title {
  font-family: var(--font-serif-en);
  --clamp-min: 90;
  --clamp-max: 120;
  font-weight: 400;
  color: var(--color-gold);
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.3;
}

.p-personal-safety__title {
  font-family: var(--font-sans-jp);
  --clamp-min: 24;
  --clamp-max: 32;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  line-height: 1;
  transform: translateY(-10px);
  padding-left: 5px;

  @media (min-width: 768px) {
    letter-spacing: 0;
  }
}

.p-personal-safety__list {
  display: flex;
  flex-direction: column;
  gap: 50px;

  @media (min-width: 768px) {
    gap: 91px;
  }
}

.p-personal-safety__card {
  position: relative;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr clamp(245px, 93px + 19.79vw, 378px);
    gap: 35px;
    align-items: center;
    min-height: 241px;
  }
}

.p-personal-safety__card:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: var(--color-gray-30);
  
  @media (min-width: 768px) {
    bottom: -48px;
    width: calc(100% - 20px);
  }
}

.p-personal-safety__num {
  position: absolute;
  top: -40px;
  left: -38px;
  font-family: var(--font-serif-en);
  --clamp-min: 80;
  --clamp-max: 80;
  color: #EDE8D8;
  letter-spacing: 0;
  line-height: 1.5;
  z-index: 0;
  
  @media (min-width: 768px) {
    --clamp-min: 80;
    --clamp-max: 158;
    top: -48px;
    left: -60px;
  }
}

.p-personal-safety__num--pink {
  color: #EDD8D8;
}

.p-personal-safety__num--mint {
  color: #D3E2E3;

  @media (min-width: 768px) {
    color: #C8E0E2;
  }
}

.p-personal-safety__num--yellow {
  color: #fde7a8;
}

.p-personal-safety__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;

  @media (min-width: 768px) {
    padding-left: clamp(60px, -11px + 9.23vw, 122px);
    gap: 6px;
  }
}

.p-personal-safety__card-title {
  --clamp-min: 18;
  --clamp-max: 24;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.5;
  padding-left: 48px;

  @media (min-width: 768px) {
    line-height: 1.7;
    padding-left: 0;
  }
}

.p-personal-safety__text {
  font-family: var(--font-sans-jp);
  --clamp-min: 14;
  --clamp-max: 16;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}

.p-personal-safety__image {
  display: inline-block;
  margin-top: 10px;

  @media (min-width: 768px) {
    display: block;
    margin-top: 0;
    width: 100%;
    max-width: 378px;
    aspect-ratio: 378 / 241;
  }
}

.p-personal-safety__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── p-personal-voice ─── */

.p-personal-voice {
  padding-block: 44px;
  background: var(--color-bg-cream);
  position: relative;
  overflow-x: clip;

  @media (min-width: 768px) {
    padding-block: 70px 140px;
  }
}

.p-personal-voice::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 365px;
  aspect-ratio: 750 / 563;
  background: url(../img/personal/personal-voice-line_sp.webp) center / cover no-repeat;
  
  @media (min-width: 768px) {
    top: 142px;
    width: 100%;
    aspect-ratio: 960 / 77;
    background: url(../img/personal/personal-voice-line01.webp) center / cover no-repeat;
  }
}

.p-personal-voice::after {
  @media (min-width: 768px) {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    aspect-ratio: 960 / 77;
    background: url(../img/personal/personal-voice-line02.webp) center / cover no-repeat;
  }
}


.p-personal-voice__heading {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;

  @media (min-width: 768px) {
    justify-content: flex-start;
    margin-bottom: 18px;
  }
}

.p-personal-voice__badge {
  @media (min-width: 768px) {
    left: -15px;
  }
}

.p-personal-voice__list {
  display: flex;
  flex-direction: column;
  gap: 30px;

  @media (min-width: 768px) {
    flex-direction: row;
    justify-content: center;
    gap: clamp(20px, -26px + 5.95vw, 60px);
  }
}

.p-personal-voice__list > .c-basic-card {
  @media (min-width: 768px) {
    flex: 1 1 0;
    max-width: 320px;
  }
}

/* ─── p-personal-flow ─── */

.p-personal-flow {
  padding-block: 73px 48px;
  overflow-x: clip;

  @media (min-width: 768px) {
    padding-block: 85px 105px;
  }
}

.p-personal-flow__inner {
  @media (min-width: 768px) {
    max-width: calc(1046px + 60px);
    container-type: inline-size;
  }
}

.p-personal-flow__heading {
  margin-bottom: 42px;

  @media (min-width: 768px) {
    margin-bottom: 64px;
  }
}

.p-personal-flow__list {
  display: flex;
  flex-direction: column;
  gap: 58px;
  margin-bottom: 20px;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 39px;
    max-width: calc(375px * 2 + 39px);
    margin-inline: auto;
    margin-bottom: 40px;
  }
}

@container (min-width: 1000px) {
  .p-personal-flow__list {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
  }
}

.p-personal-flow__item {
  position: relative;

  @media (min-width: 768px) {
    max-width: 375px;
  }
}

.p-personal-flow__item:not(:last-child)::before {
  content: '';
  position: absolute;
  bottom: -36px;
  left: 50%;
  width: 28px;
  height: 18px;
  background: var(--color-gray-30);
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);

  @media (min-width: 768px) {
    top: 39%;
    right: -32px;
    left: auto;
    width: 21px;
    height: 32px;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}

.p-personal-flow__item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -24px;
  right: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--color-gray-30) 0,
    var(--color-gray-30) calc(50% - 20px),
    transparent calc(50% - 20px),
    transparent calc(50% + 20px),
    var(--color-gray-30) calc(50% + 20px),
    var(--color-gray-30) 100%
  );

  @media (min-width: 768px) {
    top: 0;
    right: -20px;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      var(--color-gray-30) 0,
      var(--color-gray-30) calc(39% - 24px),
      transparent calc(39% - 24px),
      transparent calc(39% + 24px),
      var(--color-gray-30) calc(39% + 24px),
      var(--color-gray-30) 100%
    );
  }
}

.p-personal-flow__image {
  display: block;
  width: 100%;
  aspect-ratio: 315 / 161;
  margin-bottom: 20px;
}

.p-personal-flow__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-personal-flow__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;

  @media (min-width: 768px) {
    margin-bottom: 8px;
  }
}

.p-personal-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: var(--font-roboto);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
  line-height: 1.2;
}

.p-personal-flow__step-label {
  --clamp-min: 14;
  --clamp-max: 14;
  letter-spacing: 0.06em;
}

.p-personal-flow__step-num {
  --clamp-min: 24;
  --clamp-max: 24;
  letter-spacing: 0;
}

.p-personal-flow__title {
  --clamp-min: 20;
  --clamp-max: 20;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.8;
  white-space: nowrap;
}

.p-personal-flow__text {
  --clamp-min: 14;
  --clamp-max: 16;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}

.p-personal-flow__note {
  padding: 16px 20px 12px;
  background: var(--color-bg-cream-yellow);
  border-radius: 6px;
  --clamp-min: 14;
  --clamp-max: 18;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;

  @media (min-width: 768px) {
    padding: 22px 40px;
  }
}