@charset "utf-8";

:root {
  --font-color-white: #ffffff;
  --font-color-black: #333333;
  --font-color-blue: #1c82e0;
  --font-color-blueA: rgba(29, 129, 223, 0.55);

  --background-color-white: #ffffff;
  --background-color-lightBlue: #d8eff5;
  --background-color-blue: rgba(28, 130, 224, 0.08);
  --background-color-sky: #1c82e0;
}

/* -----------------------------------------------------------
font
----------------------------------------------------------- */

/* noto-sans-jp-regular - latin_japanese */
@font-face {
  font-family: "Noto Sans JP";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local("NotoSansJP-Regular.otf"), /* Android 6.0 Marshmallow* */ url("/common/fonts/NotoSansJP/NotoSansJP-Regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("/common/fonts/NotoSansJP/NotoSansJP-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* noto-sans-jp-700 - latin_japanese */
@font-face {
  font-family: "Noto Sans JP";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/common/fonts/NotoSansJP/NotoSansJP-Bold.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("/common/fonts/NotoSansJP/NotoSansJP-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
  font-size: 62.5%;
}

@media screen and (max-width: 1583px) {
  html {
    font-size: 0.6318vw;
  }
}
@media screen and (max-width: 1306px) {
  html {
    font-size: 0.7659vw;
  }
}
@media screen and (max-width: 640px) {
  html {
    font-size: 62.5%;
  }
}

body {
  overflow-wrap: break-word;
  font-family: "Noto Sans JP", "メイリオ", "Droid Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

main {
  @media screen and (max-width: 1306px) {
  }
}

.inner {
  max-width: 120rem;
  width: 100%;
  margin: 0 auto;
}

.br {
  display: inline-block;
}

.fontSize_normal {
  font-size: 2rem;
}

.fontSize_small {
  font-size: 1.6rem;
}

.-textAlignCenter {
  text-align: center;
}

.productLink_main {
  display: flex;
  position: relative;
  width: 64rem;
  padding: 2rem 0;
  justify-content: center;
  align-items: center;
  gap: 3.2rem;
  margin: 2.4rem auto 0;

  border-radius: 6.4rem;
  border: 0.4rem solid #fff;
  background: linear-gradient(91deg, #ffd341 8.65%, #ffa427 82.76%);
  box-shadow: 0px 0.4rem 1.6rem 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-decoration: none;
  z-index: 2;

  @media screen and (max-width: 1306px) {
    width: 59.6rem;
  }

  @media screen and (max-width: 640px) {
    max-width: 48rem;
    width: 100%;
    gap: 1.6rem;
  }
}

.productLink_main img {
  position: relative;
  width: 11.571rem;
  height: auto;
  z-index: 2;

  @media screen and (max-width: 640px) {
    font-size: 2.4rem;
    width: 16%;
  }
}

.productLink_main .text {
  position: relative; /* 背景の下にならないようにする */
  color: #000;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.128rem;
  z-index: 2;

  @media screen and (max-width: 640px) {
    /* font-size: 2.4rem; */
    font-size: clamp(1.6rem, calc(0.32rem + 3.9999999999999996vw), 2.4rem);
    letter-spacing: 0.096rem;
  }
}

.productLink_main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(91deg, #ffd341 8.65%, #ffd341 82.76%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.productLink_main:hover::before {
  opacity: 1;
}

.productLink_main::after {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 30' fill='none'%3E%3Cpath d='M1.50391 1.41504L15.5039 14.915L1.50391 28.415' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 1.8rem;
  height: 3rem;
  right: 7.5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  @media screen and (max-width: 640px) {
    right: 3%;
    width: 4.8%;
    height: 22%;
  }
}

.productLink_sub {
  display: inline-block;
  padding: 2.8rem 6.4rem;
  font-size: 2.4rem;
  font-weight: 700;
  text-decoration: none;
  line-height: normal;
  letter-spacing: 0.096rem;
  color: #ffffff;
  border-radius: 5rem;
  background: linear-gradient(91deg, #00c3c9 8.65%, #1c82e0 82.76%);
  transition: background 0.3s ease, color 0.3s ease;
  position: relative;
  box-shadow: 0 0.4rem 1.6rem 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  @media screen and (max-width: 640px) {
    padding: 1.6rem 2.4rem;
    font-size: 1.6rem;
  }
}

/* 疑似要素を使ってテキストの背景にグラデーションを適用 */
.productLink_sub::after {
  content: "ScanSnapを詳しく見る"; /* 同じテキストを表示 */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background: linear-gradient(91deg, #00c3c9 8.65%, #1c82e0 82.76%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ホバー時の変更 */
.productLink_sub:hover {
  background: #ffffff;
  color: transparent; /* テキストを透明にする */
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}

.productLink_sub:hover::after {
  opacity: 1; /* グラデーションテキストを表示 */
}

.simpleLink {
  display: inline-flex;
  padding: 2rem 4rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 3.2rem;
  border: 0.2rem solid #1c82e0;
  background: #1c82e0;
  transition-duration: 0.3s;
  color: #fff;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%; /* 16px */
  text-decoration: none;
}

.simpleLink:hover {
  color: #1c82e0;
  background: #fff;
}

header {
  position: absolute;
  width: 100%;
  padding: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media screen and (max-width: 640px) {
    padding: 1.6rem 6.25%;
  }
}

header .logo_scansnap {
  width: 17.8rem;
}

header .logo_ricoh {
  width: 7rem;
}

.mainVisual {
  padding-top: 5.6rem;
  padding-left: 4rem;
  padding-right: 4rem;
  background-image: url("../images/bg_mainvisual.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-lightBlue);
  @media screen and (max-width: 640px) {
    padding-top: 12.6rem;
    padding-left: 6.25%;
    padding-right: 6.25%;
    background-image: url("../images/bg_mainvisual_sp.webp");
  }
}

.mainVisualArea {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 auto;

  max-width: 158.3rem;
  width: 100%;
  gap: 7.2rem;

  @media screen and (max-width: 1920px) {
    margin: 0 0 0 auto;
    gap: 6rem;
  }

  @media screen and (max-width: 1306px) {
    gap: 6rem;
  }

  @media screen and (max-width: 640px) {
    justify-content: center;
  }
}

.mainVisualArea img {
  height: auto;
}
.mainVisualArea_pc {
  max-width: 85.8rem;
  @media screen and (max-width: 1306px) {
    max-width: 71.1rem;
  }
  @media screen and (max-width: 640px) {
    display: none;
  }
}

.mainVisualArea_common {
  /* max-width: 65.3rem; */
  width: 65.3rem;
  @media screen and (max-width: 1306px) {
    max-width: 54.1rem;
  }
  @media screen and (max-width: 640px) {
    width: 100%;
    max-width: 52.6rem;
  }
  text-align: center;
}

.mainVisualImg_01 {
  /* max-width: 46rem; */
  width: 46rem;
  @media screen and (max-width: 1306px) {
    max-width: 38.1rem;
  }
  @media screen and (max-width: 640px) {
    max-width: 76%;
  }
}

.mainVisualImg_02 {
  margin-top: 3.2rem;
  width: 65.3rem;
  @media screen and (max-width: 1306px) {
    margin-top: 2.6rem;
    max-width: 54.1rem;
  }
  @media screen and (max-width: 640px) {
    margin-top: 2rem;
    max-width: 100%;
  }
}

.mainVisualImg_03,
.mainVisualImg_03_sp {
  width: 100%;
}

.mainVisualImg_03_sp {
  margin-top: 2rem;
}

.mainVisualImg_04 {
  /* max-width: 46.6rem; */
  width: 46.6rem;
  margin-top: 4.8rem;
  @media screen and (max-width: 1306px) {
    margin-top: 4rem;
    max-width: 38.6rem;
  }
  @media screen and (max-width: 640px) {
    margin-top: 0.6rem;
    max-width: 65.7%;
  }
}

.mainVisualArea_common .pc_off {
  display: inline;
  @media screen and (min-width: 641px) {
    display: none;
  }
}

.mainVisualArea_common p {
  margin-top: 1rem;
  font-size: min(10px);
}

.mainVisualArea_common a {
  text-decoration: underline;
}

.mainVisual_btnArea {
  text-align: center;
  margin-top: -7.9rem;
  margin-left: -8rem;
  @media screen and (max-width: 1306px) {
    margin-top: -5.4rem;
    margin-left: -7rem;
  }

  @media screen and (max-width: 640px) {
    margin-top: 2.2rem;
    margin-left: 0;
  }
}

.mainVisual_btnArea > img {
  width: 70rem;
  height: auto;
  @media screen and (max-width: 1306px) {
    width: 62.9rem;
  }
  @media screen and (max-width: 640px) {
    width: 100%;
  }
}

.sectionProblems {
  position: relative;
  padding: 9.6rem 4rem 8rem;
  @media screen and (max-width: 640px) {
    padding: 9.6rem 6.25% 8rem;
  }
}

.sectionProblems .inner {
  margin: 0 auto;
}

.sectionProblems h3 {
  color: var(--font-color-black);
  text-align: center;
  font-size: 4em;
  font-weight: 700;
  line-height: 140%; /* 56px */
  letter-spacing: -0.32rem;
  @media screen and (max-width: 640px) {
    font-size: 1.6rem;
    letter-spacing: -0.128rem;
  }
}

.problemsCard {
  display: flex;
  gap: 3.2rem;
  margin-top: 6.4rem;

  @media screen and (max-width: 640px) {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
  }
  @media screen and (max-width: 560px) {
    gap: 0.8rem;
  }
}

.problemsCardItem {
  border-radius: 1rem;
  max-width: 27.6rem;
  overflow: hidden;
  background: var(--background-color-white);
  box-shadow: 0 0.4rem 1.6rem 0 rgba(0, 0, 0, 0.1);

  @media screen and (max-width: 640px) {
    width: calc((100% - 1.6rem) / 2);
    align-self: stretch;
  }
}

.problemsCardItem_imageArea {
  width: 100%;
  height: 13.6rem;
  object-fit: cover;

  img {
    height: auto;
    width: 100%;
  }

  @media screen and (max-width: 560px) {
    display: none;
  }
}

.problemsCardItem_textArea {
  padding: 0 1.6rem 1.6rem;
  text-align: center;

  @media screen and (max-width: 560px) {
    padding: 0.8rem 0.8rem;
  }
}

.problemsCardItem_textArea h4 {
  color: var(--font-color-blue);
  font-weight: 600;
  font-size: 2rem;
  line-height: 140%;
  margin-top: 1.6rem;
  @media screen and (max-width: 560px) {
    font-size: 1.4rem;
  }
}

.problemsCardItem_icon {
  /* max-width: 13rem; */
  width: 13rem;
  height: auto;
  margin-top: -6.4rem;
  @media screen and (max-width: 560px) {
    margin-top: 0;
    max-width: 9.6rem;
    width: 100%;
  }
}

.problemsCardItem_textArea p {
  font-size: 1.6rem;
  color: var(--font-color-black);
  margin-top: 1rem;
  line-height: 140%;
  font-weight: 600;
  @media screen and (max-width: 560px) {
    font-size: 1.2rem;
  }
}

.sectionSolutions {
  background-image: url("../images/bg_solution.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 12rem 4rem;
  @media screen and (max-width: 640px) {
    padding: 12rem 6.25%;
    background-image: url("../images/bg_solution_sp.webp");
  }
}

.solutionsTitle {
  display: flex;
  align-items: center;
  gap: 4rem;

  @media screen and (max-width: 640px) {
    justify-content: center;
    flex-direction: column;
  }
}

.sectionSolutions h2 img {
  /* max-width: 62.8rem; */
  width: 62.8rem;
  width: 100%;
  height: auto;
}

.sectionSolutions .overview {
  color: var(--font-color-white);
  margin-top: 3.2rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -0.06rem;
  @media screen and (max-width: 640px) {
    font-size: 1.4rem;
    letter-spacing: -0.042rem;
  }
}

.solutionsTitle_text {
  flex: 1 1 auto;
}

.solutionsTitle_image {
  flex: 0 0 45.5rem;

  img {
    width: 100%;
    height: auto;
  }

  @media screen and (max-width: 640px) {
    max-width: 35rem;
    flex: auto;
  }
}

.threeStepTitle {
  color: var(--font-color-white);
  margin-top: 6.4rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 160%; /* 38.4px */
  letter-spacing: -0.072rem;
}

.threeStepTitle span {
  font-weight: 700;
}

.threeStep {
  margin-top: 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media screen and (max-width: 640px) {
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
  }
}

.threeStep img {
  max-height: 30rem;
  height: 100%;
  width: auto;

  @media screen and (max-width: 640px) {
    max-height: 28rem;
  }
}

.threeStep .arrow {
  width: 3.6rem;
  height: auto;
  @media screen and (max-width: 640px) {
    transform: rotate(90deg);
  }
}

.useCase {
  border-radius: 1rem;
  border: 2px solid #1c82e0;
  background: #fff;
  overflow: hidden;
  margin-top: 6.4rem;
}

.useCaseTitleArea {
  background: var(--background-color-sky);
  padding: 2rem;
}

.useCase h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  img {
    height: 3.2rem;
    width: auto;
  }
}

.useCase h3 span {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 130%;
  color: var(--font-color-white);
}

.point {
  display: flex;
  gap: 3.2rem;
  padding: 2.4rem 3.2rem 3.2rem;

  @media screen and (max-width: 640px) {
    padding: 2.4rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}

.pointItem {
  @media screen and (max-width: 640px) {
    flex: 1 1 23.9rem; /* 最小幅 239px を確保しつつ、余白を均等に分配 */
    min-width: 23.9rem; /* 幅が 239px 未満にならないようにする */
  }
}

.pointItem_title {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.pointItem_title img {
  width: 4.6rem;
  height: auto;
}

.pointItem_title p {
  color: var(--font-color-black);
  font-size: 2rem;
  font-weight: 600;
  line-height: 140%; /* 28px */
}

.pointItem_content {
  margin-top: 1.6rem;
}

.pointItem_content p {
  height: 4.4rem;
  color: var(--font-color-black);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 140%; /* 22.4px */
}

.pointItem_contentImg {
  margin-top: 1.6rem;
  text-align: center;
}

.pointItem_content img {
  width: 100%;
  height: auto;
  @media screen and (max-width: 640px) {
    max-width: 79%;
  }
}

.solutions_btnArea {
  margin-top: 6.4rem;
  text-align: center;
}

.solutions_btnArea img {
  width: 51rem;
  height: auto;
  @media screen and (max-width: 640px) {
    max-width: 51rem;
    width: 100%;
  }
}

.solutions_btnArea .productLink_sub {
  margin-top: 4rem;
}

.sectionFeatures h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--font-color-black);
  gap: 0.8rem;
  font-size: 6.4rem;
  font-weight: 700;
  line-height: 160%; /* 102.4px */
  @media screen and (max-width: 640px) {
    font-size: 2.4rem;
  }
}

.sectionFeatures h2 img {
  width: 35.2rem;
  height: auto;
  @media screen and (max-width: 640px) {
    max-width: 17.6rem;
  }
}

.featuresList_wrap {
  display: flex;
  gap: 1.6rem;
  /* max-width: 127.8rem; */
  max-width: 130.6rem;
  margin-left: auto;
  margin-right: auto;
  @media screen and (max-width: 640px) {
    flex-direction: column;
    align-items: center;
    padding-left: 6.25%;
    padding-right: 6.25%;
  }
}

.featuresList_textArea {
  /* max-width: 63.8rem; */
  width: 63.8rem;
  @media screen and (max-width: 640px) {
    width: 100%;
  }
}

.featuresList_title {
  display: flex;
  align-items: end;
  gap: 1.6rem;
}

.featuresList_title_text .subTitle {
  color: var(--font-color-blueA);
  font-size: 2rem;
  font-family: "Hiragino Kaku Gothic ProN";
  font-weight: 600;
  line-height: 160%;
  @media screen and (max-width: 640px) {
    font-size: 1.6rem;
  }
}

.featuresList_title_text h3 {
  color: var(--font-color-black);
  font-size: 4rem;
  font-weight: 700;
  line-height: 160%;
  @media screen and (max-width: 640px) {
    font-size: 3.2rem;
  }
}

.featuresList_text {
  margin-top: 4rem;
  @media screen and (max-width: 640px) {
    margin-top: 0.8rem;
  }
}

.featuresList_text p {
  color: var(--font-color-black);
  font-size: 2rem;
  line-height: 160%;
  letter-spacing: -0.06rem;
}

.featuresList_imageArea {
  /* max-width: 61.6rem; */
  width: 61.6rem;
  @media screen and (max-width: 640px) {
    width: 100%;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.featuresList.-feature01 .featuresList_title_image img {
  /* max-width: 15.9rem; */
  width: 15.9rem;
  /* width: 100%; */
  height: auto;
  @media screen and (max-width: 640px) {
    width: 10rem;
  }
}

.featuresList.-feature01 .featuresList_textArea {
  padding-top: 2rem;
  padding-left: 4rem;
  @media screen and (max-width: 640px) {
    padding-left: 0;
  }
}

.featuresList.-feature02 {
  padding-top: 12rem;
  padding-bottom: 12rem;
  background-image: url("../images/bg_feature_02.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  @media screen and (max-width: 640px) {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-image: url("../images/bg_feature_02_sp.webp");
  }
}

.featuresList.-feature02 .featuresList_wrap {
  flex-direction: row-reverse;
  @media screen and (max-width: 640px) {
    flex-direction: column;
  }
}

.featuresList.-feature02 .featuresList_title_image img {
  /* max-width: 13.9rem; */
  width: 13.9rem;
  /* width: 100%; */
  height: auto;
  @media screen and (max-width: 640px) {
    width: 9.5rem;
  }
}

.featuresList.-feature02 .featuresList_textArea {
  padding-top: 2rem;
  padding-right: 4rem;
  @media screen and (max-width: 640px) {
    padding-right: 0rem;
  }
}

.featuresList.-feature03 .featuresList_title_image img {
  /* max-width: 14.6rem; */
  width: 14.6rem;
  /* width: 100%; */
  height: auto;
  @media screen and (max-width: 640px) {
    width: 9.4rem;
  }
}

.featuresList.-feature03 .featuresList_textArea {
  padding-top: 2.5rem;
  padding-left: 4rem;
  @media screen and (max-width: 640px) {
    padding-left: 0;
  }
}

.features_btnArea {
  margin-top: 9.6rem;
  text-align: center;
  @media screen and (max-width: 640px) {
    padding: 0 6.25%;
  }
}

.recommend_wrap {
  padding-left: 4rem;
  padding-right: 4rem;
  @media screen and (max-width: 640px) {
    padding: 0 6.25%;
  }
}

.recommend {
  /* max-width: 1200px; */
  max-width: 120rem;
  /* width: 100%; */
  margin: 9.6rem auto 0;
  border-radius: 1.6rem;
  background: rgba(28, 130, 224, 0.08);
  padding: 4.8rem;
  display: flex;
  gap: 3.2rem;
  justify-content: center;
  align-items: center;
  @media screen and (max-width: 640px) {
    flex-direction: column;
    padding: 2.4rem;
  }
}

.recommend_textArea h3 {
  color: var(--font-color-blue);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 140%; /* 44.8px */
  @media screen and (max-width: 640px) {
    font-size: 2.4rem;
  }
}

.recommend_textArea ul {
  margin-top: 2.4rem;
}

.recommend_textArea li {
  color: var(--font-color-black);
  font-size: 2rem;
  line-height: 160%; /* 32px */
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  margin-top: 0.8rem;
  @media screen and (max-width: 640px) {
    font-size: clamp(1.4rem, calc(0.12rem + 3.9999999999999996vw), 2rem);
  }
}

.recommend_textArea li::before {
  content: "";
  width: 2.7rem;
  height: 2.2rem;
  margin-top: 0.4rem;
  display: inline-block;
  vertical-align: baseline;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 22' fill='none'%3E%3Crect x='1' y='2.28589' width='18' height='18' fill='white' stroke='%23333333' stroke-width='2'/%3E%3Cpath d='M5 7.03567L12.1831 14.0812L25 1.50977' stroke='%231C82E0' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  flex: 0 0 2.7rem;
  min-width: 2.7rem;
}

.recommend_textArea p {
  color: var(--font-color-black);
  margin-top: 2.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 160%; /* 19.2px */
}

.recommend_imgArea img {
  max-width: 37.1rem;
  width: 100%;
  height: auto;
}

.imgAndTextHeading {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  color: var(--font-color-black);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 160%; /* 38.4px */
}

.imgAndTextHeading img {
  width: 100%;
  height: auto;
}

.sectionUsersVoice {
  margin-top: 8rem;
  padding: 5.6rem 4rem 28rem;
  background-image: url("../images/bg_usersvoice.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  @media screen and (max-width: 640px) {
    padding: 5.6rem 6.25% 28rem;
    background-image: url("../images/bg_usersvoice_sp.webp");
  }
}

.sectionUsersVoice .imgAndTextHeading {
  gap: 2.4rem;
  /* max-width: 78rem; */
  width: 78rem;

  @media screen and (max-width: 640px) {
    max-width: 50.6rem;
    width: 100%;
  }
}

.usersVoiceList {
  margin-top: 6.4rem;
  @media screen and (max-width: 640px) {
    margin-top: 3.2rem;
  }
}

.usersVoiceListItem {
  display: flex;
  gap: 12rem;
  justify-content: center;
  align-items: center;
  @media screen and (max-width: 640px) {
    flex-direction: column;
    gap: 1.6rem;
  }
}

.usersVoiceListItem_textArea {
  position: relative;
  padding: 4rem;
  border-radius: 1.6rem;
  border: 4px solid var(--background-color-sky);
  background: var(--background-color-white);
  flex: 1 0 0;
  @media screen and (max-width: 640px) {
    padding: 1.6rem;
  }
}

.usersVoiceListItem_textArea::before {
  position: absolute;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
}

.usersVoiceListItem.-imageLeft {
  flex-direction: row-reverse;
  @media screen and (max-width: 640px) {
    flex-direction: column;
  }
}

.usersVoiceListItem.-imageRight {
  margin-top: 6.4rem;
  @media screen and (max-width: 640px) {
    margin-top: 1.6rem;
  }
}

.usersVoiceListItem.-imageLeft .usersVoiceListItem_textArea::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 35 33' fill='none'%3E%3Cpath d='M1.87486e-06 0.117004L35 0.116826L35 32.1168L1.87486e-06 0.117004Z' fill='%231C82E0'/%3E%3C/svg%3E");
  width: 3.5rem;
  height: 3.5rem;
  left: -3.5rem;
  bottom: 6.333rem;

  @media screen and (max-width: 640px) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 19 21' fill='none'%3E%3Cpath d='M-0.000450134 20.5898L-0.00055488 0.589845L18.2852 0.589844L-0.000450134 20.5898Z' fill='%231C82E0'/%3E%3C/svg%3E");
    width: 1.8rem;
    height: 2rem;
    left: 7.699rem;
    bottom: -2.192rem;
  }
}

.usersVoiceListItem.-imageRight .usersVoiceListItem_textArea::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 35 33' fill='none'%3E%3Cpath d='M35 0.867004L-5.21346e-06 0.866827L-3.8147e-06 32.8668L35 0.867004Z' fill='%231C82E0'/%3E%3C/svg%3E");
  width: 3.8rem;
  height: 3.5rem;
  right: -3.8rem;
  bottom: 4.033rem;

  @media screen and (max-width: 640px) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 20 19' fill='none'%3E%3Cpath d='M1.65258e-06 0.589882L20 0.58978L20 18.8755L1.65258e-06 0.589882Z' fill='%231C82E0'/%3E%3C/svg%3E");
    position: absolute;
    width: 1.8rem;
    height: 2rem;
    right: 8.8rem;
    bottom: -2.192rem;
  }
}

.usersVoiceListItem_textArea p {
  color: var(--font-color-black);
  font-size: 2rem;
  font-weight: 500;
  line-height: 160%; /* 32px */
  @media screen and (max-width: 640px) {
    font-size: 1.4rem;
  }
}

.usersVoiceListItem_imageArea {
  text-align: center;
  @media screen and (max-width: 640px) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
}
.usersVoiceListItem_imageArea.-imageLeft {
  @media screen and (max-width: 640px) {
    flex-direction: row-reverse;
  }
}

.usersVoiceListItem_imageArea img {
  /* max-width: 20rem; */
  width: 20rem;
  /* width: 100%; */
  height: auto;
  @media screen and (max-width: 640px) {
    width: 8rem;
  }
}

.usersVoiceListItem_imageArea p {
  color: var(--font-color-black);
  margin-top: 0.8rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 160%; /* 25.6px */
}

.sectionOtherUses {
  position: relative;
  background-color: var(--background-color-lightBlue);
}

.sectionOtherUses_bgTop img {
  width: 100%;
  height: auto;
  margin-top: -24rem;
}

.sectionOtherUses::after {
  content: "";
  position: absolute;
  height: 25rem;
  top: 100%;
  width: 100%;
  background: url("../images/bg_othervoice.webp") no-repeat center top;
  background-size: 100% 100%;
  @media screen and (max-width: 640px) {
    background: url("../images/bg_othervoice_sp.webp") no-repeat center top;
  }
}

.otherUses_wrap {
  position: relative;
  padding: 0 4rem;
  @media screen and (max-width: 640px) {
    padding: 0 6.25%;
  }
}

.sectionOtherUses .imgAndTextHeading {
  position: absolute;
  gap: 6.4rem;
  /* max-width: 41.2rem; */
  width: 41.2rem;
  right: 0;
  left: 0;
  top: -12.8rem;
  margin: 0 auto;
  @media screen and (max-width: 640px) {
    width: 100%;
    max-width: 32.3rem;
    padding: 0 6.25%;
  }
}

.sectionOtherUses h3 {
  color: var(--font-color-black);
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 160%; /* 38.4px */
}

.otherUses {
  display: flex;
  gap: 3rem;
  /* max-width: 120rem; */
  width: 120rem;
  /* width: 100%; */
  margin-top: 2.4rem;
  justify-content: center;
  align-items: center;

  @media screen and (max-width: 640px) {
    width: 100%;
    flex-direction: column;
  }
}

.otherUsesListItem {
  width: 38rem;
  border-radius: 1rem;
  background: var(--background-color-white);
  @media screen and (max-width: 640px) {
    width: 100%;
  }
}

.otherUsesListItem_titleArea {
  padding: 3.2rem 2.4rem 2rem;
}

.otherUsesListItem_titleArea h4 {
  display: flex;
  width: 100%;
  height: 10.4rem;
  flex-direction: column;
  justify-content: center;
  color: var(--font-color-blue);
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 25.2px */
  letter-spacing: -0.054rem;
  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.otherUsesListItem_titleArea p {
  color: var(--font-color-black);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
}

.addDdesignation {
  display: flex;
  justify-content: space-between;
  align-items: end;
  @media screen and (max-width: 640px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.otherUsesListItem_titleArea .designation {
  font-size: 1.2rem;
}

.otherUsesListItem_imageArea {
  height: 21.6rem;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
  }

  @media screen and (max-width: 640px) {
    max-width: 38rem;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

.otherUsesListItem_textArea {
  padding: 2rem 2.4rem 3.2rem;
}

.otherUsesListItem_useItem {
  position: relative;
  @media screen and (max-width: 640px) {
    max-width: 38rem;
    width: 100%;
    margin: 0 auto;
  }
}

.otherUsesListItem_useItem_text {
  color: var(--accent-color-black);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
  @media screen and (max-width: 640px) {
    font-size: 1.4rem;
  }
}

.otherUsesListItem_useItem_text span {
  font-weight: 700;
}

.otherUsesListItem_useItem_image {
  position: absolute;
  right: 0;
  bottom: 0;
}

.otherUsesListItem_useItem_image.-ix1600 {
  img {
    width: 7.7rem;
    height: auto;

    @media screen and (max-width: 640px) {
      max-width: 6rem;
      width: 100%;
      height: auto;
    }
  }
}

.otherUsesListItem_overView {
  margin-bottom: 2rem;
  height: 28rem;
  color: var(--font-color-black);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 160%; /* 25.6px */

  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.otherUsesListItem_overView.-addImage {
  margin-top: 2rem;
  height: 23.4rem;
  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.otherUses_btnAra {
  position: relative;
  text-align: center;
  margin-top: 6.4rem;
  z-index: 2;
}

.studyTips {
  margin-top: 6.4rem;
}

.studyTips .otherUsesListItem_titleArea h4 {
  height: 5rem;
  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.studyTips .otherUsesListItem_overView {
  height: 20.8rem;
  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.sectionLINEup {
  padding: 12rem 4rem;
  background: url("../images/bg_lineup.png");
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  @media screen and (max-width: 640px) {
    padding: 12rem 6.25%;
  }
}

.lineup {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  @media screen and (max-width: 640px) {
    flex-direction: column;
    align-items: center;
  }
}

.lineupItem {
  padding: 3.2rem 2.4rem;
  width: 38rem;
  border-radius: 1rem;
  border: 3px solid #1c82e0;
  background: #fff;
  box-shadow: 0 0.4rem 1.6rem 0 rgba(0, 0, 0, 0.1);
  @media screen and (max-width: 640px) {
    width: 100%;
  }
}

.sectionLINEup .imgAndTextHeading {
  position: relative;
  /* max-width: 85rem; */
  width: 85rem;
  gap: 0;
  z-index: 2;

  @media screen and (max-width: 640px) {
    width: 100%;
  }
}

.lineup {
  margin-top: 6.4rem;
  position: relative;
  z-index: 2;
}

.lineupItem_prductName {
  text-align: center;
}

.lineupItem_prductName p {
  color: var(--font-color-black);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 140%; /* 33.6px */
}

.lineupItem_prductName img {
  margin-top: 1.6rem;
  /* max-width: 24rem; */
  width: 24rem;
  /* width: 100%; */
  height: auto;
  @media screen and (max-width: 640px) {
    max-width: 24rem;
    width: 100%;
  }
}

.lineupItem_spec .str {
  font-size: 2rem;
  font-weight: 700;
  line-height: 100%;
}

.lineupItem_spec .spec {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 160%;
}

.lineupItem_size {
  margin-top: 3.2rem;
  padding: 1.6rem 0;
  border-top: solid 1px var(--background-color-sky);
}

.lineupItem_weight {
  padding: 1.6rem 0;
  border-top: solid 1px var(--background-color-sky);
}

.lineupItem_connection {
  padding: 1.6rem 0;
  border-top: solid 1px var(--background-color-sky);
  border-bottom: solid 1px var(--background-color-sky);
}

.lineupItem_size .spec {
  margin-top: 0.8rem;
  height: 10.4rem;
  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.lineupItem_text2column {
  display: flex;
  gap: 1.6rem;
}

.lineupItem_connection .lineupItem_text2column {
  height: 5.2rem;
  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.lineupItem_textArea {
  padding: 1.6rem 0;
  color: var(--font-color-black);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
  height: 26rem;
  @media screen and (max-width: 640px) {
    height: auto;
  }
}

.lineupItem_textArea p {
}

.lineupItem_btnArea {
  text-align: center;
}

.other {
  position: relative;
}

.other::before {
  content: "";
  position: absolute;
  height: 15rem;
  bottom: 100%;
  width: 100%;
  background: url("../images/bg_other.webp") no-repeat center top;
  background-size: 100% 100%;
}

.other h2 {
  color: var(--font-color-black);
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 160%; /* 51.2px */
}

.otherList {
  margin-top: 6.4rem;
  display: flex;
  gap: 5.6rem 7.2rem;
  flex-wrap: wrap;
  align-items: center;
  @media screen and (max-width: 640px) {
    justify-content: center;
    padding: 0 6.25%;
  }
}

.otherList_item {
  position: relative;
  width: 35rem;
  height: 35rem;
  overflow: hidden;
  @media screen and (max-width: 640px) {
    max-width: 35rem;
    width: 100%;
    height: auto;
  }
}

.otherList_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.otherListItem {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.3rem 0;
  color: var(--font-color-white);
  text-align: center;
  font-size: 2rem;
  line-height: 140%; /* 28px */
  background: rgba(0, 0, 0, 0.6);
}

.otherListLink {
  transition-duration: 0.3s;
}

.otherListLink:hover {
  opacity: 0.8;
}

.sectionAnnotation {
  margin-top: 12rem;
  padding: 0 4rem;
}

.sectionAnnotation h2 {
  color: var(--font-color-black);
  font-size: 2rem;
  font-weight: 700;
  line-height: 160%; /* 32px */
}

.sectionAnnotation ul.-jpAsterisk li {
  margin-top: 0.8rem;
  padding-left: 2em;
  text-indent: -2em;
  color: var(--font-color-black);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 160%; /* 22.4px */

  &::before {
    content: "※";
    margin-right: 1em;
  }
}
.sectionAnnotation ul.-circle li {
  margin-top: 0.8rem;
  color: var(--font-color-black);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 160%; /* 22.4px */
  a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  &::before {
    content: "●";
    margin-right: 1em;
  }
}

#gFooter {
  margin-top: 12rem;
  padding: 1.6rem 0 3.9rem;
  background-color: #666;
}

#gFooter .content {
  margin: 0 auto;
  max-width: 114rem;
  padding: 0 2rem;
}

#gFooter .fNavi {
  margin-bottom: 0.9rem;
}

#gFooter .flex {
  display: flex;
  flex-wrap: wrap;
}

#gFooter .fNavi li {
  margin-right: 1.2rem;
  letter-spacing: 0.04em;
}

#gFooter .fNavi a {
  display: block;
}

#gFooter .fNavi a,
#gFooter address {
  color: var(--font-color-white);
  font-size: 1.2rem;
  font-feature-settings: "palt";
}

#gFooter address {
  letter-spacing: 0.14em;
  color: #fff;
  font-size: 1.2rem;
  font-feature-settings: "palt";
}

/* -----------------------------------------------------------
fadeIn
----------------------------------------------------------- */
.fadeIn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s;

  &.-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }
}

/*------------------------------------------------------------
	フローティングバナー
------------------------------------------------------------*/
.bxTracking {
  display: none;
  position: fixed;
  width: 30.2rem;
  height: 21.3rem;
  bottom: 2.4rem;
  right: 2.4rem;
  z-index: 100;
}

.bxTracking a {
  display: block;
  transition: 0.1s;
}
.bxTracking a:hover {
  transform: scale(1.02);
}
.bxTracking #btnClose {
  position: absolute;
  cursor: pointer;
  top: 3rem;
  left: -0.6rem;
  z-index: 101;
}
.bxTracking .btnTracking {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: 100%;
  height: auto;
}