@charset "utf-8";

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* イラストスライドショー */
.scroll-infinity {
  margin-top: 40px;
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin-right: 32px;
}
@media screen and (max-width: 768px) {
  .scroll-infinity__list {
    gap: 10px;
    margin-right: 10px;
  }
}
.scroll-infinity__list-left {
  animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
.scroll-infinity__item {
  max-width: 220px;
  width: calc(100vw / 7);
}
@media screen and (max-width: 768px) {
  .scroll-infinity__item {
    width: calc(100vw / 4);
  }
}
.scroll-infinity__item > img {
  width: 100%;
}

.shindanLogo {
  text-align: center;
  margin-bottom: 40px;
}

.shindanLogo__left {
  max-width: 1000px;
  margin: auto;
}

.contentShindan {
  background: #f6f6f6;
}

.shindan-text__gray {
  color: #808080;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .shindan-text__gray {
    font-size: 12px;
    line-height: 1.5;
  }
}

a.shindan-link__black {
  color: #222;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

.shindanPage {
  background-color: #f6f6f6;
  background-image: url("https://doda.jp/cmn_web/img/engineer-onayami-shindan/bg-cityline.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-position: bottom;
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .shindanPage {
    background-size: contain;
  }
}

/* 診断TOP */

.shindan-title {
  position: relative;
  display: inline-block;
}

.shindan-title h1,
.shindan-title .shindan-text__22 {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-align: center;
}

@media screen and (max-width: 768px) {
  /* 診断TOP */
  .shindan-title h1 img {
    width: calc(100vw / (375 / 290));
    min-width: 290px;
  }
}

.shindan-title__wrap {
  position: relative;
  text-align: center;
  margin: 100px auto 0;
}
@media screen and (max-width: 768px) {
  .shindan-title__wrap {
    padding: calc(100vw / (375 / 92)) 0 38px;
    margin: auto;
    background: no-repeat center/contain url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/bg-circuit-line_top_pc.svg);
  }
}
@media screen and (max-width: 375px) {
  .shindan-title__wrap {
    padding: 92px 0 38px;
  }
}

.shindanPage_title {
  position: relative;
  z-index: 1;
  text-align: center;
}

.shindanPageTop-top .shindan-text__22 {
  margin-top: calc(100vw / (1200 / 40));
  font-size: calc(100vw / (1200 / 22));
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .shindanPageTop-top .shindan-text__22 {
    font-size: 14px;
  }
}

@media screen and (min-width: 1200px) {
  .shindanPageTop-top .shindan-text__22 {
    margin-top: 40px;
    font-size: 22px;
  }
}

.shindanPage_title img {
  max-width: 680px;
  width: calc(100vw / (1200 / 680));
  height: auto;
  margin: auto;
}

@media screen and (min-width: 1200px) {
  .shindanPage_title img {
    width: 680px;
  }
}

.shindan-title::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 961px;
  width: calc(100vw / (1200 / 961));
  top: calc(100vw / (1200 / 26));
  height: auto;
  aspect-ratio: 961 / 382;
  background: no-repeat center/contain url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/bg-circuit-line_top_pc.svg);
  z-index: 0;
  transform: translateX(-14%);
}
@media screen and (max-width: 768px) {
  .shindan-title::before {
    display: none;
  }
}

.programmingLanguage {
  position: absolute;
  z-index: 1;
}

.programmingLanguage__python {
  top: calc(100vw / (1200 / -38));
  left: calc(100vw / (1200 / -100));
}
.programmingLanguage__python img {
  max-width: 114px;
  width: calc(100vw / (1200 / 114));
  height: auto;
}
@media screen and (min-width: 1200px) {
  .programmingLanguage__python {
    top: -38px;
    left: -100px;
  }
  .programmingLanguage__python img {
    width: 114px;
  }
}
@media screen and (max-width: 768px) {
  .programmingLanguage__python {
    top: calc(100vw / (375 / 140));
    left: calc(100vw / (375 / 210));
  }
  .programmingLanguage__python img {
    width: calc(100vw / (375 / 50));
  }
}
@media screen and (max-width: 375px) {
  .programmingLanguage__python {
    top: 140px;
    left: 210px;
  }
  .programmingLanguage__python img {
    width: 50px;
  }
}

.programmingLanguage__javascript {
  top: calc(100vw / (1200 / 155));
  left: calc(100vw / (1200 / (-153 + -85)));
}

.programmingLanguage__javascript img {
  max-width: 160px;
  width: calc(100vw / (1200 / 160));
  height: auto;
}

