@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&display=swap");

* {
  font-family: "Noto Sans JP", sans-serif;
}

.fv {
  width: 100%;
  background-image: url(../images/fv_bg_pc.png);
  background-size: cover;
  padding-top: min(52px, calc(52 / 1440 * 100vw));
  padding-bottom: min(75px, calc(75 / 1440 * 100vw));
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

.fv.first {
  clip-path: polygon(50% 100%, calc(50% - min(334px, calc(334 / 1440 * 100vw))) calc(100% - min(134px, calc(134 / 1440 * 100vw))), 0 calc(100% - min(134px, calc(134 / 1440 * 100vw))), 0 0, 100% 0, 100% calc(100% - min(134px, calc(134 / 1440 * 100vw))), calc(50% + min(334px, calc(334 / 1440 * 100vw))) calc(100% - min(134px, calc(134 / 1440 * 100vw))));
  -webkit-clip-path: polygon(50% 100%, calc(50% - min(334px, calc(334 / 1440 * 100vw))) calc(100% - min(134px, calc(134 / 1440 * 100vw))), 0 calc(100% - min(134px, calc(134 / 1440 * 100vw))), 0 0, 100% 0, 100% calc(100% - min(134px, calc(134 / 1440 * 100vw))), calc(50% + min(334px, calc(334 / 1440 * 100vw))) calc(100% - min(134px, calc(134 / 1440 * 100vw))));

}

.fv__inner {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.fv__inner::after {
  content: "";
  display: block;
  width: 100%;
  min-width: 1920px;
  height: min(445px, calc(445 / 1440 * 100vw));
  background-color: rgba(186, 186, 186, 0.25);
  clip-path: polygon(0% 25%, 100% 0%, 100% 75%, 0% 100%);
  position: absolute;
  top: -1%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.fv__title {
  width: min(1000px, calc(1000 / 1440 * 100vw));
  margin: 0 auto;
}
.fv__text {
  color: #fff;
  font-size: min(30px, calc(30 / 1440 * 100vw));
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.06em;
  text-align: center;
  margin-top: max(-10px, calc(-10 / 1440 * 100vw));
}
.fv__start {
  width: min(251px, calc(251 / 1440 * 100vw));
  margin: min(67px, calc(67 / 1440 * 100vw)) auto 0;
}

.question {
  margin-top: max(-90px, calc(-90 / 1440 * 100vw));
  position: relative;
  background-image: url(../images/q_bg_pc.png);
  background-size: cover;
  background-position: top center;
  padding-top: min(54px, calc(54 / 1440 * 100vw));
}
.question.first {
  margin-top: max(-134px, calc(-134 / 1440 * 100vw));
}
.question__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: min(67px, calc(67 / 1440 * 100vw)) min(200px, calc(200 / 1440 * 100vw)) min(98px, calc(98 / 1440 * 100vw));
}
.question__box {
  width: 100%;
  background-color: #fff;
  border: 1px solid #eaeaea;
  margin-top: min(40px, calc(40 / 1440 * 100vw));
  padding: min(100px, calc(100 / 1440 * 100vw)) min(70px, calc(70 / 1440 * 100vw)) min(57px, calc(57 / 1440 * 100vw));
}

.question__box__title {
  display: flex;
  align-items: flex-start;
}
.question__box__icon {
  width: min(72px, calc(72 / 1440 * 100vw));
  margin-left: min(30px, calc(30 / 1440 * 100vw));
  margin-right: min(20px, calc(20 / 1440 * 100vw));
}
.question__box__title__text {
  flex: 1 0 0;
}
.question__box__title__text h2 {
  font-size: min(34px, calc(34 / 1440 * 100vw));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.06em;
  margin-top: max(-10px, calc(-10 / 1440 * 100vw));
}
.question__box__title__text p {
  font-size: min(18px, calc(18 / 1440 * 100vw));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.06em;
  margin-top: min(10px, calc(10 / 1440 * 100vw));
}
.question__box__image {
  width: min(846px, calc(846 / 1440 * 100vw));
  margin: min(38px, calc(38 / 1440 * 100vw)) auto 0 min(24px, calc(24 / 1440 * 100vw));
  aspect-ratio: 2/1.31;
  overflow: hidden;
}
.question__box__image img {
  width: 100%;
  height: 100%;
  transform: scale(1.4) translate(min(9px, calc(9 / 1440 * 100vw)), max(-42px, calc(-42 / 1440 * 100vw)));
}
.question__box__radios {
  margin-top: min(42px, calc(42 / 1440 * 100vw));
  padding: 0 min(30px, calc(30 / 1440 * 100vw));
}
.question__box__radios__item {
  width: 100%;
  background-color: #000;
  position: relative;
  margin-bottom: min(41px, calc(41 / 1440 * 100vw));
  -webkit-clip-path: polygon(min(20px, calc(20 / 1440 * 100vw)) 0%, 100% 0%, calc(100% - min(20px, calc(20 / 1440 * 100vw))) 100%, 0% 100%);
  clip-path: polygon(min(20px, calc(20 / 1440 * 100vw)) 0%, 100% 0%, calc(100% - min(20px, calc(20 / 1440 * 100vw))) 100%, 0% 100%);
}
.question__box__radios__item input {
  display: none;
}
.question__box__radios__item label {
  display: block;
  width: 100%;
  font-size: min(18px, calc(18 / 1440 * 100vw));
  font-weight: 400;
  color: #fff;
  padding: min(12px, calc(12 / 1440 * 100vw)) 0 min(12px, calc(12 / 1440 * 100vw)) min(146px, calc(146 / 1440 * 100vw));
  cursor: pointer;
  position: relative;
}
.question__box__radios__item label::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: min(61px, calc(61 / 1440 * 100vw));
  transform: translateY(-50%);
  width: min(24px, calc(24 / 1440 * 100vw));
  height: min(24px, calc(24 / 1440 * 100vw));
  background-color: #fff;
}
/* チェック時のチェックマークをafterで */
.question__box__radios__item input:checked + label::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: min(1px, calc(1 / 1440 * 100vw));
  left: min(61px, calc(61 / 1440 * 100vw));
  width: min(36px, calc(36 / 1440 * 100vw));
  height: min(36px, calc(36 / 1440 * 100vw));
  background-image: url(../images/check-mark.png);
  background-size: 100% 100%;
}

