@charset "utf-8";
/* ============================================================
   11 照射部位の一覧（Figma 3142:2324「Group 3109」/ SP 375x538）
   Figma上の名前が Group 3109 だったので、中身（PARTS＝照射部位の一覧）に
   合わせて kh-parts を接頭辞にしている。
   部位名はすべてHTMLテキスト。人物だけが画像（写真）、引き出し線は装飾。
   ============================================================ */
/* css/style.css の `.kh p, .kh li, .kh span …{ text-align:left; letter-spacing:normal }` は
   各要素への直接指定なので、親（見出し枠など）からの継承を止めてしまう。
   このセクション配下だけ継承に戻す。個別の値は下の各ルールで指定する */
.kh-parts :is(p, li, dt, dd, th, td, h1, h2, h3, h4, span, em, small) {
  text-align: inherit;
  letter-spacing: inherit;
}


.kh-parts {
  position: relative;
  height: 538px;
  padding: 60px 24px;
  background: #fcf9ed;
}
.kh-parts .kh-parts__en {
  position: absolute;
  left: 50%;
  top: 38px;
  display: block;
  width: 174px;
  height: 39px;
  font-family: "Alata", var(--kh-font-b);
  font-weight: 400;
  font-size: 35px;
  line-height: 39px;
  letter-spacing: 2.45px;
  color: #e5edf5;
  text-align: center;
	transform: translateX(-50%);
}
.kh-parts .kh-parts__title {
  position: absolute;
  left: 50%;
  top: 60px;
  width: 255px;
  font-family: var(--kh-font-h);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.65;
  color: var(--kh-text);
  text-align: center;
	transform: translateX(-50%);
	margin: 0;
}

/* ---- 部位図の枠 ---------------------------------------- */
.kh-parts__card {
  position: absolute;
  left: 24px;
  top: 120px;
  width: 327px;
  height: 377px;
  border-radius: 16px;
  background: var(--kh-white);
}
.kh-parts__board {                 /* 図を置くベージュの面 */
  position: absolute;
  left: 20px;
  top: 20px;
  width: 287px;
  height: 295px;
  border-radius: 12px;
  background: #f7f2ea;
}

/* ---- 人物写真（前面・背面。1枚の画像を左右で切り出す） ---- */
.kh-parts__photo {
  position: absolute;
  top: 61px;
  width: 112px;
  height: 238px;
  overflow: hidden;
  pointer-events: none;
}
.kh-parts__photo img {
  position: absolute;
  width: 274.84%;
  max-width: none;
  height: 107.58%;
}
.kh-parts__photo--front { left: -7px; }
.kh-parts__photo--front img { left: -30.14%; top: -3.94%; }
.kh-parts__photo--back  { left: 164px; }
.kh-parts__photo--back img { left: -128.98%; top: -3.9%; }

/* ---- 前面／背面 ---------------------------------------- */
.kh-parts__side {
  position: absolute;
  top: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 19px;
  font-weight: 500;
  font-size: 13px;
  color: var(--kh-text);
}
.kh-parts__side--front { left: 78px; }
.kh-parts__side--back  { left: 192px; }

/* ---- 部位名のピル -------------------------------------- */
.kh-parts__labels { list-style: none; }
.kh-parts .kh-parts__label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  border-radius: 9px;
  background: #b0d2ed;
  font-weight: 500;
  font-size: 9px;
  line-height: 1;
  color: var(--kh-text);
  text-align: center;
  white-space: nowrap;
}
.kh-parts__label--face    { left: 100px; top:  81px; width: 70px; }
.kh-parts__label--waki    { left: 107px; top: 109px; width: 70px; }
.kh-parts__label--hiji-u  { left: 107px; top: 135px; width: 70px; }
.kh-parts__label--hiji-s  { left: 107px; top: 161px; width: 70px; }
.kh-parts__label--hara    { left: 107px; top: 187px; width: 70px; }
.kh-parts__label--ashi-u  { left: 107px; top: 214px; width: 76px; }
.kh-parts__label--ashi-s  { left: 107px; top: 241px; width: 76px; }
.kh-parts__label--foot    { left: 107px; top: 273px; width: 76px; }
.kh-parts__label--eriashi { left: 238px; top: 102px; width: 58px; }
.kh-parts__label--sehai-u { left: 238px; top: 132px; width: 58px; }
.kh-parts__label--sehai-s { left: 235px; top: 165px; width: 58px; }
.kh-parts__label--hand    { left: 219px; top: 213px; width: 74px; }