@media screen and (min-width: 1200px) {
  .programmingLanguage__javascript {
    top: 155px;
    left: calc(-153px + -85px);
  }
  .programmingLanguage__javascript img {
    width: 160px;
  }
}
@media screen and (max-width: 768px) {
  .programmingLanguage__javascript {
    top: calc(100vw / (375 / (-56 + -20)));
    margin: auto;
    left: 0;
    right: 0;
  }
  .programmingLanguage__javascript img {
    width: calc(100vw / (375 / 68));
  }
}
@media screen and (max-width: 375px) {
  .programmingLanguage__javascript {
    top: (-56px + -20px);
  }
  .programmingLanguage__javascript img {
    width: 68px;
  }
}

.programmingLanguage__java {
  top: calc(100vw / (1200 / (16 + 310)));
  left: calc(100vw / (1200 / (-36 + -86)));
}

.programmingLanguage__java img {
  max-width: 153px;
  width: calc(100vw / (1200 / 86));
  height: auto;
}

@media screen and (min-width: 1200px) {
  .programmingLanguage__java {
    top: calc(16px + 310px);
    left: calc(-36px + -86px);
  }
  .programmingLanguage__java img {
    width: 86px;
  }
}
@media screen and (max-width: 768px) {
  .programmingLanguage__java {
    top: calc(100vw / (375 / (-14 + -20)));
    left: calc(100vw / (375 / 210));
  }
  .programmingLanguage__java img {
    width: calc(100vw / (375 / 38));
  }
}
@media screen and (max-width: 375px) {
  .programmingLanguage__java {
    top: calc(-14px + -20px);
    left: 210px;
  }
  .programmingLanguage__java img {
    width: 38px;
  }
}

.programmingLanguage__react {
  top: calc(100vw / (1200 / 24));
  right: calc(100vw / (1200 / (-50 + -98)));
}

.programmingLanguage__react img {
  max-width: 98px;
  width: calc(100vw / (1200 / 98));
  height: auto;
}

@media screen and (min-width: 1200px) {
  .programmingLanguage__react {
    top: 24px;
    right: calc(-50px + -98px);
  }
  .programmingLanguage__react img {
    width: 98px;
  }
}
@media screen and (max-width: 768px) {
  .programmingLanguage__react {
    top: calc(100vw / (375 / (-27 + -20)));
    left: calc(100vw / (375 / 30));
    right: auto;
  }
  .programmingLanguage__react img {
    width: calc(100vw / (375 / 44));
  }
}
@media screen and (max-width: 375px) {
  .programmingLanguage__react {
    top: calc(-27px + -20px);
    left: 30px;
  }
  .programmingLanguage__react img {
    width: 44px;
  }
}

.programmingLanguage__typescript {
  top: calc(100vw / (1200 / 126));
  right: calc(100vw / (1200 / (-97 + -161)));
}

.programmingLanguage__typescript img {
  max-width: 160px;
  width: calc(100vw / (1200 / 160));
  height: auto;
}

@media screen and (min-width: 1200px) {
  .programmingLanguage__typescript {
    top: 126px;
    right: calc(-97px + -161px);
  }
  .programmingLanguage__typescript img {
    width: 160px;
  }
}
@media screen and (max-width: 768px) {
  .programmingLanguage__typescript {
    top: calc(100vw / (375 / 130));
    left: calc(100vw / (375 / 4));
    right: auto;
  }
  .programmingLanguage__typescript img {
    width: calc(100vw / (375 / 68));
  }
}
@media screen and (max-width: 375px) {
  .programmingLanguage__typescript {
    top: 130px;
    left: 4px;
  }
  .programmingLanguage__typescript img {
    width: 68px;
  }
}

.programmingLanguage__php {
  top: calc(100vw / (1200 / (310 + -44)));
  right: calc(100vw / (1200 / -70));
}

.programmingLanguage__php img {
  max-width: 98px;
  width: calc(100vw / (1200 / 98));
  height: auto;
}

@media screen and (min-width: 1200px) {
  .programmingLanguage__php {
    top: calc(310px + -44px);
    right: -70px;
  }
  .programmingLanguage__php img {
    width: 98px;
  }
}
@media screen and (max-width: 768px) {
  .programmingLanguage__php {
    top: calc(100vw / (375 / 102));
    right: calc(100vw / (375 / -18));
  }
  .programmingLanguage__php img {
    width: calc(100vw / (375 / 36));
  }
}
@media screen and (max-width: 375px) {
  .programmingLanguage__php {
    top: 102px;
    right: -18px;
  }
  .programmingLanguage__php img {
    width: 36px;
  }
}

