@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
.sec-intro {
  margin-bottom: 120px;
}
.sec-intro .intro {
  margin-bottom: 64px;
}
.sec-intro .intro p {
  text-align: center;
}

.sec-questions .q1 {
  position: relative;
}
.sec-questions .q1 img {
  margin: 0 auto;
  max-width: 80%;
}
.sec-questions .q2 {
  position: relative;
}
.sec-questions .q2 .graph {
  display: grid;
  position: relative;
  margin: 0 auto;
  max-width: 80%;
  margin-bottom: 64px;
}
.sec-questions .q2 .graph .comment {
  display: inline-block;
  background-color: #F2F6FB;
  border: 1px solid #1558A0;
  border-radius: 4px;
  padding: 18px 14px;
  position: absolute;
  right: -60px;
  bottom: 0;
  width: auto;
}
@media (max-width: 1200px) {
  .sec-questions .q2 .graph .comment {
    position: static;
    margin: 32px auto 0;
  }
}
.sec-questions .q2 .grid-container {
  max-width: 920px;
  margin: 0 auto;
}
.sec-questions .q2 .grid-container img {
  margin: 0 auto 28px;
  max-width: 80%;
}
.sec-questions .q2 .grid-container .comment-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 0;
}
.sec-questions .q2 .grid-container .comment-item .q2-comment-inner {
  display: grid;
}
.sec-questions .q2 .grid-container .comment-item .q2-comment-inner .q2-comment-inner-info {
  border: 1px solid;
  border-radius: 8px;
  padding: 12px;
  background-color: #fff;
}
.sec-questions .q2 .grid-container .comment-item .q2-comment-inner .q2-comment-inner-info .q2-comment-inner-info-work {
  font-size: 20px;
}
.sec-questions .q2 .grid-container .comment-item .q2-comment-inner .q2-comment-inner-info .q2-comment-inner-info-age {
  font-size: 14px;
  color: #555;
  border-bottom: 1px solid #DDD;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.sec-questions .q2 .grid-container .comment-item:nth-child(1) .q2-comment-inner-info {
  border-color: #C3320A;
}
.sec-questions .q2 .grid-container .comment-item:nth-child(2) .q2-comment-inner-info {
  border-color: #E8730D;
}
.sec-questions .q2 .grid-container .comment-item:nth-child(3) .q2-comment-inner-info {
  border-color: #D5CE00;
}
.sec-questions .q3 {
  position: relative;
}
@media (max-width: 960px) {
  .sec-questions .q3 .grid-container.col3 {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .sec-questions .q3 .grid-container.col3 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.sec-questions .q3 .grid-container.col3 .rank-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap: 0;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-ttl {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.sec-questions .q3 .grid-container.col3 .rank-item img {
  margin: 0 auto 28px;
  max-width: 70%;
}
@media (max-width: 960px) {
  .sec-questions .q3 .grid-container.col3 .rank-item img {
    margin-bottom: 0;
  }
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont {
  display: grid;
  grid-template-columns: 48px auto;
  grid-auto-flow: column;
  border-top: 1px solid #DDD;
  padding: 8px 0;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont:last-child {
  border-bottom: 1px solid #DDD;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont .rank-cont-num {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  color: #fff;
  justify-content: center;
  align-items: center;
  margin: auto 0;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont .top1 {
  background-color: #AC9A7A;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont .top2 {
  background-color: #A5A5A5;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont .top3 {
  background-color: #947466;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont .other {
  font-size: 14px;
  color: #888;
  background-color: #DBDBDB;
}
.sec-questions .q3 .grid-container.col3 .rank-item .rank-cont .rank-cont-txt {
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.sec-questions .q4 {
  position: relative;
}
@media (max-width: 640px) {
  .sec-questions .q4 .grid-container.col2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .sec-questions .q4 .grid-container.col2 {
    grid-template-columns: 1fr;
  }
}
.sec-questions .q4 .card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #DDD;
  border-radius: 8px;
  background-color: #fff;
}
@media (max-width: 1040px) {
  .sec-questions .q4 .card {
    display: block;
    text-align: center;
  }
}
.sec-questions .q4 .card img {
  max-width: 200px;
  margin: 0 auto;
}
.sec-questions .q4 .card div {
  padding: 12px;
}
.sec-questions .q4 .card div .card-info-work {
  font-size: 20px;
  border-bottom: 1px solid #DDD;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.sec-questions .q4 .card div .card-info-comment {
  text-align: left;
}
.sec-questions .q5 {
  position: relative;
}
.sec-questions .q5 .lead {
  font-size: 18px;
  color: #E8730D;
  margin-bottom: 24px;
}
.sec-questions .q5 .grid-container {
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  row-gap: 0;
  counter-reset: q;
}
@media (max-width: 800px) {
  .sec-questions .q5 .grid-container {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
}
.sec-questions .q5 .grid-container .rank-cont {
  display: flex;
  align-items: center;
  border-top: 1px solid #DDD;
  padding: 16px 0;
}
.sec-questions .q5 .grid-container .rank-cont::before {
  counter-increment: q;
  content: counter(q);
  display: inline-block;
  margin-right: 16px;
  min-width: 40px;
  height: 40px;
  text-align: center;
  line-height: 36px;
  border-radius: 100px;
  font-size: 16px;
  background-color: #1558A0;
  color: #fff;
  flex-shrink: 0;
}
.sec-questions .q5 .grid-container .rank-cont .award::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 19px;
  background-image: url("/asset/environment/enquete/img/hukidashi.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
}
.sec-questions .q5 .grid-container .rank-cont .award::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 19px;
  background-image: url("/asset/environment/enquete/img/hukidashi.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
  transform: scaleX(-1);
}
.sec-questions .q5 .grid-container .rank-cont .copy {
  font-size: 20px;
}
.sec-questions .q5 .grid-container .rank-cont .work {
  color: #888;
}
.sec-questions .q5 .grid-container .rank-cont:nth-child(1)::before {
  background-color: #E8730D;
}
.sec-questions .q5 .grid-container .rank-cont:nth-child(3),
.sec-questions .q5 .grid-container .rank-cont:nth-child(6) {
  border-bottom: 1px solid #DDD;
}
@media (max-width: 800px) {
  .sec-questions .q5 .grid-container .rank-cont:nth-child(3) {
    border-bottom: none;
  }
}

h2 {
  justify-content: center;
  scroll-margin-top: 240px;
}

/* 初期状態（PC想定） */
.for-sp {
  display: none;
}

.for-pc {
  display: block;
}

/* 660px以下 = SP */
@media (max-width: 660px) {
  .for-sp {
    display: block;
  }
  .for-pc {
    display: none;
  }
}
.anchor, .q1, .q2, .q3, .q4 {
  margin-bottom: 200px;
}
@media (max-width: 960px) {
  .anchor, .q1, .q2, .q3, .q4 {
    margin-bottom: 160px;
  }
}
@media (max-width: 640px) {
  .anchor, .q1, .q2, .q3, .q4 {
    margin-bottom: 120px;
  }
}

.q1 .decoration, .q3 .decoration, .q5 .decoration {
  position: absolute;
  color: #88BAE2;
  left: 0;
  top: -180px;
  font-size: 124px;
  transform: rotate(-8deg);
}
@media (max-width: 960px) {
  .q1 .decoration, .q3 .decoration, .q5 .decoration {
    top: -140px;
    font-size: 90px;
  }
}
@media (max-width: 640px) {
  .q1 .decoration, .q3 .decoration, .q5 .decoration {
    top: -100px;
    font-size: 70px;
  }
}

.q2 .decoration, .q4 .decoration {
  position: absolute;
  color: #88BAE2;
  right: 0;
  top: -180px;
  font-size: 124px;
  transform: rotate(8deg);
}
@media (max-width: 960px) {
  .q2 .decoration, .q4 .decoration {
    top: -140px;
    font-size: 90px;
  }
}
@media (max-width: 640px) {
  .q2 .decoration, .q4 .decoration {
    top: -100px;
    font-size: 70px;
  }
}/*# sourceMappingURL=enquete.css.map */