@charset "utf-8";

/* ↓↓↓ common ↓↓↓ */
main {
  position: relative;
  padding-bottom: 220px;
  background: rgb(217,245,255);
  background: linear-gradient(166deg, rgba(217,245,255,1) 0%, rgba(255,255,255,1) 20%, rgba(235,250,255,1) 40%, rgba(255,255,255,1) 60%, rgba(232,239,247,1) 80%, rgba(255,255,255,1) 100%);
  overflow: clip;
}

main::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/saiyou/ginou/career/west/img/common/bg-texture.jpg) repeat;
  opacity: 0.7;
}

main::after {
  content: '';
  position: absolute;
  translate: -50% 0;
  top: 0;
  left: 50%;
  width: 770px;
  height: 100%;
  background: url(/saiyou/ginou/career/west/img/common/bg-line.png) repeat-y;
}

@media screen and (max-width: 768px) {
  main {
    padding-bottom: 85px;
  }

  main::after {
    display: none;
  }
}

section {
  position: relative;
  z-index: 2;
}
/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ fv ↓↓↓ */

.fv .page-group {
  max-width: calc(1140px + 60px);
  margin: 0 auto;
  padding: 150px 30px 45px;
}

@media screen and (max-width: 768px) {
  .fv .page-group {
    padding: 90px 25px 30px;
  }
}

.fv .page-group .ttl {
  width: 493px;
}

@media screen and (max-width: 768px) {
  .fv .page-group .ttl {
    width: 309px;
  }
}

.fv .page-group .jp {
  position: relative;
  display: inline-block;
  font-family: var(--font-zen);
  font-size: 1.6rem;
  font-weight: 700;
  padding-left: 18px;
  color: #000;
  margin-top: 15px;
}

@media screen and (max-width: 768px) {
  .fv .page-group .jp {
    margin-top: 5px;
  }
}

.fv .page-group .jp::before {
  content: '';
  position: absolute;
  top: 4px;
  left: -8px;
  transform-origin: right;
  rotate: -60deg;
  width: 18px;
  height: 3px;
  background-color: #000;
  border-radius: 3px;
}

.fv .content {
  position: relative;
}

.fv .content::after {
  content: '';
  position: absolute;
  translate: -50% 46%;
  bottom: 0;
  left: 50%;
  min-width: 0;
  aspect-ratio: 1170/107;
  width: min(1170px, calc(100% - 60px));
  background: url(/saiyou/ginou/career/west/img/questionnaire/fv-catch.png) no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
}

@media screen and (max-width: 768px) {
  .fv .content::after {
    translate: -50% 15%;
    aspect-ratio: 363/95;
    width: 363px;
    background: url(/saiyou/ginou/career/west/img/questionnaire/fv-catch_sp.png) no-repeat;
    background-size: contain;
  }
}

.fv .content .bg {
  position: relative;
  height: max(480px, 37.5vw);
}

@media screen and (max-width: 768px) {
  .fv .content .bg {
    height: min(600px, 114.67vw);
  }
}

.fv .content .bg img {
  object-fit: cover;
  object-position: center;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .fv .content .bg img {
    object-position: top;
  }
}

/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ wrap ↓↓↓ */
.main-wrap {
  max-width: 1280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px clamp(20px,64/1280*100vw,64px);
  padding: 0 30px;
  margin: 110px auto 0;
}

@media screen and (max-width: 768px) {
  .main-wrap {
    padding: 0 27px;
    gap: 40px;
  }
}

.main-wrap .block {
  position: relative;
  max-width: 1120px;
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 64px 5.902% 66px;
  container-type: inline-size;
}
.main-wrap .block:has(.graph-box) {
  padding: 64px 3.607% 66px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block,
  .main-wrap .block:has(.graph-box) {
    max-width: calc(320/375*100vw);
    padding: 32px 25px;
  }
}

.main-wrap .block.half {
  width: calc((min(100%,1120px) - clamp(20px,64/1280*100vw,64px))/2);
}
@media screen and (max-width: 768px) {
  .main-wrap .block.half {
    width: 100%;
  }
}

.main-wrap .block h3 {
  font-size: clamp(2.4rem,28/1180*100vw,2.8rem);
  font-family: var(--font-zen);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.714;
  color: #143376;
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block h3 {
    font-size: 2.4rem;
    line-height: 1.5;
    flex-direction: column;
    align-items: center;
  }
}

.main-wrap .block h3 .num {
  width: 72px;
}

.main-wrap .block h3 .txt {
  flex: 1;
  align-self: center;
}

.main-wrap .block .conts {
  width: 100%;
  margin-top: auto;
}

.main-wrap .block .list {
  display: flex;
  gap: 16px clamp(16px,32/1180*100vw,32px);
}
@media screen and (max-width: 768px) {
  .main-wrap .block .list {
    max-width: 400px;
    flex-direction: column;
    margin: 0 auto;
  }
}

.main-wrap .block .list .item {
  min-height: 188px;
  flex: 1;
  border-radius: 16px;
  background-color: #F1F3F7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 17px 22px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .list .item {
    min-height: 98px;
    flex-direction: row;
    gap: 10px;
    padding: 10px 16px;
  }
}

