@import "../_layout/siteMain-fv.css";
@import "../_component/problem.css";
@import "../_component/twoChoices.css";
@import "../_component/rule.css";
/* bicycle.css
====================================================*/
.problem-header {
  background: var(--ja-main-color-15-ja-orange-15);
}
.problem-header::before {
  border-top-color: var(--ja-main-color-15-ja-orange-15);
}
.problem-header_subTitleImage {
  width: 50.1rem;
}
.--section01.siteMain-fv_anchor_link img {
  width: 21.5rem;
}
.--section02.siteMain-fv_anchor_link img {
  width: 18.9rem;
}
.--section01 .siteMain-fv_anchor_link_accent::before {
  background: url(../../img/icon-click_yellow.png) no-repeat center / contain;
}
.rule-item_point_text_item span {
  color: var(--ja__main-color-ja__pink);
}
.rule-item_point {
  margin-top: 2.4rem;
  border-radius: 2rem;
}
@media only screen and (max-width: 1179px) {
  .siteMain-fv_title img {
    width: 44rem;
    height: 11rem;
  }
  .--section01.siteMain-fv_anchor_link img {
    width: 24.5rem;
  }
  .--section02.siteMain-fv_anchor_link img {
    width: 21.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .problem-header_subTitleImage {
    width: 28.7rem;
  }
  .siteMain-fv_lead {
    margin-bottom: 3rem;
  }
  .siteMain-fv_title img {
    width: 36.7rem;
    height: 9.2rem;
  }
  .--section01.siteMain-fv_anchor_link img {
    width: 13.4rem;
  }
  .--section02.siteMain-fv_anchor_link img {
    width: 11.8rem;
  }
  .rule-item_point {
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .--rule02 .rule-item_explanation_image {
    aspect-ratio: 180 / 152;
    overflow: hidden;
    position: relative;
  }
  .--rule02 .rule-item_explanation_image img {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
  }
}
.--rule03 .rule-item_explanation {
  flex-direction: column;
}
.--rule03 .rule-item_compensation {
  display: flex;
  padding-top: 2rem;
  align-items: center;
  gap: 1.6rem;
  align-self: stretch;
  border-top: 1px solid var(--design-gray);
  margin-top: 1.6rem;
}
.--rule03 .rule-item_arrow {
  margin: 2.4rem auto 0;
  width: 8rem;
  height: 3.2rem;
}
.--rule03 .rule-item_arrow img {
  width: 100%;
}
.--rule03 .rule-item_point_explanation {
  display: flex;
  width: 59.4rem;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 1.2rem 0;
}
.--rule03 .rule-item_point_explanation_text {
  color: var(--design-txt__black);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}
.--rule03 .rule-item_point_explanation img {
  width: 18rem;
}

.--rule03 .rule-item_point_text_itemSub {
  font-size: 2.4rem;
}
.--rule03 .rule-item_point_advice {
  flex-direction: column;
  gap: 0.8rem;
  padding: 2.2rem 2.4rem 2rem;
  width: 100%;
}
.--rule03 .rule-item_point_advice_titleImage img {
  width: 34.1rem;
}
.--rule03 .rule-item_point_advice_list {
  max-width: 42.6rem;
  width: 100%;
}
.--rule03 .rule-item_point_advice_list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
}
.--rule03 .rule-item_point_advice_list li:last-child {
  margin-bottom: 0;
}
.--rule03 .rule-item_point_advice_list_num {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #b8d7cf;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--design-txt__green);
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.--rule03 .rule-item_point_advice_text {
  color: var(--design-txt__black);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .--rule03 .rule-item_compensation {
    flex-direction: column;
    padding-top: 1.6rem;
    gap: 0.8rem;
    margin-top: 1rem;
  }
  .--rule03 .rule-item_compensation img {
    width: 11.5rem;
  }
  .--rule03 .rule-item_arrow {
    margin: 2rem auto 0;
    width: 6rem;
    height: 2rem;
  }
  .--rule03 .rule-item_point_explanation {
    display: flex;
    width: 100%;
    gap: 1.6rem;
    margin: 1.5rem 0;
  }
  .--rule03 .rule-item_point_explanation_text {
    font-size: 1.6rem;
  }
  .--rule03 .rule-item_point_explanation img {
    width: 10.2rem;
  }
  .--rule03 .rule-item_point_text_itemSub {
    font-size: 1.8rem;
  }
  .--rule03 .rule-item_point_advice {
    padding: 2rem 1.5rem 1.5rem;
  }
  .--rule03 .rule-item_point_advice_titleImage img {
    width: 16.6rem;
  }
  .--rule03 .rule-item_point_advice_list {
    max-width: 100%;
  }
  .--rule03 .rule-item_point_advice_text {
    font-size: 1.8rem;
  }
}
.--rule04 .rule-item_explanation {
  flex-direction: column;
}
.--rule04 .rule-item_explanation img {
  width: 22.8rem;
  margin: 0 auto 2.2rem;
}
.--rule04 .rule-item_explanation_list {
  display: flex;
  gap: 2.2rem;
  width: 100%;
}
.--rule04 .rule-item_explanation_listTop {
  margin-bottom: 2rem;
}
.--rule04 .rule-item_explanation_listTop li {
  width: calc((100% - 4.4rem) / 3);
}
.--rule04 .rule-item_explanation_listBottom li {
  width: calc((100% - 2.2rem) / 2);
}
.--rule04 .rule-item_explanation_list li {
  position: relative;
  padding: 3.2rem 1.2rem 2.6rem;
  border-radius: 1rem;
  background: var(--design-white);
}
.--rule04 .rule-item_explanation_listBottom li:first-child {
  padding-top: 5.4rem;
}
.--rule04 .rule-item_explanation_list_num {
  position: absolute;
  top: -2.2rem;
  left: calc(50% - 2.2rem);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: #b8d7cf;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--design-txt__green);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
}
.--rule04 .rule-item_explanation_list_text {
  color: var(--design-txt__black);
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--MPLUS2);
  font-optical-sizing: auto;
  font-weight: 700;
}
.--rule04 .rule-item_explanation_list_text span {
  color: var(--design-txt__green);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
}
.--rule04 .rule-item_explanation_list_note {
  color: var(--design-txt__black);
  text-align: justify;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.8rem;
}
.--rule04 .rule-item_point_advice {
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  padding: 2rem 2.4rem;
}
.--rule04 .rule-item_point_advice.danger03 {
  flex-direction: row-reverse;
  gap: 2.4rem;
}
.--rule04 .rule-item_point_advice_image_danger01 {
  width: 40rem;
}
.--rule04 .rule-item_point_advice_image_danger02 {
  width: 32rem;
}
.--rule04 .rule-item_point_advice_image_danger03 {
  width: 20rem;
}
.--rule04 .rule-item_point_advice_image_danger01 img,
.--rule04 .rule-item_point_advice_image_danger02 img,
.--rule04 .rule-item_point_advice_image_danger03 img {
  width: 100%;
}
.--rule04 .rule-item_point_advice_text {
  text-align: center;
}
.--rule04 .rule-item_point_advice.danger03 .rule-item_point_advice_text {
  text-align: left;
  width: 32.2rem;
}
@media only screen and (max-width: 767px) {
  .--rule04 .rule-item_explanation img {
    width: 16.4rem;
    margin: 0 auto 1.6em;
  }
  .--rule04 .rule-item_explanation_list {
    flex-direction: column;
    gap: 1rem;
  }
  .--rule04 .rule-item_explanation_listTop {
    margin-bottom: 0;
  }
  .--rule04 .rule-item_explanation_listTop li,
  .--rule04 .rule-item_explanation_listBottom li {
    width: calc(100% - 1.6rem);
    margin-left: 1.6rem;
  }
  .--rule04 .rule-item_explanation_list li {
    padding: 1.34rem 1.8rem 1.76rem 2.8rem;
  }
  .--rule04 .rule-item_explanation_listBottom li:first-child {
    padding-top: 1.34rem;
  }
  .--rule04 .rule-item_explanation_list_num {
    top: calc(50% - 1.6rem);
    left: -1.6rem;
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.8rem;
  }
  .--rule04 .rule-item_explanation_list_text {
    text-align: left;
    font-size: 1.8rem;
  }
  .--rule04 .rule-item_explanation_list_text span {
    font-size: 2.2rem;
  }
  .--rule04 .rule-item_explanation_list_note {
    font-size: 1.4rem;
    margin-top: 1rem;
  }
  .--rule04 .rule-item_point_advice {
    gap: 0.8rem;
    padding: 1.5rem;
  }
  .--rule04 .rule-item_point_advice.danger03 {
    flex-direction: column;
    gap: 0.8rem;
  }
  .--rule04 .rule-item_point_advice_image_danger01,
  .--rule04 .rule-item_point_advice_image_danger02,
  .--rule04 .rule-item_point_advice_image_danger03 {
    width: 100%;
  }
  .--rule04 .rule-item_point_advice_image_danger01 img,
  .--rule04 .rule-item_point_advice_image_danger02 img,
  .--rule04 .rule-item_point_advice_image_danger03 img {
    width: 100%;
  }
  .--rule04 .rule-item_point_advice_text {
    text-align: center;
  }
  .--rule04 .rule-item_point_advice.danger03 .rule-item_point_advice_text {
    text-align: center;
    width: 100%;
  }
}
.--rule05 .rule-item_explanation_image {
  border-radius: 0;
}
.--rule06 .rule-item_explanation_image {
  border-radius: 0;
}
@media only screen and (max-width: 767px) {
  .--rule06 .rule-item_explanation_image {
    width: 100%;
  }
}