.shindan-title .icon-cloud-01,
.shindan-title .icon-cloud-02 {
  position: absolute;
  z-index: 1;
  width: calc(100vw / (1260 / 130));
  height: auto;
}

.shindan-title .icon-cloud-01 {
  animation: fluffy01 3s ease-in-out infinite alternate-reverse;
}

.shindan-title .icon-cloud-02 {
  animation: fluffy02 3s ease-in-out infinite alternate-reverse;
}

.shindan-title .icon-cloud-01 {
  top: 0;
  left: calc(100vw / (1260 / (-155 + -130)));
}

.shindan-title .icon-cloud-02 {
  top: calc(100vw / (1260 / 310));
  right: calc(100vw / (1260 / (-120 + -130)));
}

@media screen and (min-width: 1260px) {
  .shindan-title .icon-cloud-01,
  .shindan-title .icon-cloud-02 {
    width: 130px;
  }

  .shindan-title .icon-cloud-01 {
    top: 0;
    left: calc(-155px + -130px);
  }

  .shindan-title .icon-cloud-02 {
    top: 310px;
    right: calc(-120px + -130px);
  }
}
@media screen and (max-width: 768px) {
  .shindan-title .icon-cloud-01,
  .shindan-title .icon-cloud-02 {
    width: calc(100vw / (375 / 60));
  }

  .shindan-title .icon-cloud-01 {
    top: calc(100vw / (375 / (-26 + -44)));
    left: calc(100vw / (375 / -40));
    animation: fluffy01 5s ease-in-out infinite alternate-reverse;
  }

  .shindan-title .icon-cloud-02 {
    top: calc(100vw / (375 / (-26 + -10)));
    right: calc(100vw / (375 / -40));
    animation: fluffy02 5s ease-in-out infinite alternate-reverse;
  }
}
@media screen and (max-width: 375px) {
  .shindan-title .icon-cloud-01,
  .shindan-title .icon-cloud-02 {
    width: 60px;
  }

  .shindan-title .icon-cloud-01 {
    top: calc(-26px + -44px);
    left: -40px;
  }

  .shindan-title .icon-cloud-02 {
    top: calc(-26px + -10px);
    right: -40px;
  }
}

.shindanPageTop-middle,
.shindanPageTop-bottom,
.shindanPageQuestion-top {
  padding-left: 16px;
  padding-right: 16px;
}

.shindanPageTop-middle {
  margin-top: 52px;
}

@media screen and (max-width: 768px) {
  .shindanPageTop-middle {
    width: auto;
  }
}

section.shindanPageTop-bottom {
  margin-bottom: 0;
  padding-bottom: 216px;
}

@media screen and (max-width: 768px) {
  section.shindanPageTop-bottom {
    width: auto;
    padding: 0 16px 68px;
  }
}

/* 設問ページ */
.shindanPageQuestion-top {
  margin-top: 40px;
  margin-bottom: 82px;
}

@media screen and (max-width: 768px) {
  .shindanPageQuestion-top {
    margin-top: 24px;
    margin-bottom: 56x;
  }
}

.shindanQuestion,
.shindanInformation,
.shindanFeatures {
  max-width: 1000px;
  margin: auto;
}

.shindanQuestion {
  border-radius: 72px;
  border: 1px solid #000;
  background: #fff;
  padding: 48px 16px 80px;
  position: relative;
}

@media screen and (max-width: 768px) {
  .shindanQuestion {
    border-radius: 24px;
    padding: 72px 16px 40px;
  }
}

.shindanPageQuestion .shindanQuestion {
  padding: 56px 16px;
}

@media screen and (max-width: 768px) {
  .shindanPageQuestion .shindanQuestion {
    padding: 32px 16px;
  }
}

.shindanQuestion:before,
.shindanQuestion:after {
  position: absolute;
  content: "";
  display: block;
  width: 176px;
  height: 132px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/icon-cloud-03.webp);
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .shindanQuestion:before,
  .shindanQuestion:after {
    width: 80px;
    height: 62px;
  }
}

.shindanQuestion:before {
  top: 48px;
  right: -108px;
}

@media screen and (max-width: 768px) {
  .shindanQuestion:before {
    top: -18px;
    right: -50px;
  }
}

.shindanQuestion:after {
  bottom: 28px;
  left: -104px;
}

@media screen and (max-width: 768px) {
  .shindanQuestion:after {
    bottom: -22px;
    left: -40px;
  }
}