.question__btn {
  width: min(360px, calc(360 / 1440 * 100vw));
  text-align: center;
  margin-top: min(32px, calc(32 / 1440 * 100vw));
  margin-left: auto;
}
.question__btn a {
  transition-duration: 0.3s;
  cursor: default;
  pointer-events: none;
}
.question__btn a:hover {
  opacity: 0.6;
}
.question__btn a.active {
  cursor: pointer;
  pointer-events: auto;
}

/* 診断結果ページ */
.resultHead {
  background-image: url(../images/result_head_bg_pc.jpg);
  background-size: cover;
}
.resultHead__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: min(120px, calc(120 / 1440 * 100vw)) min(160px, calc(160 / 1440 * 100vw)) min(84px, calc(84 / 1440 * 100vw));
}
.resultHead__title {
  width: min(370px, calc(370 / 1440 * 100vw));
}

.resultContent {
  background:#191919 url(../images/result_content_bg_shaft_pc.png) no-repeat;
  background-size: min(288px, calc(288 / 1440 * 100vw)) auto;
  background-position: bottom max(-26px, calc(-26 / 1440 * 100vw)) left 0;
}
.resultContent__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: min(142px, calc(142 / 1440 * 100vw)) min(160px, calc(160 / 1440 * 100vw)) min(133px, calc(133 / 1440 * 100vw));
}

.recommended__shaftList {
  display: flex;
  flex-direction: column;
  gap: min(114px, calc(114 / 1440 * 100vw));
  list-style: none;
}
.recommended__shaftList__item__description {
  color: #fff;
  font-size: min(16px, calc(16 / 1440 * 100vw));
  line-height: 1.6;
}
.recommended__shaftList__item__title {
  color: #fff;
  font-size: min(30px, calc(30 / 1440 * 100vw));
  font-weight: 500;
  line-height: 1.6;
  margin-top: min(6px, calc(6 / 1440 * 100vw))
}
.recommended__shaftList__item__image {
  margin-top: min(70px, calc(70 / 1440 * 100vw));
}
.recommended__shaftList__item__link {
  display: block;
  text-align: center;
  width: min(280px, calc(280 / 1440 * 100vw));
  background-image: linear-gradient( 1deg, rgb(226,2,21) 0%, rgb(142,7,13) 99%);
  color: #fff;
  font-size: min(16px, calc(16 / 1440 * 100vw));
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: min(18px, calc(18 / 1440 * 100vw)) 0;
  margin-top: min(81px, calc(81 / 1440 * 100vw));
  margin-left: auto;
}
.recommended__shaftList__item__link:hover {
  opacity: 0.6;
}