/* ---- 引き出し線と点（装飾） ----------------------------- */
.kh-parts .kh-parts__dot,
.kh-parts .kh-parts__lead { position: absolute; max-width: none; }
.kh-parts .kh-parts__dot { width: 4px; height: 4px; }

.kh-parts .kh-parts__lead--face    { left:  73.97px; top:  88.65px; width: 28.0335px; height:  4.84839px; }
.kh-parts .kh-parts__lead--nape    { left: 163.42px; top:  73.76px; width: 29.163px;  height: 10.4727px; }

.kh-parts .kh-parts__dot--waki     { left:  85px; top: 129px; }
.kh-parts .kh-parts__lead--waki    { left:  87.82px; top: 118.70px; width: 19.3507px; height: 11.6058px; }
.kh-parts .kh-parts__dot--hiji-u   { left:  90px; top: 137px; }
.kh-parts .kh-parts__lead--hiji-u  { left:  91.88px; top: 138.67px; width: 15.241px;  height:  6.15721px; }
.kh-parts .kh-parts__dot--hiji-s   { left:  92px; top: 163px; }
.kh-parts .kh-parts__lead--hiji-s  { left:  93.86px; top: 164.68px; width: 13.2727px; height:  6.14468px; }
.kh-parts .kh-parts__dot--hara     { left:  68px; top: 158px; }
.kh-parts .kh-parts__lead--hara    { left:  70.76px; top: 160.75px; width: 36.488px;  height: 35.5019px; }
.kh-parts .kh-parts__dot--ashi-u   { left:  75px; top: 212px; }
.kh-parts .kh-parts__lead--ashi-u  { left:  76.90px; top: 213.67px; width: 30.2113px; height: 10.1673px; }
.kh-parts .kh-parts__dot--ashi-s   { left:  75px; top: 249px; }
.kh-parts .kh-parts__lead--ashi-s  { left:  77px; top: 250.15px; width: 30.0117px; height:  1.1999px; }
.kh-parts .kh-parts__dot--foot     { left:  77px; top: 292px; }
.kh-parts .kh-parts__lead--foot    { left:  78.87px; top: 282.18px; width: 28.2659px; height: 12.1475px; }

.kh-parts .kh-parts__dot--eriashi  { left: 225px; top:  98px; }
.kh-parts .kh-parts__lead--eriashi { left: 227.87px; top: 104.57px; width: 36.0868px; height:  5.19459px; transform: rotate(30.88deg); }
.kh-parts .kh-parts__dot--sehai-u  { left: 215px; top: 142px; }
.kh-parts .kh-parts__lead--sehai-u { left: 217px; top: 141.15px; width: 36.0485px; height:  3.19832px; }
.kh-parts .kh-parts__dot--sehai-s  { left: 215px; top: 170px; }
.kh-parts .kh-parts__lead--sehai-s { left: 217px; top: 171.65px; width: 36.0097px; height:  1.19993px; }
.kh-parts .kh-parts__dot--hand     { left: 243px; top: 197px; }
.kh-parts .kh-parts__lead--hand    { left: 242.65px; top: 198.95px; width: 2.69343px; height: 14.5956px; }

/* ---- 枠下のひとこと ------------------------------------ */
.kh-parts__note {
  position: absolute;
  left: 20px;
  top: 325px;
  width: 287px;
  font-weight: 500;
  font-size: 12px;
  line-height: 16.5px;
  color: #75695e;
}