.main-wrap .block .list .item .list-txt {
  font-size: clamp(1.6rem,18/1180*100vw,1.8rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.333;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .list .item .list-txt {
    text-align: start;
  }
}

.main-wrap .block .list .item .list-txt .s-txt {
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.main-wrap .block .talk-list {
  max-width: 968px;
  display: flex;
  flex-wrap: wrap;
  gap: 34px 32px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .talk-list {
    max-width: 400px;
    gap: 18px;
  }
}

.main-wrap .block .talk-list .talk-item {
  position: relative;
  width: calc((100% - 32px)/2);
  background-color: #F0FBFF;
  border-radius: 16px;
  padding: 27px 30px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .talk-list .talk-item {
    width: 100%;
    padding: 30px 21px;
  }
}

.main-wrap .block .talk-list.col .talk-item {
  width: 100%;
}

.main-wrap .block .talk-list .talk-item .icon {
  position: absolute;
  width: 53px;
  top: -12px;
  left: -16px;
}

.main-wrap .block .talk-list .talk-item .txt {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.778;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .talk-list .talk-item .txt {
    line-height: 1.375;
  }
}

.main-wrap .block .graph-box {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box {
    gap: 20px;
  }
}

.main-wrap .block .graph-box .group {
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box .group {
    max-width: 270px;
    width: 100%;
  }
}

.main-wrap .block .graph-box .group .answer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-left: 44px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box .group .answer {
    padding-left: 36px;
  }
}

.main-wrap .block .graph-box .group .answer+.answer {
  margin-top: 18px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box .group .answer+.answer {
    margin-top: 12px;
  }
}

.main-wrap .block .graph-box .group .answer::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--answer-color);
  border-radius: 50%;
  border: 2px solid #fff;
  translate: 0 -50%;
  top: 50%;
  left: 0;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box .group .answer::before {
    width: 19px;
    height: 19px;
  }
}

.main-wrap .block .graph-box .group .answer:nth-of-type(1):before {
  --answer-color:#00BFFF;
}

.main-wrap .block .graph-box .group .answer:nth-of-type(2):before {
  --answer-color:#78DDFF;
}

.main-wrap .block .graph-box .group .answer:nth-of-type(3):before {
  --answer-color:#C4F0FF;
}

.main-wrap .block .graph-box .group .answer:nth-of-type(4):before {
  --answer-color:#9CB5CD;
}

.main-wrap .block .graph-box .group .answer:nth-of-type(5):before {
  --answer-color:#143376;
}

.main-wrap .block .graph-box .group .answer .txt {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.048em;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box .group .answer .txt {
    font-size: 1.4rem;
  }
}

.main-wrap .block .graph-box .group .answer .percent {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.048em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box .group .answer .percent {
    font-size: 2.2rem;
  }
}

.main-wrap .block .graph-box .group .answer .percent .unit {
  font-size: 2rem;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .graph-box .group .answer .percent .unit {
    font-size: 1.6rem;
  }
}

.main-wrap .block .conts.flex {
  display: flex;
  gap: 42px 20px;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .conts.flex {
    flex-direction: column;
  }
}

.main-wrap .block .conts.flex .graph-box {
  width: 42.636cqw;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .conts.flex .graph-box {
    width: 100%;
  }
}

.main-wrap .block .conts.flex .talk-list {
  width: 45.35cqw;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .main-wrap .block .conts.flex .talk-list {
    width: 100%;
  }
}

.main-wrap .block .conts.flex .talk-list .talk-item {
  width: 100%;
}

.main-wrap .block .deco {
  position: absolute;
  z-index: 1;
}

/* q02 */
.main-wrap .block.q02 {
  margin-top: -64px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block.q02 {
    margin-top: unset;
  }
}

/* q03 */
.main-wrap .block.q03 .deco {
  width: clamp(180px,200/1180*100vw,200px);
  bottom: -121px;
  right: -63px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block.q03 .deco {
    width: 144px;
    bottom: -136px;
    right: -35px;
  }
}

/* q04,q05 */
.main-wrap .block:is(.q04,.q05) {
  z-index: 1;
}

/* q06 */
.main-wrap .block.q06 .conts.flex .talk-list {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block.q06 .conts.flex .talk-list {
    margin-bottom: 78px;
  }
}

.main-wrap .block.q06 .deco {
  width: clamp(430px,500/1180*100vw,500px);
  bottom: 0;
  right: 16px;
}
@media screen and (max-width: 768px) {
  .main-wrap .block.q06 .deco {
    width: 320px;
    translate: 50% 0;
    right: 49%;
  }
}

/* q09 */
.main-wrap .block.q09 .deco {
  width: clamp(300px, 336 / 1180* 100vw, 336px);
  bottom: 0;
  right: 10.447%;
}
@media screen and (max-width: 768px) {
  .main-wrap .block.q09 .conts .talk-list {
    margin-bottom: 102px;
  }
  .main-wrap .block.q09 .deco {
    width: 224px;
    translate: 50% 0;
    right: 49%;
  }
}

/* ↑↑↑ wrap ↑↑↑ */