:root {
  --black: 51,51,51;
  --red: 238,0,59;
  --dark_red: 207,28,85;
  --main: 171,94,173;
  --accent: 227,55,129;
  --note: 102,102,102;
  --bg: 243,243,243;
  --gray: 153,153,153;
  --dark_gray: 167,167,167;
  --border: 210,211,212;
  --light_pink: 242,238,246;
  --beige: 242,238,230;
  --green: 92,198,172;
  --blue: 16,120,237;
  --purple: 195,129,203;
  --light_purple: 250,244,255;
  --pink_purple: 203,75,138;
  --blue: 87 129 234;
  --yellow: 255 183 3;
  --beauty_main: 233,83,131;
  --beauty_light_pink: 252,229,237;
  --contents_width: 1100px;
  --body_padding_side: 60px;
  --contents_width_with_padding: 1160px;
  --sidebar_width: 250px;
  --hover_opacity: .7;
}

/* #beginner
================================================ */
#beginner .beginner-flow-btn-pink a {
  color: white;
  background-color: rgb(var(--main));
}
#beginner .beginner-flow-btn-pink a::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2026%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222px%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20fill%3D%22none%22%20d%3D%22M3.385%2C1.489%20L14.637%2C12.742%20L3.385%2C23.996%20%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222px%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20d%3D%22M3.385%2C1.489%20L14.637%2C12.742%20L3.385%2C23.996%20%22%2F%3E%3C%2Fsvg%3E");
}
#beginner .beginner-notebox {
  position: relative;
}
#beginner .beginner-notebox::before {
  position: absolute;
  top: -15px;
  left: -10px;
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background: url(../img/ico_beginner_picup.png) 0 0 no-repeat;
  background-size: contain;
}
@media all and (min-width: 768px) {
  #beginner .beginner-notebox::before {
    top: -25px;
    left: -25px;
    width: 64px;
    height: 64px;
  }
}

/* .beginner-flow
================================================ */
.beginner-flow .beginner-flow-box .beginner-flow-boxwrap {
  display: flex;
  flex-direction: column;
}
.beginner-flow .beginner-flow-box .beginner-flow-boximg {
  text-align: center;
  width: 180px;
  margin-inline: auto;
}
.beginner-flow .beginner-flow-box .beginner-flow-boxtxt {
  margin-top: 20px;
}
.beginner-flow .beginner-flow-box .beginner-flow-btnlist {
  font-size: 1.2rem;
  margin-top: 1em;
  display: flex;
  justify-content: center;
}
.beginner-flow .beginner-flow-box .beginner-flow-btnlist li:nth-of-type(n+2) {
  margin-left: 1em;
}
@media all and (min-width: 768px) {
  .beginner-flow .beginner-flow-box .beginner-flow-btnlist {
    font-size: 1.3rem;
  }
}
.beginner-flow .beginner-flow-box .beginner-flow-interviewbox {
  background-color: rgb(var(--light_pink));
}
@media all and (min-width: 768px) {
  .beginner-flow .beginner-flow-box .beginner-flow-boxwrap {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .beginner-flow .beginner-flow-box .beginner-flow-boximg {
    width: 260px;
  }
  .beginner-flow .beginner-flow-box .beginner-flow-boxtxt {
    width: calc(100% - 260px - 40px);
    margin-top: 0;
  }
}

/* .beginner-prepare
================================================ */
.beginner-prepare .beginner-prepare-agreementbox {
  background-color: rgb(var(--light_pink));
}