.resultContent__cta {
  width: min(800px, calc(800 / 1440 * 100vw));
  margin: min(82px, calc(82 / 1440 * 100vw)) auto 0;
  position: relative;
}
.resultContent__cta__link {
  display: block;
  width: 100%;
  max-width: min(400px, calc(400 / 1440 * 100vw));
  background-color: #000;
  color: #fff;
  font-size: min(16px, calc(16 / 1440 * 100vw));
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  padding: min(18px, calc(18 / 1440 * 100vw)) 0;
  text-align: center;
  transition-duration: 0.3s;
  position: absolute;
  bottom: min(27px, calc(27 / 1440 * 100vw));
  left: 50%;
  transform: translateX(-50%);
}
.resultContent__cta__link:hover {
  opacity: 0.6;
}


@media screen and (max-width: 768px) {
  .fv {
    background-image: url(../images/fv_bg_sp.png);
    padding-top: calc(52 / 748 * 100vw);
    padding-bottom: calc(80 / 748 * 100vw);
  }
  .fv.first {
    background-image: url(../images/fv_bg_sp.png);
    padding-top: calc(52 / 748 * 100vw);
    padding-bottom: calc(55 / 748 * 100vw);
    clip-path: polygon(50% 100%, calc(246 / 748 * 100vw) calc(535 / 748 * 100vw), 0 calc(535 / 748 * 100vw), 0 0, 100% 0, 100% calc(535 / 748 * 100vw), calc(502 / 748 * 100vw) calc(535 / 748 * 100vw));
    -webkit-clip-path: polygon(50% 100%, calc(246 / 748 * 100vw) calc(535 / 748 * 100vw), 0 calc(535 / 748 * 100vw), 0 0, 100% 0, 100% calc(535 / 748 * 100vw), calc(502 / 748 * 100vw) calc(535 / 748 * 100vw));
  }
  .fv__inner {
    max-width: none;
  }
  .fv__inner::after {
    min-width: 0;
    height: calc(400 / 750 * 100vw);
    clip-path: polygon(0% 18%, 100% 0%, 100% 82%, 0% 100%);
    background-color: rgba(186, 186, 186, 0.25);
    top: -17%;
  }
  .fv__title {
    width: calc(600 / 748 * 100vw);
    margin-top: calc(-15 / 748 * 100vw);
  }
  .fv__text {
    font-size: calc(23 / 748 * 100vw);
    line-height: 1.75;
    margin-top: calc(45 / 748 * 100vw);
  }
  .fv__start {
    width: calc(204 / 748 * 100vw);
    margin: calc(27 / 748 * 100vw) auto 0;
  }

  .question {
    margin-top: calc(-8 / 748 * 100vw);
    background-image: url(../images/q_bg_sp.jpg);
    background-size: cover;
    background-position: top center;
    padding-top: min(45px, calc(45 / 748 * 100vw));
    padding-bottom: min(53px, calc(53 / 748 * 100vw));
  }
  .question.first {
    margin-top: calc(-70 / 748 * 100vw);
  }
  .question__inner {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }
  .question__flag {
    width: calc(600 / 748 * 100vw);
    margin: calc(40 / 748 * 100vw) auto 0;
  }
  .question__box {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: calc(31 / 748 * 100vw);
    padding: calc(57 / 748 * 100vw) calc(50 / 748 * 100vw) calc(39 / 748 * 100vw) ;
  }

  .question__box__icon {
    width: calc(77 / 748 * 100vw);
    margin-left: calc(23 / 748 * 100vw);
    margin-right: calc(43 / 748 * 100vw);
  }
  .question__box__title__text h2 {
    font-size: calc(31 / 748 * 100vw);
    letter-spacing: -0.09em;
    margin-top: calc(-7 / 748 * 100vw);
    line-height: 1.3;
  }
  .question__box__title__text p {
    font-size: calc(25 / 748 * 100vw);
    margin-top: calc(5 / 748 * 100vw);
    margin-left: calc(-7 / 748 * 100vw);
  }
  .question__box__image {
    width: min(622px, calc(622 / 748 * 100vw));
    margin: min(32px, calc(32 / 748 * 100vw)) auto 0 min(10px, calc(10 / 748 * 100vw));
    aspect-ratio: 2/1.31;
    overflow: hidden;
  }
  .question__box__image img {
    transform: scale(1.4) translate(min(9px, calc(9 / 748 * 100vw)), max(-42px, calc(-42 / 748 * 100vw)));
  }
  .question__box__radios {
    margin-top: min(37px, calc(37 / 748 * 100vw));
    padding: 0 calc(10 / 748 * 100vw);
  }
  .question__box__radios__item {
    width: 100%;
    margin-bottom: calc(29 / 748 * 100vw);
    -webkit-clip-path: polygon(calc(9 / 748 * 100vw) 0%, 100% 0%, calc(100% - calc(9 / 748 * 100vw)) 100%, 0% 100%);
    clip-path: polygon(calc(9 / 748 * 100vw) 0%, 100% 0%, calc(100% - calc(9 / 748 * 100vw)) 100%, 0% 100%);
  }
  .question__box__radios__item label {
    font-size: calc(27 / 748 * 100vw);
    padding: calc(9 / 748 * 100vw) 0 calc(11 / 748 * 100vw) calc(120 / 748 * 100vw);
  }
  .question__box__radios__item label::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: calc(39 / 748 * 100vw);
    transform: translateY(-50%);
    width: calc(23 / 748 * 100vw);
    height: calc(23 / 748 * 100vw);
    background-color: #fff;
  }
  /* チェック時のチェックマークをafterで */
  .question__box__radios__item input:checked + label::after {
    top: calc(10 / 748 * 100vw);
    left: calc(40 / 748 * 100vw);
    width: calc(30 / 748 * 100vw);
    height: calc(30 / 748 * 100vw);
  }

  .question__btn {
    width: calc(295 / 748 * 100vw);
    margin-top: calc(51 / 748 * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  /* 診断結果ページ */
  .resultHead {
    background-image: url(../images/result_head_bg_sp.jpg);
  }
  .resultHead__inner {
    padding: calc(98 / 768 * 100vw) calc(40 / 768 * 100vw) calc(108 / 768 * 100vw);
  }
  .resultHead__title {
    width: calc(435 / 768 * 100vw);
  }

  .resultContent {
    background:#191919 url(../images/result_content_bg_shaft_sp.png) no-repeat;
    background-size: calc(288 / 768 * 100vw) auto;
    background-position: bottom calc(-26 / 768 * 100vw) left 0;
  }
  .resultContent__inner {
    max-width: 768px;
    padding: calc(175 / 768 * 100vw) calc(40 / 768 * 100vw) calc(205 / 768 * 100vw);
  }

  .recommended__shaftList {
    gap: calc(154 / 768 * 100vw);
  }
  .recommended__shaftList__item__description {
    font-size: calc(26 / 768 * 100vw);
  }
  .recommended__shaftList__item__title {
    font-size: calc(48 / 768 * 100vw);
    letter-spacing: 0.025em;
    margin-top: calc(12 / 768 * 100vw)
  }
  .recommended__shaftList__item__image {
    margin-top: calc(87 / 768 * 100vw);
  }
  .recommended__shaftList__item__link {
    width: calc(400 / 748 * 100vw);
    font-size: calc(28 / 768 * 100vw);
    padding: calc(21 / 768 * 100vw) 0;
    margin-top: calc(81 / 768 * 100vw);
    margin-right: auto;
  }

  .resultContent__cta {
    width: calc(600 / 768 * 100vw);
    margin: calc(174 / 768 * 100vw) auto 0;
  }
  .resultContent__cta__link {
    max-width: 100%;
    font-size: calc(22 / 768 * 100vw);
    letter-spacing: 0.07em;
    padding: calc(15 / 768 * 100vw) 0 ;
    bottom: 0;
  }
}