@media screen and (max-width: 768px) {
  .shindanPageQuestion .shindanLogo {
    margin: 0 auto 24px;
  }

  .shindanPageQuestion .shindanLogo img {
    width: 200px;
    height: auto;
  }
}

.shindanQuestion__start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 56px;
}
@media screen and (max-width: 768px) {
  .shindanQuestion__start {
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    gap: 0;
    top: -22px;
  }
  .shindanQuestion__start img {
    width: 122px;
    height: auto;
  }
}

.shindanQuestion-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

.shindanQuestion-item {
  text-align: center;
  width: 100%;
}

.shindanQuestion-num {
  text-align: center;
}

.shindanQuestion-num__text {
  color: #1748ca;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .shindanQuestion-num__text {
    font-size: 25px;
  }
}

.shindanQuestion-num__text span {
  font-size: 62px;
  width: 80px;
  margin-right: 6px;
}

@media screen and (max-width: 768px) {
  .shindanQuestion-num__text span {
    font-size: 38px;
    width: auto;
  }
}

.shindanQuestion-num__text::before,
.shindanQuestion-num__text::after {
  content: "";
  display: block;
  width: 15px;
  height: 26px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/QuestionPager_arrow.svg);
  background-size: contain;
}

.shindanQuestion-num__text::before {
  margin-right: 32px;
}

.shindanQuestion-num__text::after {
  transform: rotate(180deg);
  margin-left: 32px;
}

.shindanQuestion-item_question {
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  min-height: 140px;
}

@media screen and (max-width: 768px) {
  .shindanQuestion-item_question {
    font-size: 16px;
    min-height: 102px;
  }
}

.shindanQuestion-item_answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin-top: 40px;
}

.shindanQuestion-item_answer-button .answer-text {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}

.shindanQuestion-item_answer-button {
  max-width: 448px;
  width: 100%;
  border: 1px solid #000;
  background: #fff;
  color: #222;
  font-family: YuGothic;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px;
  padding: 24px;
  border-radius: 999px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .shindanQuestion-item_answer-button {
    font-size: 14px;
    padding: 16px;
  }
}

.shindanQuestion-item_answer-button:hover,
.shindanQuestion-item_answer-button:active {
  background: #4c75e2;
  color: #fff;
}

.shindan-button__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  margin-top: 48px;
}

@media screen and (max-width: 768px) {
  .shindan-button__wrap {
    margin-top: 24px;
    gap: 40px;
  }
}

.shindanQuestion-item_back-button {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
  width: 220px;
  border: 1px solid #000;
  background: #a7bef1;
  box-shadow: 4px 4px 0 0 #000;
  color: #222;
  font-family: YuGothic;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  padding: 16px;
  border-radius: 999px;
  position: relative;
}

.shindanQuestion-item_back-button::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/backButton_arrow.svg);
  background-size: contain;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 12px;
}

.shindanQuestion-item_back-button:hover,
.shindanQuestion-item_back-button:active {
  background: #4c75e2;
  color: #fff;
}

.shindan-h2 {
  text-align: center;
  color: #222;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

@media screen and (max-width: 768px) {
  .shindan-h2 {
    font-size: 24px;
  }
}

.txtDecoration-code {
  color: #1748ca;
}

.txtDecoration-code::before,
.txtDecoration-code::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 38px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/icon_brace.svg);
  background-size: contain;
  vertical-align: bottom;
}

@media screen and (max-width: 768px) {
  .txtDecoration-code::before,
  .txtDecoration-code::after {
    width: 14px;
    height: 31px;
    vertical-align: text-bottom;
  }
}

.txtDecoration-code::after {
  transform: rotate(180deg);
}

.shindanInformation,
.shindanPageTop-bottom {
  /* max-width: 1000px; */
  margin: 88px auto;
}

@media screen and (max-width: 768px) {
  .shindanInformation,
  .shindanPageTop-bottom {
    margin: 40px auto;
  }
}

.shindanPageResult {
  padding-top: 32px;
}

.shindanPageResult .shindanLogo__left__wrap {
  max-width: 1004px;
  margin: auto;
  padding: 0 16px;
}
@media screen and (max-width: 768px) {
  .shindanPageResult .shindanLogo__left__wrap {
    text-align: center;
  }
}

.shindanPageResult__features .line_dot {
  margin: 24px auto 32px;
}

.shindanInformation h2 {
  margin-bottom: 64px;
}

@media screen and (max-width: 768px) {
  .shindanInformation h2 {
    margin-bottom: 32px;
  }
}

.shindanInformation .shindan-text__16 {
  max-width: 848px;
  margin: 48px auto 0;
}

