.small {
  font-size: 1rem; }

.title-h3 {
  text-align: center;
  margin: 0 0 40px 0;
  padding-top: 50px;
  font-size: 1.8rem;
  font-weight: bold; }

.text-body {
  text-align: center; }
  .text-body p.text {
    margin-bottom: 0;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 50px; }

.performance {
  margin-top: 155px; }
  .performance .yellow-line {
    max-width: 758px; }
  .performance .text-body {
    margin-top: 25px; }

.performance-content {
  background-color: white;
  border: 1px solid #D3D3D3;
  padding-bottom: 68px; }
  .performance-content .content .text {
    max-width: 230px;
    margin: auto; }

.recommended {
  margin-top: 155px; }

.recommended h2.title,
.performance h2.title {
  margin-bottom: 28px; }

.recommended p.text-top,
.performance p.text-top {
  font-size: 1.5rem;
  text-align: center;
  line-height: 35px;
  margin-bottom: 15px; }

.recommended .recommended-content,
.performance .recommended-content {
  margin-bottom: 45px; }
  .recommended .recommended-content .block .img,
  .performance .recommended-content .block .img {
    margin-bottom: 13px; }

.recommended .recommended-content,
.recommended .content,
.performance .recommended-content,
.performance .content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.recommended .content .block,
.performance .content .block {
  width: 100%;
  max-width: 250px; }
  .recommended .content .block .img img,
  .performance .content .block .img img {
    display: block;
    margin: auto; }
  .recommended .content .block p.text,
  .performance .content .block p.text {
    margin-top: 34px;
    display: flex;
    justify-content: center; }
    .recommended .content .block p.text span,
    .performance .content .block p.text span {
      padding-left: 20px;
      font-family: "Noto Sans JP", sans-serif; }

.recommended .list,
.performance .list {
  list-style: none;
  padding-left: 0; }
  .recommended .list li,
  .performance .list li {
    position: relative;
    padding-left: 10px;
    line-height: 20px; }
    .recommended .list li:before,
    .performance .list li:before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 3px;
      height: 3px;
      content: "";
      border-radius: 50%;
      display: block;
      background-color: #B8012E; }
    .recommended .list li span,
    .performance .list li span {
      font-size: 1.5rem;
      font-weight: bold;
      font-family: "Noto Sans JP", sans-serif; }

.recommended .content-low,
.performance .content-low {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 25px; }
  .recommended .content-low .block,
  .performance .content-low .block {
    max-width: 320px;
    width: 100%;
    background-color: #B8012E;
    text-align: center;
    border-radius: 10px;
    padding-top: 26px; }
    .recommended .content-low .block span,
    .performance .content-low .block span {
      font-size: 1.4rem;
      color: white;
      font-family: "Noto Sans JP", sans-serif; }
    .recommended .content-low .block p,
    .performance .content-low .block p {
      height: 101px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      color: white;
      margin-bottom: 0;
      line-height: 27px;
      font-weight: bold;
      font-family: "Noto Sans JP", sans-serif; }

.effect {
  margin-top: 164px; }
  .effect h2.title {
    margin-bottom: 25px; }
  .effect .text-body {
    max-width: 720px;
    width: 100%;
    margin: auto; }
    .effect .text-body .below-underline {
      text-align: right;
      display: block;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1rem; }

