@charset "utf-8";
/* ============================================================
   16 その気持ちも、ちゃんと受け止めます（Figma SP 3142:2795 / 375x732）
   ============================================================ */
/* css/style.css の `.kh p, .kh li, .kh span …{ text-align:left; letter-spacing:normal }` は
   各要素への直接指定なので、親（見出し枠など）からの継承を止めてしまう。
   このセクション配下だけ継承に戻す。個別の値は下の各ルールで指定する */
.kh-feelings :is(p, li, dt, dd, th, td, h1, h2, h3, h4, span, em, small) {
  text-align: inherit;
  letter-spacing: inherit;
}


.kh-feelings {
  background: #fcf9ed;
  padding-bottom: 47px;
}

/* ---- 見出し＋写真 -------------------------------------- */
/* クリーム色のタイトル地（下辺がV字）が写真の上に重なる */
.kh-feelings__head {
  position: relative;
  width: 375px;
  min-height: 237px;
  overflow: hidden;
}
/* 写真はFigmaの切り抜き（375x218 の窓に対して 116% x 100.27% を -7.93% / +14.5%）
   をそのまま再現する。object-fit だと縦の位置が合わない */
.kh-feelings__photo {
  position: absolute;
  left: 0;
  top: 59px;
  width: 375px;
  height: 218px;
  overflow: hidden;
}
.kh-feelings .kh-feelings__photo-img {
  position: absolute;
  left: -29.74px;
  top: 31.61px;
  width: 435px;
  height: 218.59px;
  max-width: none;
}
.kh-feelings__title-area {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 375px;
  height: 138px;
  padding-top: 19px;
  box-sizing: border-box;
  background: url("../../images/16_title_bg.svg") no-repeat 0 0 / 375px 138px;
	background-size: 100% 100%;
}
.kh-feelings .kh-feelings__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 139px;
  padding: 2px 17px;
  border-radius: 2px;
  background: var(--kh-blue);
  color: #fff;
  font-family: var(--kh-font-b);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
	margin-bottom: 0;
}
.kh-feelings .kh-feelings__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.27;
  letter-spacing: -.4px;
  color: var(--kh-blue);
	text-align: center;
}

/* ---- 白地のリード文 ------------------------------------ */
.kh-feelings__lead {
  position: relative;
  box-sizing: border-box;
  width: 375px;
  min-height: 192px;
  padding: 18px 30px 20px;
  background: var(--kh-white);
}
.kh-feelings__lead p {
  font-size: 12px;
  line-height: 1.72;
  color: var(--kh-text);
}
.kh-feelings__lead p + p { margin-top: 8px; }
.kh-feelings__lead em { font-style: normal; font-weight: 700; color: var(--kh-blue); }

.kh-feelings .kh-feelings__arrow {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 45px;
  height: 17px;
  transform: translateX(-50%) scaleY(-1);
}

/* ---- 下のカード2枚 ------------------------------------- */
.kh-feelings__cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 15px auto 0;
  width: 327px;
}
.kh-feelings__card {
  box-sizing: border-box;
  width: 327px;
  padding: 10px;
  border: 1px solid #b0d2ed;
  border-radius: 5px;
  background: var(--kh-white);
}

.kh-feelings__pill {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 2px 10px 0 2px;
  border-radius: 0 20px 20px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 18.15px;
}
.kh-feelings__pill img { flex: none; margin: 0; object-fit: contain; }
.kh-feelings__pill--cream {
  width: 209px;
  background: #fff2c0;
  color: var(--kh-blue);
}
.kh-feelings__pill--cream img { width: 30px; height: 24px; margin-right: -7px; }
.kh-feelings__pill--blue {
  width: 165px;
  background: var(--kh-blue);
  color: #fff;
  gap: 4px;
}
.kh-feelings__pill--blue img { width: 18px; height: 17px; }

.kh-feelings__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 9px;
}
.kh-feelings__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: .24px;
  color: var(--kh-text);
}
.kh-feelings__list img { flex: none; margin: 0; width: 11px; height: 11px; }
.kh-feelings__list em { font-style: normal; font-weight: 500; color: var(--kh-blue); }

.kh-feelings__card-text {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 17.33px;
  color: var(--kh-text);
}
.kh-feelings__card-text em { font-style: normal; font-weight: 700; color: var(--kh-blue); }

/* PC(813px〜) では pc.css が .kh-feelings__photo（写真の窓）を450pxに広げる。
   中の画像も同じ比率(450/375)で広げないと右側に余白が出るので、ここで合わせる。
   ※窓の高さ218pxはそのままなので、SPと同じ位置関係で切り抜かれる */
@media screen and (min-width: 813px) {
  .kh-feelings .kh-feelings__photo-img { left: -35.69px; top: 37.93px; width: 522px; height: 262.31px; }
}