@media screen and (max-width: 768px) {
  .shindanInformation .shindan-text__16 {
    margin: 0 auto;
    width: 100%;
  }
}

.shindanInformation-list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  margin: 48px auto 24px;
}

.shindanPageTop .shindanInformation-list .shindanInformation-item {
  max-width: 320px;
}

.shindanPageResult .shindanInformation-list {
  min-height: 184px;
}

@media screen and (max-width: 768px) {
  .shindanInformation-list {
    margin: 32px 0;
    gap: 32px;
    flex-direction: column;
    align-items: center;
  }

  .shindanPageTop .shindanInformation-list {
    width: 100%;
  }

  .shindanPageResult .shindanInformation-list {
    min-height: none;
    max-width: 260px;
    margin: 32px auto;
  }

  .shindanPageResult .shindanInformation-item {
    padding: 24px 0 22px;
    border-radius: 10px;
  }

  .shindanPageResult .shindanInformation-item::before {
    width: 30px;
    height: 30px;
    top: -14px;
  }
}

.shindanInformation-item {
  flex: 1;
  border-radius: 24px;
  border: 1px solid #000;
  background: #fff;
  padding: 32px 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .shindanInformation-item {
  }
}

.shindanInformation-item::before {
  content: "";
  display: block;
  width: 45px;
  height: 44px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/icon-terminalBlue.svg);
  background-size: contain;
  position: absolute;
  top: -20px;
  left: 28px;
}

.shindanInformation-item h3 {
  text-align: center;
  color: #222;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
}
.shindanInformation-item img {
  display: block;
  margin: 0 auto 16px;
}

.shindanFeatures h2 {
  margin-bottom: 54px;
}

@media screen and (max-width: 768px) {
  .shindanFeatures h2 {
    margin-bottom: 32px;
  }
}

.shindanFeatures .shindan-text__16,
.shindanFeatures .shindan-text__16 {
  font-weight: bold;
}

.shindanFeatures-text {
  margin: 46px auto 80px;
}

@media screen and (max-width: 768px) {
  .shindanFeatures-text {
    margin: 32px auto 40px;
  }
}

.shindanFeatures-text dt {
  margin-bottom: 8px;
}

.shindanFeatures-img_pc {
  max-width: 1000px;
  width: 100%;
}

.line_dot {
  border: none;
  border-top: 1px dashed #000;
  width: 100%;
}

.shindanFeatures-img_pc,
.shindanFeatures-img_sp {
  width: 100%;
}

.resultType-img {
  position: relative;
}

.resultType-img_wrap {
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .resultType-img_wrap {
    position: relative;
  }
}

.resultType-img_wrap img {
  z-index: 1;
}

.resultType-img_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 856px;
  width: 856px;
  /* width: calc(100vw / (1200 / 856)); */
  top: calc(100vw / (1200 / -30));
  height: auto;
  aspect-ratio: 856 / 240;
  background: no-repeat center / contain url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/bg-circuit-line_resultsPage_pc.svg);
  z-index: 0;
  transform: translateX(-34%);
}
@media screen and (max-width: 768px) {
  .resultType-img_wrap::before {
    display: none;
  }
}

.resultType-img_wrap .icon-cloud-01,
.resultType-img_wrap .icon-cloud-02 {
  position: absolute;
  margin: auto;
  width: 130px;
  height: 98px;
}

.resultType-img_wrap .icon-cloud-01 {
  top: 64px;
  left: -280px;
  animation: fluffy01 3s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 768px) {
  .resultType-img_wrap .icon-cloud-01 {
    top: calc(100vw / (768 / -80));
    left: calc(100vw / (768 / -46));
  }
}
/* @media screen and (max-width: 600px) {
  .resultType-img_wrap .icon-cloud-01 {
    top: calc(100vw / (880 / -80));
    left: calc(100vw / (375 / -80));
  }
} */
@media screen and (max-width: 768px) {
  .resultType-img_wrap .icon-cloud-01,
  .resultType-img_wrap .icon-cloud-02 {
    max-width: 130px;
    width: calc(100vw / (375 / 80));
    height: auto;
  }
}

.resultType-img_wrap .icon-cloud-02 {
  top: 0;
  right: -280px;
  animation: fluffy02 3s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 768px) {
  .resultType-img_wrap .icon-cloud-02 {
    top: calc(100vw / (768 / -170));
    right: calc(100vw / (768 / -46));
  }
}
@media screen and (max-width: 540px) {
  .resultType-img_wrap .icon-cloud-02 {
    top: calc(100vw / (768 / -210));
  }
}

