@charset "utf-8";
/* ============================================================
   09 当院が選ばれる5つの理由（Figma SP 3142:2210 / 375x2570）
   ・カードは幅327px・内側20pxの余白。角丸は右上と左下だけ16px
   ・角の三角（#dcdcdc・直角二等辺・1辺25px）はCSSで描く。画像にしない
   ・写真は287x170で統一。角丸込みで書き出したPNGを使う
   ============================================================ */

/* --- サイト共通CSS(com.css)の palt（約物詰め）を外す。これが残ると
   日本語が約8%詰まってFigmaと折り返し位置・行幅がずれる。
   text-align / letter-spacing / margin / img は css/style.css で一括済み。
   そのぶん .kh p/.kh span 等(0,1,1)が効くので、字送り・揃えを指定する行は
   セクションのルートを前置きして (0,2,0) に上げている */
.kh-reasons { font-feature-settings: normal; }

.kh-reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 71px;      /* FigmaはCTA下端2499px→枠2570px */
  background: #f8fbff;       /* Figmaのセクション背景（白ではない） */
}

/* ---- 見出しの帯 ---------------------------------------- */
.kh-reasons__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 278px;
  height: 80px;
  padding: 27px 70px 28px 69px;
  border-radius: 0 0 30px 30px;
  background: #e7f4ff;
}
.kh-reasons .kh-reasons__title {
  font-size: 20px;
  text-align: center;   /* .kh-title の中央寄せが .kh h2 に負けるので持たせ直す */
  white-space: nowrap;
}
.kh-reasons__title-1,
.kh-reasons__title-2 { display: block; }
.kh-reasons__title-1 { line-height: 1.65; }
.kh-reasons__title-2 { line-height: 1.15; }
.kh-reasons__title small { font-size: 17px; font-weight: 700; }
.kh-reasons__title-2 small { font-size: 18px; }
.kh-reasons__title em { color: #3590d5; }
.kh-reasons .kh-reasons__title b { font-size: 26px; letter-spacing: 1.56px; }

/* ---- カード -------------------------------------------- */
.kh-reasons__list {
  display: flex;
  flex-direction: column;
  width: 327px;
}
.kh-reasons__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 327px;
  padding: 19.3px;           /* 枠線0.7pxぶん内側に詰めて、中身をFigmaと同じ287pxにする */
  background: #fcf9ed;
  border: .7px solid #dbdcde;
  border-radius: 0 16px 0 16px;
}
/* Figmaのカード間の余白。そろっていないが実データどおりにする */
.kh-reasons__card:nth-child(1) { margin-top: 54px; }
.kh-reasons__card:nth-child(2) { margin-top: 26px; }
.kh-reasons__card:nth-child(3),
.kh-reasons__card:nth-child(4) { margin-top: 32px; }
.kh-reasons__card:nth-child(5) { margin-top: 37px; }

/* 角のあしらい（直角二等辺三角形。左上と右下に4px内側へ寄せて置く） */
.kh-reasons__card::before,
.kh-reasons__card::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background: #dcdcdc;
  pointer-events: none;
}
.kh-reasons__card::before {
  left: 4px;
  top: 4px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.kh-reasons__card::after {
  right: 4px;
  bottom: 4px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Point.0N の英字（装飾） */
.kh-reasons .kh-reasons__no {
  width: 287px;
  font-family: "Alata", var(--kh-font-b);
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  letter-spacing: .35px;
  color: #dbdcde;
}

/* ---- リード文（2行の見出し） ---------------------------- */
.kh-reasons__lead {
  width: 287px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--kh-text);
}
.kh-reasons__lead-1,
.kh-reasons__lead-2 { display: block; }
.kh-reasons__lead-1 { font-weight: 500; }
.kh-reasons__lead-1.is-bold { font-weight: 700; }
.kh-reasons__lead-2 { font-weight: 700; color: var(--kh-blue); }
.kh-reasons__lead-2.is-dark { color: var(--kh-text); }
.kh-reasons__lead em { font-style: normal; color: var(--kh-blue); }

/* ---- 写真 ---------------------------------------------- */
.kh-reasons .kh-reasons__photo {
  width: 287px;
  height: 170px;          /* .kh img の height:auto に勝たせる */
  max-width: none;
  border-radius: 10px;
  object-fit: cover;
}
.kh-reasons__photo--r12 { border-radius: 12px; }

/* ---- 本文 ---------------------------------------------- */
.kh-reasons__body {
  width: 287px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--kh-text);
}
.kh-reasons__body strong { font-weight: 700; }
.kh-reasons__body b { font-weight: 600; }

/* ---- CTA ----------------------------------------------- */
.kh-reasons .kh-reasons__cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 51px;
  width: 330px;
  padding: 14px;
  border-radius: 26px;
  background: #eb7699;
  color: var(--kh-white);
  font-size: 18px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  text-decoration: none;
}
.kh-reasons__cta:hover { opacity: .9; }