.effect-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px; }
  .effect-content .block {
    padding: 10px;
    margin-top: 40px;
    height: 306px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 306px;
    border: 1px solid #D3D3D3;
    text-align: center; }
    .effect-content .block .title-effect {
      font-size: 2rem;
      color: #B8012E;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: bold; }
  .effect-content p.effect-text {
    margin-bottom: 0;
    line-height: 21px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem; }
  .effect-content .effect-img {
    margin: 25px 0 34px 0; }

.title-small {
  margin-top: 10px;
  text-align: right;
  font-family: "Noto Sans JP", sans-serif; }

.use {
  margin-top: 120px; }
  .use .use-content {
    display: flex;
    justify-content: space-between;
    text-align: left; }
    .use .use-content .block:first-of-type {
      width: calc(50% + 70px); }
    .use .use-content .block:last-of-type {
      width: calc(50% - 70px);
      padding-left: 20px; }
    .use .use-content h2.title {
      margin-bottom: 32px; }
    .use .use-content h2.title {
      font-family: "Noto Serif JP", sans-serif;
      text-align: left; }
    .use .use-content span.num,
    .use .use-content .text-small {
      text-align: left;
      font-family: "Noto Sans JP", sans-serif; }
    .use .use-content span.num {
      font-family: "Noto Serif JP", sans-serif; }
    .use .use-content .text-body {
      text-align: left; }
      .use .use-content .text-body .small {
        font-size: 1rem;
        margin: 15px 0 0 0;
        display: block;
        line-height: 14px;
        font-family: "Noto Sans JP", sans-serif; }
      .use .use-content .text-body ul {
        padding-left: 0;
        list-style: none; }
        .use .use-content .text-body ul .text-num {
          text-align: left;
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          margin-bottom: 15px; }
        .use .use-content .text-body ul li {
          padding: 32px 0; }
        .use .use-content .text-body ul span.num {
          font-size: 2.2rem;
          padding-left: 10px; }
        .use .use-content .text-body ul .text-small {
          margin-bottom: 6px;
          font-size: 1.3rem;
          padding-left: 8px;
          position: relative; }
          .use .use-content .text-body ul .text-small:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 2px;
            width: 3px;
            height: 3px;
            background-color: #B8012E;
            border-radius: 50%;
            transform: translateY(-50%); }
      .use .use-content .text-body .text {
        display: block;
        font-size: 2.2rem;
        text-align: left;
        margin-bottom: 13px; }

.specifications {
  margin-top: 125px; }
  .specifications h2.title {
    margin-bottom: 20px; }
  .specifications .specifications-content .container dl:last-of-type {
    border: none; }
  .specifications .specifications-content dl {
    max-width: 747px;
    margin: auto;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #D3D3D3; }
    .specifications .specifications-content dl dt,
    .specifications .specifications-content dl dd {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 0; }
      .specifications .specifications-content dl dt .img img,
      .specifications .specifications-content dl dd .img img {
        max-width: 100%; }
    .specifications .specifications-content dl dt {
      align-items: flex-start;
      padding: 18px 0 18px 20px;
      width: 20%; }
      .specifications .specifications-content dl dt span {
        font-size: 1.6rem;
        color: #B8012E;
        font-weight: 500; }
    .specifications .specifications-content dl dd {
      padding: 10px 0 10px 20px;
      width: 80%;
      font-size: 1.6rem; }
      .specifications .specifications-content dl dd .text-spec {
        padding: 6px 0;
        margin-bottom: 0; }
      .specifications .specifications-content dl dd .blue a {
        color: #0089FF;
        text-decoration: none; }
        .specifications .specifications-content dl dd .blue a:hover {
          opacity: 0.8; }
      .specifications .specifications-content dl dd .small {
        font-family: "Noto Sans JP", sans-serif; }

.button-low {
  margin: 170px 10px 0 10px; }

.underline {
  padding: 0 0.5rem;
  display: inline;
  background-image: linear-gradient(90deg, #fff25d, #fff25d);
  background-size: 100% 70%;
  background-repeat: no-repeat;
  background-position: 0% 87%; }

@media screen and (max-width: 1120px) {
  .recommended .recommended-content,
  .recommended .content,
  .performance .recommended-content,
  .performance .content,
  .recommended .content-low,
  .performance .content-low,
  .effect-content {
    justify-content: space-around; }
  .recommended .content-low .block,
  .performance .content-low .block {
    margin: 20px 0; }
    .recommended .content-low .block p br,
    .performance .content-low .block p br {
      display: block; } }

@media screen and (max-width: 768px) {
  .use .use-content {
    flex-wrap: wrap; }
    .use .use-content .block {
      padding-left: 0 !important;
      max-width: 620px;
      margin: auto;
      width: 100% !important; }
  p.text {
    font-size: 1.6rem !important;
    line-height: 30px !important; }
  .recommended,
  .performance,
  .effect,
  .use,
  .specifications {
    margin-top: 50px; }
  .button-low {
    margin: 50px 10px 0 10px; } }

@media screen and (max-width: 576px) {
  .specifications .specifications-content dl dt,
  .specifications .specifications-content dl dd {
    width: 100%;
    padding-left: 0; }
  .specifications .specifications-content dl dd {
    padding-top: 0; } }