@media screen and (max-width: 400px) {
  .resultType-img_wrap .icon-cloud-02 {
    top: calc(100vw / (768 / -270));
  }
}

.resultType-card {
  border-radius: 18px;
  background: #fff;
  /* overflow: hidden; */
  border: 1px solid #000;
}
.resultType-card__title {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid #000;
  padding: 10px 24px;
}
.resultType-card__title h3 {
  font-weight: 700;
}
.resultType-card ul {
  padding: 32px;
}
@media screen and (max-width: 768px) {
  .resultType-card__title {
    border-radius: 10px 10px 0 0;
  }
  .resultType-card {
    border-radius: 10px;
  }
  .resultType-card ul {
    padding: 20px;
  }
}
.resultType-card li {
  font-size: 18px;
  line-height: 1.6;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .resultType-card li {
    font-size: 14px;
    margin-bottom: 14px;
  }
}
.resultType-card ul li:last-of-type {
  margin-bottom: 0;
}
.resultType-card li::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/alert-icon1.svg);
  background-size: contain;
}
.resultType-card-second__wrap {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .resultType-card-second__wrap {
    flex-direction: column;
  }
}
.resultType-card-second {
  flex: 1;
  overflow: hidden;
}
.title__green {
  background: #69d997;
}
.title__red {
  background: #ffc7ba;
}
.title__purple {
  background: #d2b0ff;
}
.title__blue {
  background: #4c75e2;
}
.title__blue h3 {
  color: #fff;
}
.resultType-card-second__title {
  padding: 10px 16px;
}
.resultType-card-second__title h3 {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}
.resultType-card-second__note {
  padding: 24px 32px;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .resultType-card-second__note {
    font-size: 14px;
  }
}
.chart-wrapper {
  padding: 20px 20px 0;
}
@media screen and (max-width: 640x) {
  .chart-wrapper {
    padding: 20px 0 0;
  }
}
#cylinderChart {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.note {
  padding: 24px 40px 30px;
  font-size: 16px;
  line-height: 1.6;
  border-top: 1px dotted #999;
}
@media screen and (max-width: 768px) {
  .note {
    padding: 10px 20px 20px;
    font-size: 14px;
  }
}

.countermeasure__wrap {
  margin-top: 48px;
}

.countermeasure__wrap .line_dot {
  margin: 16px auto;
}

.title_check {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .title_check {
    font-size: 18px;
  }
}

.title_check::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/taisaku_check.svg);
  background-size: contain;
}

.title_caution {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.title_caution::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/alert-icon2.svg);
  background-size: contain;
}

.title_moyamoya {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.title_moyamoya::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/nayami_guruguru.svg);
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: -50px;
}

.resultType__note {
  text-align: center;
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 28px;
}

@media screen and (max-width: 768px) {
  .resultType__note {
    font-size: 16px;
    margin-top: 36px;
    margin-bottom: 20px;
  }
}

.resultType {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 100px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .resultType {
    background: no-repeat top/contain url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/bg-circuit-line_resultsPage_sp.svg);
  }
}

.resultType img {
  margin-bottom: -40px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .resultType img {
    margin-bottom: -32px;
  }
}

.resultType .resultType-title {
  padding: 56px 32px 40px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .resultType .resultType-title {
    padding: 45px 12px 24px;
    font-size: 14px;
  }
}

.resultType-title__wrap {
  position: relative;
  background: #4c75e2;
  border-radius: 10px;
  border: 1px solid #000;
  box-shadow: 6px 6px 0 0 #000;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
  .resultType-title__wrap {
    width: calc(100% - 60px);
  }
}

.resultType_supporter .resultType-title__wrap {
  background: #eb498c;
}

.resultType_challenger .resultType-title__wrap {
  background: #9472eb;
}

.resultType_pursuer .resultType-title__wrap {
  background: #69d997;
}

.resultType_seeker .resultType-title__wrap {
  background: #e1c498;
}

.resultType_risk-manager .resultType-title__wrap {
  background: #96dd7f;
}

.resultType_traveler .resultType-title__wrap {
  background: #ffd711;
}

.resultType_strategist .resultType-title__wrap {
  background: #f7b53d;
}

.resultType_coordinator .resultType-title__wrap {
  background: #f9a9bd;
}

.resultType_pursuer .resultType-title__wrap h2,
.resultType_seeker .resultType-title__wrap h2,
.resultType_risk-manager .resultType-title__wrap h2,
.resultType_traveler .resultType-title__wrap h2,
.resultType_strategist .resultType-title__wrap h2,
.resultType_coordinator .resultType-title__wrap h2 {
  color: #000;
}

