@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
フォーム送信
---------------------------------------------------------------------------------------------------------------------
*/
#survey {
  padding-top: 40px; }
  @media (min-width: 768px) {
    #survey {
      padding-top: 100px; } }

.survey {
  max-width: 1200px;
  margin: auto;
  background: #D32D7E;
  border-radius: 20px;
  overflow: hidden; }
  @media (min-width: 768px) {
    .survey {
      width: 95%; } }
  .survey__inner {
    max-width: 1100px;
    margin: auto;
    width: 90%;
    padding: 40px 0; }
    @media (min-width: 768px) {
      .survey__inner {
        padding: 60px 0 60px; } }
  @media (min-width: 768px) {
    .survey .survey-title {
      display: grid;
      align-items: end;
      grid-template-columns: 340px 1fr; } }
  .survey .survey-title .txt {
    margin-bottom: 30px; }
    .survey .survey-title .txt p {
      color: #fff; }

h2.question {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.4em;
  margin: 0 0 20px 0; }
  @media (min-width: 768px) {
    h2.question {
      font-size: 1.4em; } }
  @media (min-width: 1200px) {
    h2.question {
      font-size: 1.5em;
      margin: 0 0 40px 0; } }

.sod-survey {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400; }
  .sod-survey__inner {
    display: grid;
    gap: 20px; }
    @media (min-width: 1024px) {
      .sod-survey__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; } }
  .sod-survey__card {
    background-color: #000;
    border-radius: 8px;
    padding: 20px 20px 30px;
    color: #fff; }
    @media (min-width: 768px) {
      .sod-survey__card {
        padding: 40px; } }
    @media (min-width: 1024px) {
      .sod-survey__card {
        padding: 20px; } }
    @media (min-width: 1200px) {
      .sod-survey__card {
        padding: 40px; } }
  .sod-survey__donut-wrap1 {
    display: grid;
    gap: 0;
    align-items: center; }
    @media (min-width: 768px) {
      .sod-survey__donut-wrap1 {
        grid-template-columns: 200px 1fr; } }
    @media (min-width: 1024px) {
      .sod-survey__donut-wrap1 {
        grid-template-columns: 140px 1fr; } }
    @media (min-width: 1200px) {
      .sod-survey__donut-wrap1 {
        grid-template-columns: 200px 1fr; } }
  .sod-survey__donut1 {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(#e02b83 0% 62%, #7a45b3 62% 81%, #24a8d4 81% 93%, #8a8a8a 93% 100%);
    display: flex;
    align-items: center;
    justify-content: center; }
    @media (min-width: 768px) {
      .sod-survey__donut1 {
        width: 200px;
        height: 200px;
        margin: 0; } }
    @media (min-width: 1024px) {
      .sod-survey__donut1 {
        width: 160px;
        height: 160px; } }
    @media (min-width: 1200px) {
      .sod-survey__donut1 {
        width: 200px;
        height: 200px; } }
    .sod-survey__donut1::before {
      content: "";
      position: absolute; }
    .sod-survey__donut1 p {
      font-family: "Roboto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-size: 4em;
      line-height: 1.0em;
      position: relative;
      width: 130px;
      height: 130px;
      margin: 0;
      background: #000;
      border-radius: 50%;
      color: #e02b83;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (min-width: 1200px) {
        .sod-survey__donut1 p {
          width: 140px;
          height: 140px;
          font-size: 4.0em; } }
      .sod-survey__donut1 p span {
        font-size: 0.40em;
        margin-top: 34px; }
  .sod-survey__legend1 {
    display: grid;
    margin: 10px 0 0 0; }
    @media (min-width: 768px) {
      .sod-survey__legend1 {
        gap: 10px; } }
  .sod-survey__legend1-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 10px; }
    @media (min-width: 768px) {
      .sod-survey__legend1-item {
        grid-template-columns: 100px 1fr;
        gap: 16px; } }
    .sod-survey__legend1-item strong {
      font-family: "Roboto", sans-serif;
      font-optical-sizing: auto;
      font-size: 2.5em;
      font-weight: 700;
      line-height: 1.0em;
      text-align: right; }
      @media (min-width: 1200px) {
        .sod-survey__legend1-item strong {
          font-size: 3.0em; } }
      .sod-survey__legend1-item strong span {
        font-size: 0.45em; }
    .sod-survey__legend1-item p {
      margin: 0;
      font-size: 0.9em;
      font-weight: 700;
      line-height: 1.4em; }
      @media (min-width: 768px) {
        .sod-survey__legend1-item p {
          font-size: 1.0em; } }
    .sod-survey__legend1-item--pink strong {
      color: #e02b83; }
    .sod-survey__legend1-item--purple strong {
      color: #7a45b3; }
    .sod-survey__legend1-item--blue strong {
      color: #24a8d4; }
    .sod-survey__legend1-item--gray strong {
      color: #8a8a8a; }

/*
---------------------------------------------------------------------------------------------------------------------
Q. 仕事、ぶっちゃけ楽しい？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-fun-chart {
  display: grid;
  gap: 10px; }
  .sod-fun-chart__item {
    display: grid;
    grid-template-columns: var(--bar-width) 0;
    align-items: center;
    gap: 10px; }
    .sod-fun-chart__item--pink {
      --bar-width: calc(100% - 75px); }
      .sod-fun-chart__item--pink .sod-fun-chart__label {
        background: #e02b83; }
      .sod-fun-chart__item--pink .sod-fun-chart__number {
        color: #e02b83; }
    .sod-fun-chart__item--purple {
      --bar-width: 65%; }
      .sod-fun-chart__item--purple .sod-fun-chart__label {
        background: #7441b2; }
      .sod-fun-chart__item--purple .sod-fun-chart__number {
        color: #7441b2; }
    .sod-fun-chart__item--blue {
      --bar-width: 40%; }
      .sod-fun-chart__item--blue .sod-fun-chart__label {
        background: #22a9d6; }
      .sod-fun-chart__item--blue .sod-fun-chart__number {
        color: #22a9d6; }
  .sod-fun-chart__label {
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.35em;
    color: #fff;
    height: 60px;
    padding: 10px 10px;
    display: flex;
    align-items: center; }
    @media (min-width: 768px) {
      .sod-fun-chart__label {
        font-size: 1.125em; } }
  .sod-fun-chart__number {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1.0em;
    white-space: nowrap;
    position: relative;
    top: 8px; }
    @media (min-width: 768px) {
      .sod-fun-chart__number {
        font-size: 3.5em; } }
    .sod-fun-chart__number span {
      font-size: 0.38em; }

/*
---------------------------------------------------------------------------------------------------------------------
Q. SODの社内って、どんな感じ？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey.in-house {
  margin-top: 20px; }
.sod-survey__area {
  display: grid;
  gap: 24px; }
  @media (min-width: 768px) {
    .sod-survey__area {
      position: relative;
      height: 340px;
      display: block; } }
  @media (min-width: 1200px) {
    .sod-survey__area {
      height: 400px; } }
.sod-survey__balloon1 {
  position: relative;
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 10px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  color: #e02b83; }
  @media (min-width: 1200px) {
    .sod-survey__balloon1 {
      padding: 30px 40px; } }
  .sod-survey__balloon1::before {
    content: "";
    position: absolute;
    left: 26%;
    bottom: -20px;
    width: 20px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(0 0, 50% 100%, 100% 0); }
  .sod-survey__balloon1::after {
    content: "";
    position: absolute;
    left: calc(26% + 2px);
    bottom: -17px;
    width: 16px;
    height: 18px;
    background: #000;
    clip-path: polygon(0 0, 50% 100%, 100% 0); }
  .sod-survey__balloon1 p {
    color: #fff;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.4em; }
    @media (min-width: 1200px) {
      .sod-survey__balloon1 p {
        font-size: 1.125em; } }
  .sod-survey__balloon1 strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.0em;
    white-space: nowrap;
    position: relative;
    top: 8px; }
    @media (min-width: 1200px) {
      .sod-survey__balloon1 strong {
        font-size: 3.5em; } }
    .sod-survey__balloon1 strong span {
      font-size: 0.42em; }
  .sod-survey__balloon1--pink {
    color: #e02b83; }
  .sod-survey__balloon1--purple {
    color: #7441b2; }
  .sod-survey__balloon1--blue {
    color: #22a9d6; }
  @media (min-width: 768px) {
    .sod-survey__balloon1--large {
      left: 0%;
      top: 10px;
      width: 400px; } }
  @media (min-width: 1024px) {
    .sod-survey__balloon1--large {
      left: 5%;
      top: 10px;
      width: 40%;
      padding: 25px; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--large {
      padding: 30px; } }
  @media (min-width: 768px) {
    .sod-survey__balloon1--top {
      position: absolute;
      right: 0;
      top: 120px;
      width: 270px; } }
  @media (min-width: 1024px) {
    .sod-survey__balloon1--top {
      right: 8%;
      top: 20px;
      padding: 20px; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--top {
      right: 10%;
      top: 0;
      width: 40%;
      padding: 25px; } }
  .sod-survey__balloon1--top::before {
    left: 28%; }
  .sod-survey__balloon1--top::after {
    left: calc(28% + 2px); }
  @media (min-width: 768px) {
    .sod-survey__balloon1--small {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 260px;
      padding: 10px 20px; } }
  @media (min-width: 1024px) {
    .sod-survey__balloon1--small {
      left: 5%;
      bottom: 10px;
      width: 300px;
      padding: 10px 30px; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--small {
      left: 0; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--small p {
      font-size: 1em; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--small strong {
      font-size: 3.5em; } }
  @media (min-width: 768px) {
    .sod-survey__balloon1--blue {
      top: 60px;
      left: 0;
      width: 280px;
      padding: 15px 20px; } }
  @media (min-width: 1024px) {
    .sod-survey__balloon1--blue {
      position: absolute;
      top: 150px;
      left: 33%;
      width: 280px;
      padding: 15px 20px; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--blue {
      width: 320px;
      top: 200px; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--blue p {
      font-size: 1em; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--blue strong {
      font-size: 3.5em; } }
  @media (min-width: 768px) {
    .sod-survey__balloon1--right {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 260px;
      padding: 15px 20px; } }
  @media (min-width: 1024px) {
    .sod-survey__balloon1--right {
      bottom: 20px; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--right {
      bottom: 15%;
      width: 300px; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--right p {
      font-size: 1em; } }
  @media (min-width: 1200px) {
    .sod-survey__balloon1--right strong {
      font-size: 3.5em; } }

/*
---------------------------------------------------------------------------------------------------------------------
Q. SODに向いてる人ってどんな人？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey__words {
  position: relative;
  margin: 20px 0; }

/*
---------------------------------------------------------------------------------------------------------------------
Q. しんどいこと、正直ありますか？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey__bar-list1 {
  display: grid;
  gap: 15px; }
  @media (min-width: 768px) {
    .sod-survey__bar-list1 {
      gap: 10px; } }
.sod-survey__bar1 {
  display: grid;
  grid-template-columns: var(--bar-width, 1fr) auto;
  align-items: center;
  gap: 14px; }
  .sod-survey__bar1 p {
    padding: 10px 10px;
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1.4em;
    white-space: nowrap; }
    @media (min-width: 768px) {
      .sod-survey__bar1 p {
        font-size: 0.9em; } }
  .sod-survey__bar1 strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 2.5em;
    line-height: 1.0em;
    white-space: nowrap;
    position: relative;
    top: 6px; }
    @media (min-width: 768px) {
      .sod-survey__bar1 strong {
        font-size: 2.8em; } }
    .sod-survey__bar1 strong span {
      font-size: 0.45em; }
  .sod-survey__bar1--pink {
    --bar-width: 78%; }
    .sod-survey__bar1--pink p {
      background: #e02b83; }
    .sod-survey__bar1--pink strong {
      color: #e02b83; }
  .sod-survey__bar1--purple {
    --bar-width: 70%; }
    .sod-survey__bar1--purple p {
      background: #7441b2; }
    .sod-survey__bar1--purple strong {
      color: #7441b2; }
  .sod-survey__bar1--blue {
    --bar-width: 60%; }
    .sod-survey__bar1--blue p {
      background: #22a9d6; }
    .sod-survey__bar1--blue strong {
      color: #22a9d6; }
  .sod-survey__bar1--white {
    --bar-width: 35%; }
    .sod-survey__bar1--white p {
      background: #fff;
      color: #000; }
    .sod-survey__bar1--white strong {
      color: #fff; }
  .sod-survey__bar1--gray {
    --bar-width: 20px; }
    .sod-survey__bar1--gray p {
      background: #8a8a8a;
      color: #8a8a8a;
      overflow: visible;
      padding-right: 0; }
      @media (min-width: 768px) {
        .sod-survey__bar1--gray p {
          color: #8a8a8a; } }
    .sod-survey__bar1--gray strong {
      color: #8a8a8a;
      padding-left: 150px; }
.sod-survey__answer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px; }
  @media (min-width: 768px) {
    .sod-survey__answer-list {
      gap: 20px; } }
.sod-survey__answer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  font-weight: 700; }
  .sod-survey__answer p {
    font-size: 1.125em;
    line-height: 1.0em; }
    @media (min-width: 768px) {
      .sod-survey__answer p {
        font-size: 1.25em; } }
    @media (min-width: 1200px) {
      .sod-survey__answer p {
        font-size: 1.45em; } }
  .sod-survey__answer small {
    font-size: 0.45em; }
  .sod-survey__answer strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-size: 2.5em;
    line-height: 1;
    white-space: nowrap; }
    @media (min-width: 768px) {
      .sod-survey__answer strong {
        font-size: 3.2em; } }
    .sod-survey__answer strong span {
      font-size: 0.45em; }
  .sod-survey__answer--pink {
    color: #e02b83; }
  .sod-survey__answer--purple {
    color: #7441b2; }
  .sod-survey__answer--blue {
    color: #22a9d6; }
  .sod-survey__answer--white {
    color: #fff; }

/*
---------------------------------------------------------------------------------------------------------------------
Q. SODって思っているよりも100倍…？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey__cloud {
  position: relative; }

/*
---------------------------------------------------------------------------------------------------------------------
Q. SODで働き続ける理由は？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey.work h2.question {
  margin: 0 0 20px 0; }
  @media (min-width: 1200px) {
    .sod-survey.work h2.question {
      margin: 0 0 0 0; } }
.sod-survey__list2 {
  display: grid;
  gap: 28px; }
  @media (min-width: 768px) {
    .sod-survey__list2 {
      grid-template-columns: 55% 40%;
      align-items: end;
      gap: 20px; } }
  @media (min-width: 1024px) {
    .sod-survey__list2 {
      margin-bottom: 20px;
      grid-template-columns: 45% 50%; } }
  @media (min-width: 1200px) {
    .sod-survey__list2 {
      margin-bottom: 0;
      grid-template-columns: 60% 35%; } }
.sod-survey__group {
  display: grid;
  gap: 30px; }
  @media (min-width: 768px) {
    .sod-survey__group {
      gap: 40px; } }
  .sod-survey__group__large {
    display: grid;
    gap: 40px; }
    @media (min-width: 1200px) {
      .sod-survey__group__large {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; } }
.sod-survey__balloon2 {
  position: relative;
  border: 2px solid currentColor;
  border-radius: 6px;
  padding: 10px 30px 15px;
  color: #e02b83; }
  @media (min-width: 768px) {
    .sod-survey__balloon2 {
      padding: 40px 20px; } }
  .sod-survey__balloon2::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 22px;
    height: 18px;
    background: currentColor;
    clip-path: polygon(0 0, 50% 100%, 100% 0); }
  .sod-survey__balloon2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 16px;
    height: 14px;
    background: #000;
    clip-path: polygon(0 0, 50% 100%, 100% 0); }
  .sod-survey__balloon2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px; }
    @media (min-width: 768px) {
      .sod-survey__balloon2 ul {
        gap: 20px; } }
  .sod-survey__balloon2 li {
    position: relative;
    padding-left: 30px;
    color: #fff;
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1.2em; }
    @media (min-width: 768px) {
      .sod-survey__balloon2 li {
        font-size: 1.25em; } }
    .sod-survey__balloon2 li::before {
      content: "";
      position: absolute;
      top: 0.3em;
      left: 0;
      width: 22px;
      height: 14px;
      z-index: 10;
      margin: auto; }
      @media (min-width: 768px) {
        .sod-survey__balloon2 li::before {
          top: 0.35em; } }
  .sod-survey__balloon2--large {
    padding: 10px 30px; }
    @media (min-width: 768px) {
      .sod-survey__balloon2--large {
        min-height: auto;
        padding: 26px 24px; } }
    @media (min-width: 1200px) {
      .sod-survey__balloon2--large {
        min-height: auto;
        padding: 30px 20px; } }
    .sod-survey__balloon2--large ul {
      grid-template-columns: 1fr;
      gap: 10px; }
      @media (min-width: 1200px) {
        .sod-survey__balloon2--large ul {
          gap: 20px; } }
  .sod-survey__balloon2--pink {
    color: #e02b83; }
    .sod-survey__balloon2--pink ul li::before {
      content: "";
      background: url("../../img/page/culture/icon-1.svg") no-repeat center/contain; }
  .sod-survey__balloon2--purple {
    color: #7441b2; }
    .sod-survey__balloon2--purple ul li::before {
      content: "";
      background: url("../../img/page/culture/icon-2.svg") no-repeat center/contain; }
  .sod-survey__balloon2--blue {
    color: #22a9d6; }
    .sod-survey__balloon2--blue ul li::before {
      content: "";
      top: 3px;
      background: url("../../img/page/culture/icon-3.svg") no-repeat center/contain; }
  .sod-survey__balloon2--white {
    color: #fff; }
    .sod-survey__balloon2--white ul li::before {
      content: "";
      top: 3px;
      background: url("../../img/page/culture/icon-4.svg") no-repeat center/contain; }
  .sod-survey__balloon2--small {
    padding: 10px 30px; }
    @media (min-width: 768px) {
      .sod-survey__balloon2--small {
        min-height: auto;
        padding: 26px 24px; } }
    .sod-survey__balloon2--small ul {
      grid-template-columns: 1fr;
      gap: 10px; }
      @media (min-width: 1024px) {
        .sod-survey__balloon2--small ul {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px 0; } }
    .sod-survey__balloon2--small li {
      font-size: 1em;
      padding-left: 26px; }
      @media (min-width: 768px) {
        .sod-survey__balloon2--small li {
          font-size: 0.95em; } }

/*
---------------------------------------------------------------------------------------------------------------------
Q. なんでSODを選んだの？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey__main {
  margin-bottom: 28px;
  color: #e02b83; }
  @media (min-width: 768px) {
    .sod-survey__main {
      margin-bottom: 30px; } }
  .sod-survey__main p {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 20px;
    font-size: 3.5em;
    font-weight: 700;
    line-height: 1; }
    @media (min-width: 768px) {
      .sod-survey__main p {
        font-size: 4.5em; } }
  .sod-survey__main span {
    font-size: 1em; }
  .sod-survey__main small {
    font-size: 0.38em; }
.sod-survey__reason-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px; }
  @media (min-width: 768px) {
    .sod-survey__reason-list {
      gap: 18px; } }
.sod-survey__reason {
  display: grid;
  grid-template-columns: 80% 1fr;
  align-items: center;
  gap: 10px;
  font-weight: 700; }
  .sod-survey__reason span {
    font-size: 1.0em;
    line-height: 1.4em; }
    @media (min-width: 768px) {
      .sod-survey__reason span {
        font-size: 1.35em; } }
  .sod-survey__reason strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 2em;
    line-height: 1;
    white-space: nowrap; }
    @media (min-width: 768px) {
      .sod-survey__reason strong {
        font-size: 2.55em; } }
  .sod-survey__reason small {
    font-size: 0.45em; }
  .sod-survey__reason--purple {
    color: #7441b2; }
  .sod-survey__reason--blue {
    color: #22a9d6; }
  .sod-survey__reason--white {
    color: #fff; }
  .sod-survey__reason--gray {
    color: #8a8a8a; }
.sod-survey__bar-list {
  display: grid;
  gap: 16px; }
  @media (min-width: 768px) {
    .sod-survey__bar-list {
      gap: 24px; } }
.sod-survey__bar {
  display: grid;
  grid-template-columns: var(--bar-width, 1fr) auto;
  align-items: center;
  gap: 16px; }
  @media (min-width: 768px) {
    .sod-survey__bar {
      gap: 18px; } }
  .sod-survey__bar p {
    margin: 0;
    padding: 10px;
    color: #fff;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.45; }
    @media (min-width: 768px) {
      .sod-survey__bar p {
        padding: 10px 15px;
        font-size: 1.00em; } }
  .sod-survey__bar strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 2.4em;
    line-height: 1;
    white-space: nowrap; }
    @media (min-width: 768px) {
      .sod-survey__bar strong {
        font-size: 2.7em; } }
  .sod-survey__bar small {
    font-size: 0.45em; }
  .sod-survey__bar--pink {
    --bar-width: 40%; }
    .sod-survey__bar--pink p {
      background: #e02b83; }
    .sod-survey__bar--pink strong {
      color: #e02b83; }
  .sod-survey__bar--purple {
    --bar-width: 45%; }
    .sod-survey__bar--purple p {
      background: #7441b2; }
    .sod-survey__bar--purple strong {
      color: #7441b2; }
  .sod-survey__bar--blue {
    --bar-width: 75%; }
    .sod-survey__bar--blue p {
      background: #22a9d6; }
    .sod-survey__bar--blue strong {
      color: #22a9d6; }
  .sod-survey__bar--white {
    --bar-width: 70%; }
    .sod-survey__bar--white p {
      background: #fff;
      color: #8a8a8a; }
    .sod-survey__bar--white strong {
      color: #fff; }
  .sod-survey__bar--gray {
    --bar-width: 50%; }
    .sod-survey__bar--gray p {
      background: #8a8a8a; }
    .sod-survey__bar--gray strong {
      color: #8a8a8a; }

/*
---------------------------------------------------------------------------------------------------------------------
Q. 入社を家族に伝えた時、なんて言われた？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey__family {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px; }
  @media (min-width: 768px) {
    .sod-survey__family {
      gap: 10px;
      align-items: start;
      margin-bottom: 40px; }
      .sod-survey__family.type1 {
        grid-template-columns: calc(18% - 10px) calc(23% - 10px) calc(28% - 10px) calc(16% - 10px) 15%; }
      .sod-survey__family.type2 {
        grid-template-columns: calc(25% - 10px) calc(30% - 10px) calc(20% - 10px) 25%; }
      .sod-survey__family.type3 {
        grid-template-columns: calc(22% - 10px) calc(30% - 10px) calc(18% - 10px) 30%; }
      .sod-survey__family.type4 {
        grid-template-columns: calc(25% - 10px) calc(33% - 10px) calc(20% - 10px) 22%;
        margin-bottom: 10px; } }
  @media (min-width: 1200px) {
    .sod-survey__family {
      gap: 20px;
      align-items: start;
      margin-bottom: 40px; }
      .sod-survey__family.type1 {
        grid-template-columns: calc(18% - 20px) calc(23% - 20px) calc(28% - 20px) calc(16% - 20px) 15%; }
      .sod-survey__family.type2 {
        grid-template-columns: calc(25% - 20px) calc(30% - 20px) calc(20% - 20px) 25%; }
      .sod-survey__family.type3 {
        grid-template-columns: calc(22% - 20px) calc(30% - 20px) calc(18% - 20px) 30%; }
      .sod-survey__family.type4 {
        grid-template-columns: calc(25% - 20px) calc(33% - 20px) calc(20% - 20px) 22%;
        margin-bottom: 20px; } }
.sod-survey .tell_item {
  position: relative;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 10px 10px;
  color: #e02b83;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.4em; }
  @media (min-width: 1200px) {
    .sod-survey .tell_item {
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.0em; } }
  .sod-survey .tell_item::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: currentColor;
    clip-path: polygon(0 0, 50% 100%, 100% 0); }
  .sod-survey .tell_item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #000;
    clip-path: polygon(0 0, 50% 100%, 100% 0); }
  .sod-survey .tell_item--pink {
    color: #e02b83; }
  .sod-survey .tell_item--blue {
    color: #22a9d6; }
  .sod-survey .tell_item--purple {
    color: #7441b2; }
  .sod-survey .tell_item--white {
    color: #fff; }

/*
---------------------------------------------------------------------------------------------------------------------
Q. 友人やパートナーにSODのこと、どこまで話してる？　Q. やっぱりエロいの好き？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-survey__content {
  display: grid;
  gap: 28px;
  align-items: center; }
  @media (min-width: 768px) {
    .sod-survey__content {
      grid-template-columns: 45% 1fr;
      gap: 0; } }
  @media (min-width: 1200px) {
    .sod-survey__content {
      grid-template-columns: 180px 1fr; } }
.sod-survey__card--love {
  height: 100%;
  position: relative; }
.sod-survey__donut {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border-radius: 50%; }
  @media (min-width: 768px) {
    .sod-survey__donut {
      width: 180px;
      height: 180px; } }
  .sod-survey__donut::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background: #000;
    border-radius: 50%; }
    @media (min-width: 768px) {
      .sod-survey__donut::before {
        width: 112px;
        height: 112px; } }
  .sod-survey__donut--talk {
    background: conic-gradient(#e02b83 0% 51%, #7441b2 51% 82%, #22a9d6 82% 96%, #8a8a8a 96% 100%); }
  .sod-survey__donut--love {
    background: conic-gradient(from -35deg, #e02b83 0% 63%, #7441b2 63% 91%, #22a9d6 91% 100%); }
    @media (min-width: 768px) {
      .sod-survey__donut--love {
        width: 180px;
        height: 180px; } }
  .sod-survey__donut p {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    margin: 0;
    color: #e02b83;
    font-size: 3.0em;
    line-height: 1;
    white-space: nowrap; }
    .sod-survey__donut p span {
      font-size: 0.4em; }
.sod-survey__legend {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px; }
  @media (min-width: 768px) {
    .sod-survey__legend {
      gap: 14px; } }
.sod-survey__legend-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px; }
  .sod-survey__legend-item strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 2em;
    line-height: 1.0em;
    text-align: right; }
    @media (min-width: 768px) {
      .sod-survey__legend-item strong {
        font-size: 2.4em; } }
    .sod-survey__legend-item strong span {
      font-size: 0.45em; }
  .sod-survey__legend-item p {
    margin: 0;
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.6; }
    @media (min-width: 768px) {
      .sod-survey__legend-item p {
        font-size: 0.95em; } }
  .sod-survey__legend-item--pink strong {
    color: #e02b83; }
  .sod-survey__legend-item--purple strong {
    color: #7441b2; }
  .sod-survey__legend-item--blue strong {
    color: #22a9d6; }
  .sod-survey__legend-item--gray strong {
    color: #8a8a8a; }
.sod-survey__love-area {
  position: relative;
  display: grid;
  gap: 24px;
  justify-items: center; }
  @media (min-width: 768px) {
    .sod-survey__love-area {
      display: flex;
      align-items: center;
      height: 100%;
      margin-top: -20px; } }
  @media (min-width: 1200px) {
    .sod-survey__love-area {
      height: 230px;
      margin-top: 0; } }
.sod-survey__heart {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 50px;
  transform: translate(-50%, -50%); }
.sod-survey__small-answer, .sod-survey__large-answer {
  color: #fff; }
  .sod-survey__small-answer strong, .sod-survey__large-answer strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    display: block;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap; }
    .sod-survey__small-answer strong span, .sod-survey__large-answer strong span {
      font-size: 0.45em; }
.sod-survey__small-answer {
  text-align: center; }
  @media (min-width: 768px) {
    .sod-survey__small-answer {
      position: absolute;
      text-align: left; } }
  .sod-survey__small-answer strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 2.0em; }
    @media (min-width: 768px) {
      .sod-survey__small-answer strong {
        font-size: 2.5em; } }
  .sod-survey__small-answer p {
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.4em;
    color: #fff;
    margin: 0 0 0 0; }
  .sod-survey__small-answer--blue {
    position: absolute;
    top: -10px;
    left: 0;
    color: #22a9d6;
    z-index: 10;
    text-align: left; }
    @media (min-width: 768px) {
      .sod-survey__small-answer--blue {
        left: 5%;
        top: 10%; } }
    @media (min-width: 1200px) {
      .sod-survey__small-answer--blue {
        left: 0; } }
  .sod-survey__small-answer--purple {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
    align-items: center;
    color: #7441b2; }
    @media (min-width: 768px) {
      .sod-survey__small-answer--purple {
        left: 25%;
        bottom: 10px; } }
    @media (min-width: 1024px) {
      .sod-survey__small-answer--purple {
        left: 15%;
        bottom: 20%; } }
    @media (min-width: 1200px) {
      .sod-survey__small-answer--purple {
        bottom: 0; } }
.sod-survey__large-answer {
  position: absolute;
  bottom: -15px;
  right: -4%;
  text-align: center;
  color: #e02b83; }
  @media (min-width: 768px) {
    .sod-survey__large-answer {
      position: absolute;
      right: 10%;
      bottom: 20px;
      text-align: left; } }
  @media (min-width: 1024px) {
    .sod-survey__large-answer {
      right: 0;
      bottom: 40px; } }
  @media (min-width: 1200px) {
    .sod-survey__large-answer {
      right: 5%;
      bottom: -30px; } }
  .sod-survey__large-answer p {
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1.4em;
    color: #fff;
    margin: -4px 0 0 0; }
  .sod-survey__large-answer strong {
    font-size: 3.5em; }
    @media (min-width: 768px) {
      .sod-survey__large-answer strong {
        font-size: 5em; } }

/*
---------------------------------------------------------------------------------------------------------------------
SODに入って、ぶっちゃけどう？
---------------------------------------------------------------------------------------------------------------------
*/
.sod-voice {
  background-color: #000;
  border-radius: 8px;
  padding: 20px;
  color: #fff;
  margin-top: 20px; }
  @media (min-width: 768px) {
    .sod-voice {
      min-height: 450px;
      padding: 40px; } }
  .sod-voice__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px; }
    @media (min-width: 768px) {
      .sod-voice__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; } }
    @media (min-width: 1024px) {
      .sod-voice__list {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px; } }
  .sod-voice__item {
    position: relative;
    padding: 15px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #e6006e 0%, #6b40c4 60%, #00b8ff 100%) border-box; }
    @media (min-width: 768px) {
      .sod-voice__item {
        padding: 20px; } }
    .sod-voice__item p {
      font-size: 0.9em;
      font-weight: 700;
      text-align: justify;
      line-height: 1.8em;
      color: #fff; }
      @media (min-width: 768px) {
        .sod-voice__item p {
          font-size: 1.0em; } }
  .sod-voice .quote img {
    width: 15px; }
    @media (min-width: 768px) {
      .sod-voice .quote img {
        width: 20px; } }

/*
---------------------------------------------------------------------------------------------------------------------
入社後のステップ
---------------------------------------------------------------------------------------------------------------------
*/
.flow-title {
  display: grid;
  gap: 10px;
  margin-bottom: 40px; }
  @media (min-width: 1024px) {
    .flow-title {
      grid-template-columns: 350px 1fr; } }
  .flow-title .txt h3 {
    font-size: 1.125em;
    line-height: 1.4em;
    color: #e6007e;
    margin: 0 0 10px 0; }
    @media (min-width: 768px) {
      .flow-title .txt h3 {
        font-size: 1.35em; } }
    @media (min-width: 1200px) {
      .flow-title .txt h3 {
        font-size: 1.75em; } }
  .flow-title .txt p {
    font-size: 0.8em;
    line-height: 1.8em;
    text-align: justify;
    color: #fff; }
    @media (min-width: 768px) {
      .flow-title .txt p {
        font-size: 0.9em; } }
    @media (min-width: 1200px) {
      .flow-title .txt p {
        font-size: 1.0em; } }

.sod-training {
  padding: 0; }
  .sod-training__inner {
    margin: 0 auto; }
  .sod-training__list {
    display: grid;
    gap: 15px; }
    @media (min-width: 768px) {
      .sod-training__list {
        gap: 30px; } }
  .sod-training__item {
    background-color: #f2f2f2;
    border-left: 4px solid #e6007e;
    padding: 20px 20px 15px; }
    @media (min-width: 1024px) {
      .sod-training__item {
        padding: 20px 30px 20px; } }
  .sod-training__step {
    font-size: 1.0em;
    font-weight: 700;
    line-height: 1.2em;
    color: #e6007e;
    margin: 0 0 10px 0; }
    @media (min-width: 1024px) {
      .sod-training__step {
        font-size: 1.125em; } }
  .sod-training__title {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.4em;
    margin: 0 0 10px 0; }
    @media (min-width: 1024px) {
      .sod-training__title {
        font-size: 1.75em;
        margin: 0 0 20px 0; } }
  .sod-training__text {
    font-size: 0.9em;
    font-weight: 500;
    text-align: justify;
    line-height: 2.0em; }
    @media (min-width: 1024px) {
      .sod-training__text {
        font-size: 1.0em; } }
  .sod-training__note {
    margin-top: 40px; }
    @media (min-width: 1024px) {
      .sod-training__note {
        margin-top: 60px; } }
  .sod-training__note-text {
    font-size: 0.9em;
    font-weight: 500;
    text-align: justify;
    line-height: 2.0em; }
    @media (min-width: 1024px) {
      .sod-training__note-text {
        font-size: 1.0em; } }

h4.badge {
  display: inline-block;
  border: 1px solid #e6006e;
  background-color: #fff;
  border-radius: 999px;
  padding: 4px 16px;
  color: #777;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4em;
  margin: 0 0 20px 0; }
  @media (min-width: 1024px) {
    h4.badge {
      font-size: 1.125em; } }

.benefits-list {
  display: grid;
  gap: 40px; }
  @media (min-width: 1200px) {
    .benefits-list {
      gap: 60px; } }

.sod-insurance {
  padding: 0; }
  .sod-insurance__title {
    border-bottom: 1px solid #e6006e;
    color: #e6006e;
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1.2em;
    padding-bottom: 10px; }
    @media (min-width: 1200px) {
      .sod-insurance__title {
        font-size: 1.25em;
        padding-bottom: 15px; } }
  .sod-insurance__list1 {
    display: grid;
    gap: 10px;
    margin: 20px 0 0; }
    @media (min-width: 768px) {
      .sod-insurance__list1 {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px; } }
  .sod-insurance__list2 {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 768px) {
      .sod-insurance__list2 {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px; } }
  .sod-insurance__item {
    background-color: #F2F2F2;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.4em;
    text-align: center;
    padding: 15px 10px; }
    @media (min-width: 1200px) {
      .sod-insurance__item {
        font-size: 1.0em; } }
    .sod-insurance__item--wide {
      grid-column: span 2; }