/* CSS Document */
.back_gray { background-color: #f9efef; }

.page_back_white { border-radius: 20px; font-family: "M PLUS Rounded 1c", sans-serif; }

.chara_flex { display: flex; gap: 0 60px; }
.chara_flex > div { width: 50%; }
.chara_flex > div > .name { margin: 0 0 10px 0; font-size: 27px; text-align: center; display: block; color: #725944; }
.chara_flex > div > .img { min-height: 360px; text-align: center; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.chara_flex > div > .img .img1 { width: 250px; position: relative; left: -30px; }
.chara_flex > div > .img .img2 { width: 300px; position: relative; left: -15px; }
.chara_flex > div > .img .fukidashi { position: absolute; top: 10px; left: 0; width: 131px; height: 92.5px; display: flex; justify-content: center; align-items: center; background-image: url("../images/fukidashi.svg"); font-family: "Yusei Magic", sans-serif; font-size: 26px; padding: 0 0 13px 0; }
.chara_flex > div > .img .fukidashi2 { left: 20px; }
.chara_flex > div > .text { font-size: 15px; }
.chara_flex > div > .text .profile { position: relative; background-color: #faf6ef; border-radius: 45px; z-index: 2; position: relative; }
.chara_flex > div > .text .profile::before { content: ""; width: 100%; height: 100%; background-color: #ff7827; position: absolute; border-radius: 45px; top: 6px; left: 6px; }
.chara_flex > div > .text ul { margin: 40px 0; padding: 0; list-style: none; padding: 43px 38px; z-index: 2; position: relative; background-color: #faf6ef; border-radius: 45px; }
.chara_flex > div > .text ul li { margin: 0 0 10px 0; display: flex; align-items: center; }
.chara_flex > div > .text ul li span { display: inline-block; background-color: #ff8400; color: #fff; font-weight: 500; border-radius: 50px; padding: 2px 10px; min-width: 100px; height: 26.5px; text-align: center; margin: 0 10px 0 0; }
.chara_flex > div > .text ul li p { margin: 0; }
.chara_flex > div > .text ul li:last-child { margin: 0; }
.chara_flex > div > .text .memo { display: flex; gap: 0 30px; justify-content: center; }
.chara_flex > div > .text .memo > div { position: relative; }
.chara_flex > div > .text .memo > div p { border-radius: 50%; width: 190px; height: 190px; display: flex; justify-content: center; align-items: center; background-color: #f9edd7; padding: 20px; text-align: center; margin: 0; color: #725944; font-weight: 500; }
.chara_flex > div > .text .memo > div p .img1 { position: absolute; width: 51px; top: -17px; }
.chara_flex > div > .text .memo > div p .img2 { position: absolute; width: 51px; top: -17px; }
.chara_flex > div > .text .memo > div p .img3 { position: absolute; width: 59px; top: 0; }
.chara_flex > div > .text .memo > div p .img4 { position: absolute; width: 59px; top: 0; }
.chara_flex > div > .text .memo > div p span { z-index: 1; }
.chara_flex > div > .text .memo > div p span .img5 { position: absolute; width: 59px; top: 0; }

@media (max-width: 767.98px) { .chara_flex > div { position: relative; }
  .chara_flex > div > .name { margin: 0; font-size: 18px; text-align: center; display: block; color: #725944; }
  .chara_flex > div > .name_sp { margin: 0; font-size: 15px; text-align: center; display: inline-block; background-color: #725944; color: #fff; border-radius: 50px; padding: 2px 20px; position: absolute; top: 28px; left: 50%; transform: translate(-50%); z-index: 3; }
  .chara_flex > div > .img { min-height: 200px; text-align: center; display: flex; justify-content: center; align-items: flex-end; position: relative; }
  .chara_flex > div > .img .img1 { width: 100px; left: 0; }
  .chara_flex > div > .img .img2 { width: 130px; left: 0; }
  .chara_flex > div > .img .fukidashi { position: absolute; top: 10px; left: 0; width: 80px; height: 56px; font-size: 18px; padding: 0 0 10px 0; }
  .chara_flex > div > .img .fukidashi2 { left: 20px; }
  .chara_flex > div > .text { font-size: 14px; }
  .chara_flex > div > .text ul { margin: 40px 0 30px; padding: 0; list-style: none; padding: 35px; background-color: #faf6ef; border-radius: 45px; }
  .chara_flex > div > .text ul li { flex-wrap: wrap; margin: 0 0 10px 0; }
  .chara_flex > div > .text ul li span { margin: 0 10px 6px 0; }
  .chara_flex > div > .text ul li p { margin: 0 0 6px 0; }
  .chara_flex > div > .text ul li:last-child { margin: 0; }
  .chara_flex > div > .text .memo { display: flex; gap: 0 30px; justify-content: center; flex-wrap: wrap; }
  .chara_flex > div > .text .memo > div { position: relative; margin: 0 0 20px 0; }
  .chara_flex > div > .text .memo > div p { border-radius: 50%; width: 190px; height: 190px; display: flex; justify-content: center; align-items: center; background-color: #f9edd7; padding: 20px; text-align: center; margin: 0; color: #725944; font-weight: 500; }
  .chara_flex > div > .text .memo > div p .img1 { position: absolute; width: 51px; top: -10px; }
  .chara_flex > div > .text .memo > div p .img2 { position: absolute; width: 51px; top: -10px; }
  .chara_flex > div > .text .memo > div p .img3 { position: absolute; width: 59px; top: 0; }
  .chara_flex > div > .text .memo > div p .img4 { position: absolute; width: 59px; top: 0; }
  .chara_flex > div > .text .memo > div p span { z-index: 1; }
  .chara_flex > div > .text .memo > div p span .img5 { position: absolute; width: 59px; top: 0; }
  .chara_flex > div > .text .memo > div:last-child { margin: 0 0 20px 0; }
  .chara_flex.chara { display: flex; gap: 0 20px; }
  .chara_flex.chara > div { width: 50%; }
  .chara_flex.chara:last-child { margin: 30px 0 0 0; }
  .chara_flex.text { display: flex; flex-wrap: wrap; }
  .chara_flex.text > div { width: 100%; } }