.resultType-title__wrap .resultType-title__corner {
  position: absolute;
}

.resultType-title__wrap .resultType-title__corner:nth-of-type(1) {
  top: 16px;
  left: 16px;
}

.resultType-title__wrap .resultType-title__corner:nth-of-type(2) {
  top: 16px;
  right: 16px;
  transform: rotate(90deg);
}

.resultType-title__wrap .resultType-title__corner:nth-of-type(3) {
  bottom: 52px;
  right: 16px;
  transform: rotate(180deg);
}

.resultType-title__wrap .resultType-title__corner:nth-of-type(4) {
  bottom: 52px;
  left: 16px;
  transform: rotate(270deg);
}

@media screen and (max-width: 768px) {
  .resultType-title__wrap .resultType-title__corner:nth-of-type(1) {
    top: 12px;
    left: 12px;
  }

  .resultType-title__wrap .resultType-title__corner:nth-of-type(2) {
    top: 12px;
    right: 12px;
    transform: rotate(90deg);
  }

  .resultType-title__wrap .resultType-title__corner:nth-of-type(3) {
    bottom: 48px;
    right: 12px;
    transform: rotate(180deg);
  }

  .resultType-title__wrap .resultType-title__corner:nth-of-type(4) {
    bottom: 48px;
    left: 12px;
    transform: rotate(270deg);
  }
}

.resultType-title span {
  font-size: 40px;
  line-height: 1.2;
  font-weight: bold;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
@media screen and (max-width: 768px) {
  .resultType-title span {
    font-size: 28px;
  }
}

.resultType-title span::before,
.resultType-title span::after {
  content: "";
  display: block;
  margin: auto;
  z-index: 0;
}
@media screen and (max-width: 400px) {
  .resultType-title span::before,
  .resultType-title span::after {
    margin: auto 0;
    position: absolute;
  }
}

.resultType-title span::before {
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/tag_left.svg);
  background-size: contain;
  left: 0;
  width: 33px;
  height: 24px;
}

.resultType-title span::after {
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/tag_right.svg);
  background-size: contain;
  right: 0;
  width: 34px;
  height: 40px;
}

/* 結果タイプあしらい黒バージョン */
.resultType_pursuer .resultType-title span::before,
.resultType_seeker .resultType-title span::before,
.resultType_risk-manager .resultType-title span::before,
.resultType_traveler .resultType-title span::before,
.resultType_strategist .resultType-title span::before,
.resultType_coordinator .resultType-title span::before {
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/tag_left_b.svg);
  background-size: contain;
}

.resultType_pursuer .resultType-title span::after,
.resultType_seeker .resultType-title span::after,
.resultType_risk-manager .resultType-title span::after,
.resultType_traveler .resultType-title span::after,
.resultType_strategist .resultType-title span::after,
.resultType_coordinator .resultType-title span::after {
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/tag_right_b.svg);
  background-size: contain;
}

.shindanPageResult__features {
  max-width: 800px;
  margin: 56px auto 124px;
  padding: 0 16px;
}

.shindanPageResult__features h4 {
  text-align: center;
  color: #222;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .shindanPageResult__features h4 {
    font-size: 20px;
    min-height: 64px;
  }
}

@media screen and (max-width: 768px) {
  .shindanPageResult__features .shindan-text__16,
  .shindanPageResult__countermeasure .shindan-text__16 {
    font-size: 14px;
    line-height: 1.6;
  }
}

.shindanPageResult__countermeasure__title {
  position: relative;
}

.shindanPageResult__countermeasure__title .icon-cloud-01,
.shindanPageResult__countermeasure__title .icon-cloud-02 {
  position: absolute;
  margin: auto;
  width: 130px;
  height: 98px;
}

.shindanPageResult__countermeasure__title .icon-cloud-01 {
  top: 30px;
  left: 0;
  animation: fluffy01 3s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 880px) {
  .shindanPageResult__countermeasure__title .icon-cloud-01 {
    top: calc(100vw / (880 / 30));
    left: calc(100vw / (880 / -70));
  }
}
@media screen and (max-width: 768px) {
  .shindanPageResult__countermeasure__title .icon-cloud-01,
  .shindanPageResult__countermeasure__title .icon-cloud-02 {
    max-width: 130px;
    width: calc(100vw / (375 / 80));
    height: auto;
  }
}
@media screen and (max-width: 768px) {
}

.shindanPageResult__countermeasure__title .icon-cloud-02 {
  top: -60px;
  right: 0;
  animation: fluffy02 3s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 880px) {
  .shindanPageResult__countermeasure__title .icon-cloud-02 {
    top: calc(100vw / (880 / -60));
    right: calc(100vw / (880 / -70));
  }
}

