@charset "utf-8";
/* ============================================================
   12 ご来院から施術までの流れ（Figma 3142:2394 / SP 375x800）
   ステップの文言は全てHTMLテキスト。画像は写真・円のあしらい・アイコンのみ。
   ============================================================ */
/* css/style.css の `.kh p, .kh li, .kh span …{ text-align:left; letter-spacing:normal }` は
   各要素への直接指定なので、親（見出し枠など）からの継承を止めてしまう。
   このセクション配下だけ継承に戻す。個別の値は下の各ルールで指定する */
.kh-flow :is(p, li, dt, dd, th, td, h1, h2, h3, h4, span, em, small) {
  text-align: inherit;
  letter-spacing: inherit;
}


.kh-flow {
  position: relative;
  height: 800px;
  overflow: hidden;
  background: #fefbef;
}

/* 背景の模様（装飾・8%で敷く） */
.kh-flow .kh-flow__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  opacity: .08;
  pointer-events: none;
}

/* ---- 上部の写真 ---------------------------------------- */
.kh-flow__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 375px;
  height: 191px;
  overflow: hidden;
  pointer-events: none;
}
.kh-flow__photo img {
  position: absolute;
  left: -6.08%;
  top: -32.73%;
  width: 130.07%;
  max-width: none;
  height: 170.67%;
}

/* ---- 見出し -------------------------------------------- */
.kh-flow__plate {                   /* 写真の上に敷く半透明の白い面 */
  position: absolute;
  left: 27px;
  top: 38px;
  width: 321px;
  height: 111px;
  border-radius: 10px;
  background: rgb(255 255 255 / 79%);
}
.kh-flow .kh-flow__en {
  position: absolute;
  left: 50%;
  top: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 251px;
  height: 39px;
  font-family: "Alata", var(--kh-font-b);
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 2.45px;
  color: #f6eabc;
  text-align: center;
	transform: translateX(-50%);
}
.kh-flow .kh-flow__title {
  position: absolute;
  left: 50%;
  top: 71px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 251px;
  height: 63px;
  font-family: var(--kh-font-h);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: 1.47px;
  text-align: center;
  white-space: nowrap;
	transform: translateX(-50%);
	margin: 0;
}
.kh-flow__title-1 { color: var(--kh-text); }
.kh-flow__title-2 { color: var(--kh-blue); }

/* ---- ステップ ------------------------------------------ */
.kh-flow__steps {
  position: absolute;
  left: 30px;
  top: 221px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 315px;
  list-style: none;
}
.kh-flow__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 315px;
  min-height: 86px;
}

/* 左：STEP番号とアイコンの円 */
.kh-flow__mark {
  position: relative;
  flex: none;
  width: 73px;
  height: 86px;
}
.kh-flow .kh-flow__num {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 24px;
  font-family: "Alata", var(--kh-font-b);
  font-weight: 400;
  color: var(--kh-blue);
  text-align: center;
}
.kh-flow__num-label {
  width: 51px;
  margin-right: -14px;
  font-size: 14px;
  line-height: .97;
}
.kh-flow .kh-flow__num-n {
  width: 29px;
  font-size: 19px;
  line-height: .97;
  letter-spacing: -.95px;
}
.kh-flow__num--01 .kh-flow__num-label { width: 52px; margin-right: -17px; }
.kh-flow__num--01 .kh-flow__num-n     { width: 31px; font-size: 20px; letter-spacing: -1px; }

.kh-flow__circle {
  position: absolute;
  left: 5px;
  top: 21px;
  width: 63px;
  height: 65px;
}
.kh-flow .kh-flow__ring {                    /* 円のあしらい（装飾） */
  position: absolute;
  left: 0;
  top: 0;
  width: 63px;
  height: 60px;
}
.kh-flow .kh-flow__ring--02 { height: 65px; }   /* STEP02 は下の三角まで含んだ1枚 */
.kh-flow .kh-flow__tri {                     /* 円の下の小さな三角（装飾） */
  position: absolute;
  left: 28.47px;
  top: 59.75px;
  width: 6.06218px;
  height: 5.25px;
  transform: none;
}

/* 各ステップのアイコン（1枚のシートから切り出して使う） */
.kh-flow__icon { position: absolute; display: block; overflow: hidden; }
.kh-flow__icon img { position: absolute; max-width: none; }
.kh-flow__icon--01     { left: 18px; top: 11px; width: 34px; height: 39px; }
.kh-flow__icon--01 img { left: -24%;     top: -20.41%;  width: 409.6%;  height: 234.86%; }
.kh-flow__icon--02     { left: 12px; top: 11px; width: 40px; height: 35px; }
.kh-flow__icon--02 img { left: -41.37%;  top: -53.71%;  width: 178.89%; height: 202.26%; }
.kh-flow__icon--03     { left: 15px; top: 11px; width: 34px; height: 39px; }
.kh-flow__icon--03 img { left: -278.12%; top: -13.89%;  width: 394.97%; height: 226.48%; }
.kh-flow__icon--04     { left: 12px; top:  6px; width: 40px; height: 47px; }
.kh-flow__icon--04 img { left: -10.03%;  top: -98.54%;  width: 345.32%; height: 198.01%; }
.kh-flow__icon--05     { left: 15px; top: 11px; width: 34px; height: 39px; }
.kh-flow__icon--05 img { left: -154.64%; top: -119.67%; width: 394.97%; height: 226.48%; }
.kh-flow__icon--06     { left: 15px; top: 11px; width: 34px; height: 39px; }
.kh-flow__icon--06 img { left: -278.12%; top: -121.88%; width: 394.97%; height: 226.48%; }

/* 右：見出しと説明 */
.kh-flow__body {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 236px;
}
.kh-flow__name {
  font-family: var(--kh-font-b);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.65;
  color: var(--kh-blue);
}
.kh-flow__rule {                    /* 見出し下の細い罫（装飾） */
  position: relative;
  width: 236px;
  height: 3px;
}
.kh-flow__rule img {
  position: absolute;
  left: 0;
  top: -.35px;
  width: 236px;
  height: .7px;
}
.kh-flow__desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--kh-text);
}
.kh-flow__desc strong { font-weight: 700; }