.back__lightBlue {
  background: #eaf7fd;
  position: relative;
  z-index: 1;
  width: 100vw;
}

.back__lightBlue::before {
  position: absolute;
  top: -58px;
  content: "";
  display: block;
  width: 100%;
  height: 124px;
  background: #eaf7fd;
  z-index: 0;
  border-radius: 50%;
  border: solid 1px #000;
}

.back__lightBlue__wrap {
  position: relative;
  z-index: 1;
  background: #eaf7fd;
  border: solid 1px #000;
  border-top: none;
}

.shindanPageResult__countermeasure {
  max-width: 800px;
  margin: 0 auto 110px;
  padding: 0 16px;
}

.shindanPageResult__countermeasure .resultType-card {
  margin-top: 58px;
}

.shindanPageResult__countermeasure .shindan-h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  background: no-repeat url(https://doda.jp/cmn_web/img/engineer-onayami-shindan/rocket_icon.svg);
  background-size: contain;
  margin: 0 auto 20px;
}

.shindanPageResult__point {
  padding: 0 16px;
}

.contArea {
  max-width: 800px;
  margin: 32px auto;
}

@media screen and (max-width: 768px) {
}

.resultType-card-detail__wrap {
  padding: 32px;
}
@media screen and (max-width: 768px) {
  .resultType-card-detail__wrap {
    padding: 20px;
  }
}

.snsArea {
  text-align: center;
  margin-top: 48px;
}

.snsLinks__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 16px;
  margin-top: 32px;
}

@media screen and (max-width: 768px) {
  .snsLinks__title {
    margin-top: 24px;
  }
  .yourOnayamiType__img {
    width: 160px;
    height: auto;
  }
}

.snsLinks__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.snsLinks__list a:hover {
  opacity: 0.6;
}
@media screen and (max-width: 768px) {
  .snsLinks__list {
    gap: 48px;
  }
  .snsLinks__list a img {
    width: 40px;
    height: auto;
  }
}

.note_small {
  color: #808080;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  display: block;
  margin-top: 16px;
}

.pc_hide {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc_hide {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  /* 診断TOP */

  .shindanInformation-item {
    width: 100%;
  }
  .shindanInformation-item h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  .sp_hide {
    display: none;
  }
}

@keyframes fluffy01 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes fluffy02 {
  0%,
  100% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
}

main {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
}

/* 読み込み完了後 */
main.is-loaded {
  opacity: 1;
  visibility: visible;
}

#shindanTarget {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

#shindanTarget.is-loaded__shindanTarget {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーション前 */
.scroll-animate {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* スクロールイン */
.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 初期表示 */
.shindanQuestion-num__text,
.shindanQuestion-item_question {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* 回答済 */
.is-leave {
  opacity: 0;
  transform: translateY(-10px);
}

/* 次の設問 */
.is-enter {
  opacity: 0;
  transform: translateY(10px) scale(0.8);
}

/* 表示状態 */
.is-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* 追従ログインボタン */
.nav-area {
  position: fixed;
  position: -webkit-fixed;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: 32px;
  z-index: 2147483647;
  text-align: center;
  transform: translateZ(1px);
  box-sizing: border-box;
}

.nav-area .nav-area__description {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}

.nav-area .nav-area__to-doda-btn {
  border-radius: 50px;
  border: 1px solid #000;
  background: #f27026;
  box-shadow: 4px 4px 0 0 #000;
  max-width: 510px;
  width: 100%;
  padding: 20px;
  display: block;
  margin: 16px auto 0;
  box-sizing: border-box;
}

.nav-area .nav-area__to-doda-btn:hover {
  text-decoration: none;
  position: relative;
  top: 4px;
  box-shadow: none;
}

.to-doda-btn-text {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.to-doda-btn-text__small {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 6px;
}

.bluer {
  position: relative;
}

.bluer::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 130vh;
  top: -32px;
  left: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 72.12%);
  backdrop-filter: blur(5.5px);
  pointer-events: none;
}

.bluer-text {
  filter: blur(6px);
}

@media screen and (max-width: 768px) {
  .nav-area {
    padding: 20px 20px 24px;
  }
  .nav-area .nav-area__description {
    font-size: 14px;
    font-weight: 600;
  }
  .nav-area .nav-area__to-doda-btn {
    padding: 13px;
    margin-top: 10px;
  }
  .to-doda-btn-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
  }
  .to-doda-btn-text__small {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
  }
}