@font-face {
  font-family: "myfont";
  src: url("../fonts/myfont.eot");
  src: url("../fonts/myfont.eot?#iefix") format("eot"), url("../fonts/myfont.woff") format("woff"), url("../fonts/myfont.ttf") format("truetype"), url("../fonts/myfont.svg#myfont") format("svg");
  font-weight: normal;
  font-style: normal
}
.myfont {
  display: inline-block;
  font-family: "myfont";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.myfont-lg {
  font-size: 1.3333333333em;
  line-height: .75em;
  vertical-align: -15%
}
.myfont-2x {
  font-size: 2em
}
.myfont-3x {
  font-size: 3em
}
.myfont-4x {
  font-size: 4em
}
.myfont-5x {
  font-size: 5em
}
.myfont-fw {
  width: 1.2857142857em;
  text-align: center
}
.myfont-sns_facebook:before {
  content: "\ea01"
}
.myfont-sns_facebook2:before {
  content: "\ea02"
}
.myfont-sns_twitter:before {
  content: "\ea03"
}
.myfont-sns_line:before {
  content: "\ea04"
}
.myfont-sns_twitter:before {
  content: "\ea05"
}
.myfont-sns_line2:before {
  content: "\ea06"
}
.myfont-sns_line3:before {
  content: "\ea07"
}
.myfont-sns_line4:before {
  content: "\ea08"
}
.myfont-sns-instagram:before {
  content: "\ea09"
}
*, ::before, ::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
::before, ::after {
  text-decoration: inherit;
  vertical-align: inherit
}
html {
  cursor: default;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word
}
body {
  margin: 0
}
h1 {
  font-size: 2em;
  margin: .67em 0
}
dl dl, dl ol, dl ul, ol dl, ul dl {
  margin: 0
}
ol ol, ol ul, ul ol, ul ul {
  margin: 0
}
hr {
  height: 0;
  overflow: visible
}
main {
  display: block
}
nav ol, nav ul {
  list-style: none;
  padding: 0
}
pre {
  font-family: monospace, monospace;
  font-size: 1em
}
a {
  background-color: transparent
}
abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}
b, strong {
  font-weight: bolder
}
code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em
}
small {
  font-size: 80%
}
audio, canvas, iframe, img, svg, video {
  vertical-align: middle
}
audio, video {
  display: inline-block
}
audio:not([controls]) {
  display: none;
  height: 0
}
iframe {
  border-style: none
}
img {
  border-style: none
}
svg:not([fill]) {
  fill: currentColor
}
svg:not(:root) {
  overflow: hidden
}
table {
  border-collapse: collapse
}
button, input, select {
  margin: 0
}
button {
  overflow: visible;
  text-transform: none
}
button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button
}
fieldset {
  border: 1px solid #a0a0a0;
  padding: .35em .75em .625em
}
input {
  overflow: visible
}
legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal
}
progress {
  display: inline-block;
  vertical-align: baseline
}
select {
  text-transform: none
}
textarea {
  margin: 0;
  overflow: auto;
  resize: vertical
}
[type=checkbox], [type=radio] {
  padding: 0
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: .54
}
::-webkit-search-decoration {
  -webkit-appearance: none
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}
::-moz-focus-inner {
  border-style: none;
  padding: 0
}
:-moz-focusring {
  outline: 1px dotted ButtonText
}
:-moz-ui-invalid {
  box-shadow: none
}
details {
  display: block
}
dialog {
  background-color: #fff;
  border: solid;
  color: #000;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content
}
dialog:not([open]) {
  display: none
}
summary {
  display: list-item
}
canvas {
  display: inline-block
}
template {
  display: none
}
a, area, button, input, label, select, summary, textarea, [tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation
}
[hidden] {
  display: none
}
[aria-busy=true] {
  cursor: progress
}
[aria-controls] {
  cursor: pointer
}
[aria-disabled=true], [disabled] {
  cursor: not-allowed
}
[aria-hidden=false][hidden] {
  display: initial
}
[aria-hidden=false][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute
}
@-webkit-keyframes wink {
  0% {
    opacity: .5
  }
  100% {
    opacity: 1
  }
}
@keyframes wink {
  0% {
    opacity: .5
  }
  100% {
    opacity: 1
  }
}
.u-fwb {
  font-weight: bold
}
.u-fwn {
  font-weight: normal
}
.u-tAlign--center {
  text-align: center
}
.u-pcOnly {
  display: none
}
.u-pcOnly--inline {
  display: none
}
@media screen and (min-width: 768px) {
  .u-pcOnly {
    display: block
  }
}
.u-spOnly--inline {
  display: inline-block
}
@media screen and (min-width: 768px) {
  .u-spOnly--inline {
    display: none
  }
}
@media screen and (min-width: 768px) {
  .u-spOnly {
    display: none
  }
}
html {
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic Pron", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
  -webkit-font-kerning: normal;
  font-kerning: normal;
  line-height: 1;
  font-weight: 500;
  scroll-behavior: smooth
}
body {
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  background: #eaeaea
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
a img {
  -ms-interpolation-mode: bicubic
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
*, ::before, ::after {
  margin: 0
}
h1 {
  margin: 0
}
ul, ol {
  padding-left: 0
}
li {
  list-style: none
}
.js-focus-visible :focus:not(.focus-visible) {
  outline: 0
}
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px;
  -webkit-transition: background-color .3s, fill .3s ease;
  transition: background-color .3s, fill .3s ease
}
@media only screen and (min-width: 769px) {
  .header {
    padding: 33.8px 70px
  }
}
.header.is-bgColor {
  background-color: #eaeaea
}
.headerLeft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.headerLeft h1 {
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.headerLogo {
  display: -ms-grid;
  display: grid
}
.headerLogo svg {
  fill: #333;
  width: 215px;
  height: auto
}
@media only screen and (min-width: 769px) {
  .headerLogo svg {
    width: 351px
  }
}
.headerMenuBtn {
  display: none
}
.headerMenuIcon {
  display: inline-block;
  cursor: pointer;
  width: 25px;
  height: 20px;
  position: relative;
  z-index: 10000
}
@media only screen and (min-width: 769px) {
  .headerMenuIcon {
    width: 35px;
    height: 28px
  }
}
.headerMenuIcon span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  -webkit-transition: .3s;
  transition: .3s
}
.headerMenuIcon span:nth-child(2) {
  margin: 5px 0
}
@media only screen and (min-width: 769px) {
  .headerMenuIcon span:nth-child(2) {
    margin: 9px 0
  }
}
.headerMenu {
  position: fixed;
  top: 0;
  right: -100px;
  overflow-y: scroll;
  width: 100vw;
  height: 100vh;
  background-color: #eaeaea;
  padding: 89px 30px 50px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  z-index: 1000
}
@media only screen and (min-width: 769px) {
  .headerMenu {
    width: 495px;
    padding: 95px 75px 50px
  }
}
.headerMenu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left
}
@media only screen and (min-width: 769px) {
  .headerMenu__list + .c-cvBtn--vertical {
    padding-top: clamp(30px, 5%, 60px)
  }
}
.headerMenu__listItem {
  margin: 25px 0;
  padding: 0 0 25px
}
.headerMenu__listItem:not(:last-child) {
  border-bottom: 1px solid #b3b3b3
}
.headerMenu__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  -webkit-transition: opacity .3s;
  transition: opacity .3s
}
@media not all, (hover: hover) {
  .headerMenu__link:hover {
    opacity: .7
  }
}
.headerMenu__linkIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #333
}
.headerMenu__linkIcon svg {
  fill: #fff
}
.headerMenuBtn:checked ~ .headerMenu {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  right: 0
}
.headerMenuBtn:checked + .headerMenuIcon span {
  background-color: #333
}
@media only screen and (min-width: 769px) {
  .headerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .7);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    z-index: 999
  }
}
body:has(.headerMenuBtn:checked) {
  overflow: hidden
}
@media only screen and (min-width: 769px) {
  .headerOverlay:has(+.headerMenuBtn: checked) {
    opacity: 1;
    visibility: visible
  }
}
.headerMenuBtn:checked + .headerMenuIcon span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(6px, 6px);
  transform: rotate(45deg) translate(6px, 6px)
}
@media only screen and (min-width: 769px) {
  .headerMenuBtn:checked + .headerMenuIcon span:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(8px, 8px);
    transform: rotate(45deg) translate(8px, 8px)
  }
}
.headerMenuBtn:checked + .headerMenuIcon span:nth-child(2) {
  opacity: 0
}
.headerMenuBtn:checked + .headerMenuIcon span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(5px, -6px);
  transform: rotate(-45deg) translate(5px, -6px)
}
@media only screen and (min-width: 769px) {
  .headerMenuBtn:checked + .headerMenuIcon span:nth-child(3) {
    -webkit-transform: rotate(-45deg) translate(8px, -8px);
    transform: rotate(-45deg) translate(8px, -8px)
  }
}
footer {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-row-gap: 15px;
  background: #d2d2d2;
  padding: 30px 40px
}
@media only screen and (min-width: 768px) {
  footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
}
.footerLogo {
  display: block
}
.footerLogo svg {
  fill: #333;
  width: 270px;
  height: auto
}
.copylight {
  font-size: 12px;
  font-weight: 500;
  text-align: center
}
@media only screen and (min-width: 768px) {
  .copylight {
    font-size: 14px
  }
}
.c-cvBtn--large .c-cvBtn__item {
  max-width: 345px;
  height: 55px;
  font-size: 20px
}
.c-cvBtn--middle .c-cvBtn__item {
  -ms-grid-column-align: center;
  justify-self: center;
  max-width: 330px;
  height: 60px;
  font-size: 20px
}
@media only screen and (min-width: 769px) {
  .c-cvBtn--middle .c-cvBtn__item {
    -ms-grid-column-align: auto;
    justify-self: auto;
    height: 75px;
    font-size: 25px
  }
}
.c-cvBtn--small .c-cvBtn__item {
  -ms-grid-column-align: center;
  justify-self: center;
  max-width: 330px;
  height: 60px;
  font-size: 20px
}
@media only screen and (min-width: 769px) {
  .c-cvBtn--small .c-cvBtn__item {
    max-width: 265px;
    height: 75px
  }
}
.c-cvBtn--vertical {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 15px
}
@media only screen and (min-width: 769px) {
  .c-cvBtn--vertical {
    grid-row-gap: 20px
  }
}
.c-cvBtn--variable {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 20px;
  width: 100%;
  margin-top: 40px
}
@media only screen and (min-width: 821px) {
  .c-cvBtn--variable {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column-gap: 20px;
    margin-top: 0
  }
}
.c-cvBtn__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  border-radius: 37px;
  font-weight: 900;
  position: relative
}
.c-cvBtn__item--contact {
  background: #333;
  color: #fff
}
.c-cvBtn__item--download {
  background: #fff;
  color: #333
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100);
    transform: translateZ(100)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100);
    transform: translateZ(100)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@-webkit-keyframes slideIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-150%, 0, 0);
    transform: translate3d(-150%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}
@keyframes slideIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-150%, 0, 0);
    transform: translate3d(-150%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}
.c-Anim {
  opacity: 0;
  -webkit-transform: translate3d(0, 100px, 0);
  transform: translate3d(0, 100px, 0);
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards
}
.c-Anim--slidein {
  -webkit-animation: slideIn 1s ease forwards;
  animation: slideIn 1s ease forwards
}
.c-AnimDelay--03 {
  -webkit-animation-delay: .3s;
  animation-delay: .3s
}
.c-AnimDelay--04 {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}
.c-AnimDelay--06 {
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}
.c-AnimDelay--07 {
  -webkit-animation-delay: .7s;
  animation-delay: .7s
}
.c-AnimDelay--08 {
  -webkit-animation-delay: .8s;
  animation-delay: .8s
}
.c-AnimDelay--09 {
  -webkit-animation-delay: .9s;
  animation-delay: .9s
}
.c-AnimDelay--10 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}
.c-AnimDelay--11 {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s
}
.c-AnimDelay--12 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s
}
.c-AnimDelay--13 {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s
}
.c-AnimDelay--14 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s
}
.c-AnimDelay--15 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s
}
@-webkit-keyframes light {
  100% {
    outline-color: transparent;
    outline-offset: 12px
  }
}
@keyframes light {
  100% {
    outline-color: transparent;
    outline-offset: 12px
  }
}
.hoverAnim--border {
  -webkit-transition: .3s;
  transition: .3s
}
@media not all, (hover: hover) {
  .hoverAnim--border:hover {
    background: #333;
    color: #fff
  }
}
.hoverAnim--black {
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 0px;
  outline-color: #333;
  -webkit-transition: .3s;
  transition: .3s
}
@media not all, (hover: hover) {
  .hoverAnim--black:hover {
    -webkit-animation: light .8s infinite;
    animation: light .8s infinite
  }
}
.hoverAnim--white {
  outline-width: 1px;
  outline-style: solid;
  outline-offset: 0px;
  outline-color: #fff;
  -webkit-transition: .3s;
  transition: .3s
}
@media not all, (hover: hover) {
  .hoverAnim--white:hover {
    -webkit-animation: light .8s infinite;
    animation: light .8s infinite
  }
}
.section--about {
  background-image: url("../img/top/about_bg.png");
  background-repeat: no-repeat;
  background-size: 250%;
  background-position: right 55% top 39%
}
@media only screen and (min-width: 769px) {
  .section--about {
    background-size: 100%;
    background-position: left 30px
  }
}
.section--service {
  background: -webkit-linear-gradient(347.01deg, #A6A09E -18.03%, #959593 50.01%);
  background: linear-gradient(102.99deg, #A6A09E -18.03%, #959593 50.01%)
}
.section--contact {
  background-image: url("../img/top/contact_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}
.section--usage {
  position: relative
}
.section--usage > .sectionBg--usage {
  display: block;
  width: 92%;
  height: 36%;
  position: absolute;
  top: 80px;
  left: 0;
  background: -webkit-linear-gradient(347.01deg, #A6A09E -18.03%, #959593 50.01%);
  background: linear-gradient(102.99deg, #A6A09E -18.03%, #959593 50.01%);
  z-index: -1;
  border-radius: 0 10px 10px 0
}
@media only screen and (min-width: 769px) {
  .section--usage > .sectionBg--usage {
    width: 100%;
    height: 400px;
    max-width: 1075px;
    top: 100px;
    border-radius: 0
  }
}
.section--usage:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: -2;
  background-image: url("../img/top/example_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left 0 bottom 10%
}
@media only screen and (min-width: 769px) {
  .section--usage:after {
    background-position: left 0 bottom 16%
  }
}
@media only screen and (min-width: 769px) {
  .section--lineup {
    background-image: url("../img/top/lineup_bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: -10px;
    background-position-x: center
  }
}
.section__inner {
  width: 100%
}
.section__inner--about {
  padding: 73px 30px 80px 30px
}
@media only screen and (min-width: 769px) {
  .section__inner--about {
    padding: 114px clamp(150px, 14vw, 200px) 100px 0
  }
}
.section__inner--solution {
  overflow: hidden;
  padding-top: 53px;
  padding-bottom: 0
}
@media only screen and (min-width: 821px) {
  .section__inner--solution {
    padding: 64px 0 130px 200px
  }
}
.section__inner--service {
  max-width: 1040px;
  padding: 73px 30px 100px 30px;
  margin: 0 auto
}
@media only screen and (min-width: 769px) {
  .section__inner--service {
    padding-top: 133px;
    padding-bottom: 122px
  }
}
.section__inner--contact {
  max-width: 1100px;
  padding: 34px 30px 60px;
  margin: 0 auto
}
@media only screen and (min-width: 769px) {
  .section__inner--contact {
    padding-bottom: 70px
  }
}
.section__inner--usage {
  max-width: 1040px;
  padding-top: 129px;
  padding-bottom: 100px;
  margin: 0 auto
}
@media only screen and (min-width: 769px) {
  .section__inner--usage {
    padding-top: 148px;
    padding-bottom: 203px
  }
}
.section__inner--lineup {
  max-width: 1040px;
  padding: 53px 0 80px 0;
  margin: 0 auto
}
@media only screen and (min-width: 769px) {
  .section__inner--lineup {
    padding-top: 64px;
    padding-bottom: 100px;
    margin-top: 0
  }
}
.section__inner--faq {
  max-width: 1040px;
  padding: 73px 30px 100px 30px;
  margin: 0 auto
}
@media only screen and (min-width: 769px) {
  .section__inner--faq {
    padding-top: 115px;
    padding-bottom: 150px
  }
}
.section__titleWrap--flex {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content
}
@media only screen and (min-width: 769px) {
  .section__titleWrap--flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column-gap: 100px;
    position: relative
  }
  .section__titleWrap--flex::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 68%;
    height: 1px;
    background: #000
  }
}
.section__title {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(60px, 17vw, 65px)
}
@media only screen and (min-width: 821px) {
  .section__title {
    font-size: clamp(80px, 7vw, 90px);
    line-height: 1.5
  }
}
@media only screen and (min-width: 821px) {
  .section__title--about {
    padding-left: 200px
  }
}
.section__title--about + .section__subTitle {
  padding-left: 35px
}
.section__title--about + .section__subTitle::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.section__title--solution, .section__title--solution + .section__subTitle {
  padding: 0 30px
}
@media only screen and (min-width: 821px) {
  .section__title--solution, .section__title--solution + .section__subTitle {
    padding: 0
  }
}
.section__title--service {
  color: #fff;
  text-align: center
}
.section__title--service + .section__subTitle {
  display: block;
  text-align: center;
  color: #fff
}
.section__title--usage {
  color: #fff;
  padding: 0 30px
}
@media only screen and (min-width: 821px) {
  .section__title--usage {
    padding: 0
  }
}
.section__title--usage + .section__subTitle {
  color: #fff;
  padding: 0 30px
}
@media only screen and (min-width: 821px) {
  .section__title--usage + .section__subTitle {
    padding: 0
  }
}
.section__title--lineup, .section__title--lineup + .section__subTitle {
  padding: 0 30px
}
@media only screen and (min-width: 821px) {
  .section__title--lineup, .section__title--lineup + .section__subTitle {
    padding: 0
  }
}
.section__subTitle {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 12px;
  font-weight: 900;
  position: relative;
  margin-bottom: 5px;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic Pron", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
@media only screen and (min-width: 769px) {
  .section__subTitle {
    font-size: 15px
  }
}
main {
  position: relative;
  top: -60px
}
@media only screen and (min-width: 769px) {
  main {
    top: -100px
  }
}
.kv {
  display: -ms-grid;
  display: grid;
  position: relative
}
@media only screen and (min-width: 769px) {
  .kv {
    height: 967px
  }
}
.kvBg {
  display: block;
  width: 100%;
  height: 817px;
  position: absolute;
  z-index: -2;
  background: -webkit-linear-gradient(300.53deg, #A6A09E 0%, #959593 62.9%);
  background: linear-gradient(149.47deg, #A6A09E 0%, #959593 62.9%);
  opacity: 0;
  background: url("../img/top/kv_bg.jpg");
  background-size: cover;
  background-position-x: 25%
}
@media only screen and (min-width: 769px) {
  .kvBg {
    max-height: 875px;
    height: 100%
  }
}
.kvInner {
  display: -ms-grid;
  display: grid;
  align-self: flex-start;
  position: relative;
  padding: 110px 25px 70px
}
@media only screen and (min-width: 769px) {
  .kvInner {
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
    grid-column-gap: 49px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 162px 0 20px 10.42vw
  }
}
.kvContent {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -ms-flex-item-align: end;
  align-self: flex-end;
  -ms-grid-column-align: center;
  justify-self: center;
  color: #333
}
@media only screen and (min-width: 769px) {
  .kvContent {
    -ms-grid-row-align: auto;
    align-self: auto;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1/1/2/2
  }
}
.kvContent + .c-cvBtn--variable {
  -ms-flex-item-align: start;
  align-self: flex-start;
  margin-top: 35px
}
@media only screen and (min-width: 769px) {
  .kvContent + .c-cvBtn--variable {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 2/1/3/2
  }
}
@media only screen and (min-width: 821px) {
  .kvContent + .c-cvBtn--variable {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
  }
}
.kvTitle--primary {
  font-size: clamp(40px, 12vw, 48px);
  font-weight: 900;
  line-height: 1.4
}
@media only screen and (min-width: 769px) {
  .kvTitle--primary {
    font-size: clamp(55px, 10vh, 75px)
  }
}
.kvTitle--secondary {
  display: block;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 16px
}
@media only screen and (min-width: 769px) {
  .kvTitle--secondary {
    font-size: clamp(15px, 3vh, 20px);
    margin-bottom: 5px
  }
}
.kvDesc {
  width: 100%;
  max-width: 330px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 25px;
  margin-bottom: 40px
}
@media only screen and (min-width: 769px) {
  .kvDesc {
    max-width: 520px;
    font-size: 14px;
    margin-top: clamp(10px, 3vh, 20px);
    margin-bottom: clamp(30px, 8vh, 50px)
  }
}
.kvImg {
  width: 100%;
  max-width: 350px;
  height: 300px;
  margin-top: 50px;
  position: relative;
  justify-self: flex-end
}
@media only screen and (min-width: 769px) {
  .kvImg {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 1/2/3/3;
    max-width: unset;
    height: auto;
    margin-top: 0
  }
}
.kvImg__inner {
  width: 100%;
  height: 100%;
  position: absolute;
  right: -25px;
  bottom: 0
}
@media only screen and (min-width: 769px) {
  .kvImg__inner {
    right: 0;
    z-index: -1;
    max-width: 1077px;
    height: 915px;
    top: -162px;
    bottom: auto
  }
}
.kvImg__item {
  height: 100%;
  background-image: url("../img/top/kv_sp.png");
  background-position: center;
  background-size: cover;
  border-radius: 10px 0 0 10px
}
@media only screen and (min-width: 769px) {
  .kvImg__item {
    background-image: url("../img/top/kv_pc.png");
    border-radius: 0 0 0 10px
  }
}
.introCompany {
  margin: 55px 0
}
@media only screen and (min-width: 769px) {
  .introCompany {
    margin: 34.5px 0
  }
}
@-webkit-keyframes infinity-scroll-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}
@keyframes infinity-scroll-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}
.introCompany__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-column-gap: 35px;
  overflow: hidden
}
.introCompany__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 35px;
  list-style: none;
  padding: 0;
  -webkit-animation: infinity-scroll-left 80s infinite linear .5s both;
  animation: infinity-scroll-left 80s infinite linear .5s both
}
.introCompany__listItem {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content
}
.aboutContent {
  width: 100%;
  max-width: 632px;
  margin-left: auto;
  margin-right: 0
}
.aboutContent__head {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.4
}
@media only screen and (min-width: 769px) {
  .aboutContent__head {
    font-size: 30px;
    margin-top: 0
  }
}
@media screen and (max-width: 1330px) {
  .aboutContent__head {
    margin-top: 40px
  }
}
.aboutContent__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  margin-top: 20px
}
@media only screen and (min-width: 769px) {
  .aboutContent__desc {
    font-size: 16px
  }
}
.aboutContent__desc:last-child {
  margin-top: 30px
}
.solutionContent {
  display: -ms-grid;
  display: grid;
  margin-top: 40px
}
@media only screen and (min-width: 821px) {
  .solutionContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column-gap: 80px;
    margin-top: 63px
  }
}
.solutionList {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 35px;
  padding: 0 30px
}
@media only screen and (min-width: 821px) {
  .solutionList {
    max-width: 50.4%;
    padding: 0
  }
}
.solutionList__item {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-grid-columns: 39px 1fr;
  grid-template-columns: 39px 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  padding-bottom: 30px
}
@media only screen and (min-width: 821px) {
  .solutionList__item {
    -ms-grid-columns: 89px 1fr;
    grid-template-columns: 89px 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 23px;
    padding-bottom: 40px
  }
}
.solutionList__item:not(:last-child) {
  border-bottom: 1px solid #333
}
.solutionList__num {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1/1/2/2;
  align-self: flex-start;
  margin-top: 8px
}
@media only screen and (min-width: 821px) {
  .solutionList__num {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    width: auto;
    height: 73px;
    margin-top: 0
  }
}
.solutionList__head {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1/2/2/3;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.6
}
@media only screen and (min-width: 821px) {
  .solutionList__head {
    font-size: 30px
  }
}
.solutionList__desc {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: 2/1/3/3;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8
}
@media only screen and (min-width: 821px) {
  .solutionList__desc {
    font-size: 16px
  }
}
@media only screen and (min-width: 821px) {
  .solutionImg {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: clamp(575px, 46%, 49.4%);
    height: auto
  }
}
.solutionImg img {
  width: 100%
}
@media only screen and (min-width: 821px) {
  .solutionImg img {
    border-radius: 10px 0 0 10px
  }
}
.serviceList {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 40px;
  margin-top: 65px
}
@media only screen and (min-width: 769px) {
  .serviceList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column-gap: 40px
  }
}
.serviceList__item {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-row-gap: 15px;
  color: #fff
}
@media only screen and (min-width: 769px) {
  .serviceList__item {
    width: calc(100%/3);
    -ms-grid-rows: 50px 86px auto;
    grid-template-rows: 50px 86px auto;
    grid-row-gap: 20px
  }
}
.serviceList__head {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.4
}
@media only screen and (min-width: 769px) {
  .serviceList__head {
    font-size: 30px
  }
}
.serviceList__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8
}
@media only screen and (min-width: 769px) {
  .serviceList__desc {
    font-size: 16px;
    line-height: 1.4
  }
}
.contactContent {
  display: -ms-grid;
  display: grid;
  grid-column-gap: 91px;
  margin-top: 31px
}
@media only screen and (min-width: 821px) {
  .contactContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
  }
}
.contact__desc {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  width: 100%
}
@media only screen and (min-width: 821px) {
  .contact__desc {
    max-width: 380px;
    font-size: 16px
  }
}
@media only screen and (min-width: 821px) {
  .contact__desc + .c-cvBtn--variable {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
  }
}
[data-aos=fade-right][data-trigger-aos=usage] {
  -webkit-transform: translate3d(-105%, 0, 0);
  transform: translate3d(-105%, 0, 0)
}
.caseArea {
  margin-top: 30px
}
@media only screen and (min-width: 769px) {
  .caseArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column-gap: 10px;
    margin-top: 59px
  }
}
.caseCard {
  cursor: pointer
}
.caseCard__main {
  width: 100%;
  position: relative;
  overflow: hidden
}
@media only screen and (min-width: 769px) {
  .caseCard__main {
    border-radius: 7px
  }
}
.caseCard__main:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(46, 46, 46, 0)), color-stop(84.5%, rgba(46, 46, 46, 0.8)), to(#2E2E2E));
  background: -webkit-linear-gradient(top, rgba(46, 46, 46, 0) 0%, rgba(46, 46, 46, 0.8) 84.5%, #2E2E2E 100%);
  background: linear-gradient(180deg, rgba(46, 46, 46, 0) 0%, rgba(46, 46, 46, 0.8) 84.5%, #2E2E2E 100%)
}
@media only screen and (min-width: 769px) {
  .caseCard__main:before {
    height: 200px
  }
}
@media not all, (hover: hover) {
  .caseCard__main:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }
}
.caseCard__main img {
  height: auto;
  -webkit-transition: -webkit-transform .6s ease;
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease, -webkit-transform .6s ease;
  width: 100%
}
.caseCard__mainText {
  color: #fff;
  font-weight: 900;
  line-height: 1.4;
  position: absolute;
  z-index: 2
}
@media only screen and (min-width: 769px) {
  .caseCard__mainText {
    font-size: 20px;
    left: 0;
    bottom: 0;
    padding: 0 0 15px 10px
  }
}
.caseCard__subText {
  display: none
}
@media only screen and (min-width: 769px) {
  .caseCard__subText {
    display: block;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    margin-top: 16px
  }
}
.c-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1000;
  padding-left: 30px;
  padding-right: 30px
}
.c-modal__content {
  display: -ms-grid;
  display: grid;
  gap: 30px;
  max-width: 840px;
  width: 100%;
  background-color: #eaeaea;
  padding: 30px 20px;
  border-radius: 10px
}
@media only screen and (min-width: 769px) {
  .c-modal__content {
    gap: 40px;
    padding: 50px 50px 30px
  }
}
.c-modal__ttl {
  font-size: 18px;
  font-weight: 900;
  position: relative;
  padding-bottom: 10px
}
@media only screen and (min-width: 769px) {
  .c-modal__ttl {
    font-size: 20px;
    padding-bottom: 15px
  }
}
@media only screen and (min-width: 769px) {
  .caseModal__content {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr)
  }
}
@media only screen and (min-width: 769px) {
  .caseModal__ttl {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1/1/2/2
  }
}
.caseModal__ttl::after {
  content: "";
  display: block;
  width: 65px;
  height: 1px;
  background: #333;
  position: absolute;
  left: 0;
  bottom: 0
}
.caseModal__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 15px
}
@media only screen and (min-width: 769px) {
  .caseModal__desc {
    font-size: 16px;
    margin-top: 20px
  }
}
.caseModal__img {
  width: 100%
}
@media only screen and (min-width: 769px) {
  .caseModal__img {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 1/2/2/3;
    width: 333px;
    height: auto
  }
}
.c-modal__closeBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  max-width: 174px;
  height: 41px;
  line-height: 41px;
  font-size: 15px;
  font-weight: 900;
  color: #333;
  background-color: transparent;
  border: 1.5px solid #333;
  border-radius: 30px;
  cursor: pointer;
  margin: 0 auto
}
@media only screen and (min-width: 769px) {
  .c-modal__closeBtn {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: 2/1/3/3
  }
}
.c-modal__closeBtn--cross {
  position: relative;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 0;
  margin-left: auto;
  width: 18px;
  height: 18px;
  cursor: pointer
}
@media only screen and (min-width: 769px) {
  .c-modal__closeBtn--cross {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 1/2/2/3;
    margin-bottom: 12px
  }
}
.c-modal__closeBtn--cross::before, .c-modal__closeBtn--cross::after {
  content: "";
  display: block;
  width: 3px;
  height: 23px;
  background: #333;
  position: absolute;
  top: -2px;
  right: -30px
}
.c-modal__closeBtn--cross::before {
  left: 8px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.c-modal__closeBtn--cross::after {
  right: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
.exampleArea {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 50px;
  margin-top: 96px
}
@media only screen and (min-width: 768px) {
  .exampleArea {
    display: block;
    margin-top: 173px
  }
}
@media only screen and (min-width: 768px) {
  .exampleItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}
.exampleItem:nth-child(even) {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin: 162px 0
}
@media only screen and (min-width: 768px) {
  .exampleItem:nth-child(even) {
    margin: 166px 0 196px
  }
}
.exampleItem:nth-child(even) .exampleItem__img {
  left: 0;
  right: auto
}
@media only screen and (min-width: 769px) {
  .exampleItem:nth-child(even) .exampleItem__img img {
    border-radius: 0 10px 10px 0
  }
}
@media only screen and (min-width: 1500px) {
  .exampleItem:nth-child(even) {
    margin: 300px 0
  }
}
.exampleItem__content {
  width: clamp(330px, 55vw, 500px);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  padding: 20px;
  margin: 0 auto 0
}
@media only screen and (min-width: 769px) {
  .exampleItem__content {
    width: clamp(750px, 50vw, 800px);
    padding: 40px;
    margin: 0
  }
}
.exampleItem__case {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #b3b3b3
}
@media only screen and (min-width: 768px) {
  .exampleItem__case {
    font-size: 20px
  }
}
.exampleItem__company {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 5px
}
@media only screen and (min-width: 768px) {
  .exampleItem__company {
    grid-row-gap: 2px;
    font-size: 30px;
    margin-top: 20px
  }
}
.exampleItem__industries {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  align-self: flex-end;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #333;
  padding: 5px 5px 6px
}
@media only screen and (min-width: 768px) {
  .exampleItem__industries {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    padding: 3.2px 5px 4.5px;
    margin-top: 8px
  }
}
.exampleItem__head {
  font-size: 15px;
  font-weight: 700;
  border-top: 1px solid #333;
  padding-top: 15px;
  margin-top: 20px
}
@media only screen and (min-width: 768px) {
  .exampleItem__head {
    font-size: 20px;
    padding-top: 30px;
    margin-top: 30px
  }
}
.exampleItem__desc {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  margin-top: 10px
}
@media only screen and (min-width: 768px) {
  .exampleItem__desc {
    font-size: 16px
  }
}
.exampleItem__img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  margin-top: -50px
}
@media only screen and (min-width: 769px) {
  .exampleItem__img {
    margin-top: 0
  }
  .exampleItem__img img {
    width: clamp(600px, 41vw, 788px);
    border-radius: 10px 0 0 10px
  }
}
.lineUpContent__text {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  padding: 0 30px;
  margin-top: 25px
}
@media only screen and (min-width: 769px) {
  .lineUpContent__text {
    font-size: 20px;
    padding: 0;
    margin-top: 40px
  }
}
.lineUpContent__head {
  font-weight: 900;
  font-size: 20px;
  padding: 0 30px;
  margin-bottom: 25px
}
@media only screen and (min-width: 769px) {
  .lineUpContent__head {
    font-size: 30px;
    padding: 0;
    margin-bottom: 30px
  }
}
.lineUpContent__head:first-of-type {
  margin-top: 40px
}
@media only screen and (min-width: 769px) {
  .lineUpContent__head:first-of-type {
    margin-top: 80px
  }
}
.lineUpContent__head:nth-of-type(2) {
  margin-top: 50px
}
@media only screen and (min-width: 769px) {
  .lineUpContent__head:nth-of-type(2) {
    margin-top: 80px
  }
}
.lineUpList {
  overflow-x: scroll;
  display: -ms-grid;
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  padding: 0 30px;
  margin-top: 40px
}
@media only screen and (min-width: 821px) {
  .lineUpList {
    overflow-x: unset;
    grid-column-gap: 25px;
    padding: 0;
    margin-top: 30px
  }
}
.lineUpList:first-of-type {
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr)
}
@media only screen and (min-width: 821px) {
  .lineUpList:first-of-type {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr)
  }
}
.lineUpList:last-of-type {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr)
}
.lineUpList__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 65px 1fr;
  grid-template-rows: 65px 1fr;
  width: 210px;
  min-height: 195px;
  position: relative;
  overflow: hidden;
  background: #e5e5e5;
  border-radius: 6px;
  padding: 10px 20px 20px;
  cursor: pointer
}
@media only screen and (min-width: 821px) {
  .lineUpList__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    min-height: 160px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 0 20px 20px;
    -webkit-transition: opacity ease .3s;
    transition: opacity ease .3s
  }
}
@media not all, (hover: hover) {
  .lineUpList__item:hover {
    opacity: .5
  }
}
.lineUpList__text {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center
}
.lineUpList__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center
}
@media only screen and (min-width: 821px) {
  .lineUpList__name {
    font-size: 18px;
    line-height: 1.4;
    text-align: left
  }
}
.lineUpList__name__sub {
  font-size: 12px
}
@media only screen and (min-width: 821px) {
  .lineUpList__name__sub {
    font-size: 13px
  }
}
.lineUpList__linkText {
  font-weight: 700;
  font-size: 10px;
  text-decoration: underline;
  position: absolute;
  left: 50%;
  bottom: 10px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}
@media only screen and (min-width: 821px) {
  .lineUpList__linkText {
    left: 20px;
    -webkit-transform: unset;
    transform: unset
  }
}
.c-lineUp__enName {
  display: block;
  font-size: 10px;
  margin-top: 5px;
  text-align: center;
}
.lineUpList__imgWrap {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0)
}
@media only screen and (min-width: 821px) {
  .lineUpList__imgWrap {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }
}
.lineUpImg--1 {
  top: 48%;
  left: 50%
}
@media only screen and (min-width: 821px) {
  .lineUpImg--1 {
    top: 54%;
    right: -50px
  }
  .lineUpImg--1 .lineUpList__img {
    width: 239px
  }
}
.lineUpImg--2 {
  top: 50%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--2 {
    top: 54%;
    left: auto;
    right: 0
  }
  .lineUpImg--2 .lineUpList__img {
    width: 145px
  }
}
.lineUpImg--3 {
  top: 50%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--3 {
    top: 56%;
    left: auto;
    right: -20px
  }
  .lineUpImg--3 .lineUpList__img {
    width: 155px
  }
}
.lineUpImg--4 {
  top: 53%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--4 {
    top: 56%;
    left: auto;
    right: -40px
  }
  .lineUpImg--4 .lineUpList__img {
    width: 210px
  }
}
.lineUpImg--5 {
  top: 50%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--5 {
    top: 58%;
    left: auto;
    right: -55px
  }
  .lineUpImg--5 .lineUpList__img {
    width: 215px
  }
}
.lineUpImg--6 {
  top: 37%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--6 {
    top: 50%;
    left: auto;
    right: 0
  }
  .lineUpImg--6 .lineUpList__img {
    width: 150px
  }
}
.lineUpImg--7 {
  top: 45%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--7 {
    top: 57%;
    left: auto;
    right: 0
  }
  .lineUpImg--7 .lineUpList__img {
    width: 135px
  }
}
.lineUpImg--8 {
  top: 50%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--8 {
    top: 57%;
    left: auto;
    right: -32px
  }
  .lineUpImg--8 .lineUpList__img {
    width: 185px
  }
}
.lineUpImg--9 {
  top: 53%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--9 {
    top: 54%;
    left: auto;
    right: 40px
  }
  .lineUpImg--9 .lineUpList__img {
    width: 65px
  }
}
.lineUpImg--10 {
  top: 44%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--10 {
    top: 55%;
    left: auto;
    right: 0
  }
  .lineUpImg--10 .lineUpList__img {
    width: 155px
  }
}
.lineUpImg--11 {
  top: 55%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--11 {
    left: auto;
    right: -40px
  }
  .lineUpImg--11 .lineUpList__img {
    width: 200px
  }
}
.lineUpImg--12 {
  top: 50%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--12 {
    top: 55%;
    left: auto;
    right: 0
  }
  .lineUpImg--12 .lineUpList__img {
    width: 150px
  }
}
.lineUpImg--13 {
  top: 50%;
  left: 50%
}
@media only screen and (min-width: 821px) {
  .lineUpImg--13 {
    top: 54%;
    left: auto;
    right: -5px
  }
  .lineUpImg--13 .lineUpList__img {
    width: 139px
  }
}
.lineUpImg--14 {
  top: 50%;
  left: 50%
}
@media only screen and (min-width: 821px) {
  .lineUpImg--14 {
    top: 54%;
    left: auto;
    right: -5px
  }
  .lineUpImg--14 .lineUpList__img {
    width: 139px
  }
}
.lineUpImg--15 {
  top: 47%;
  left: 50%;
  right: 0
}
@media only screen and (min-width: 821px) {
  .lineUpImg--15 {
    top: 56%;
    left: auto;
    right: 26px
  }
  .lineUpImg--15 .lineUpList__img {
    width: 95px
  }
}
@media only screen and (min-width: 821px) {
  .lineUpList__img {
    height: auto
  }
}
.productModal {
  padding: 15% 30px
}
@media only screen and (min-width: 769px) {
  .productModal {
    padding: 0 30px
  }
}
.productModal__content {
  gap: 0;
  max-width: 1000px;
  height: 100%;
  overflow-x: scroll;
  padding-top: 20px
}
@media only screen and (min-width: 769px) {
  .productModal__content {
    height: auto;
    grid-column-gap: 50px;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: -webkit-max-content -webkit-max-content 1fr;
    -ms-grid-rows: max-content max-content 1fr;
    grid-template-rows: -webkit-max-content -webkit-max-content 1fr;
    grid-template-rows: max-content max-content 1fr;
    overflow-x: unset
  }
}
.productModal__ttl {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 2/1/3/2;
  padding-bottom: 15px;
  margin-bottom: 20px
}
@media only screen and (min-width: 769px) {
  .productModal__ttl {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 2/2/3/3;
    margin-bottom: 0
  }
}
.productModal__ttl::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #333;
  position: absolute;
  left: 0;
  bottom: 0
}
.productModal__ttl > .c-lineUp__enName {
  font-weight: 700;
  margin-top: 10px;
  text-align: left;
}
.productModal__ttl > span:not(.c-lineUp__enName) {
  font-size: 13px
}
@media only screen and (min-width: 769px) {
  .productModal__detail {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 3/2/4/3
  }
}
.productModal__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  margin-top: 20px
}
.productModal__desc:not(:first-child) {
  margin-top: 15px
}
.productModal__brand {
  font-size: 15px;
  font-weight: 900;
  margin-top: 20px
}
.productModal__brandList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  grid-gap: 5px;
  margin-top: 15px
}
.productModal__brandName {
  display: inline-block;
  height: 23px;
  line-height: 23px;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  border-radius: 25px;
  padding: 0 10px
}
.c-cvContent {
  display: -ms-grid;
  display: grid
}
.c-cvContent--contact {
  width: 100%;
  grid-row-gap: 25px
}
@media only screen and (min-width: 769px) {
  .c-cvContent--contact {
    grid-row-gap: 20px
  }
}
.c-cvContent--modal {
  grid-row-gap: 20px
}
@media only screen and (min-width: 769px) {
  .c-cvContent--modal {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: 4/1/5/3
  }
}
.c-cvBtn--modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(200px, 27vw, 265px);
  height: 45px;
  font-size: 18px;
  font-weight: 900;
  border-radius: 30px;
  margin: 30px auto 0
}
@media only screen and (min-width: 769px) {
  .c-cvBtn--modal {
    height: 55px;
    font-size: 20px;
    margin-top: 28px
  }
}
.c-cvLink {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  grid-row-gap: 10px
}
@media only screen and (min-width: 769px) {
  .c-cvLink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column-gap: 10px;
    font-size: 18px
  }
}
.c-cvLink > a {
  font-size: 20px;
  text-decoration: underline
}
@media only screen and (min-width: 769px) {
  .c-cvLink > a {
    font-size: 22px;
    text-decoration: none;
    cursor: default;
    pointer-events: none
  }
}
.swiper {
  width: 100%;
  overflow: hidden
}
.swiper-slide {
  width: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.swiper-slide img {
  width: 100%;
  height: auto;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
.swiper-button-prev, .swiper-button-next {
  width: 20px !important;
  height: 50px !important;
  color: #fff !important;
  background: rgba(51, 51, 51, .8)
}
.swiper-button-prev::after, .swiper-button-next::after {
  font-weight: 900;
  font-size: 11px !important
}
.swiper-button-prev {
  left: 0 !important
}
.swiper-button-next {
  right: 0 !important
}
.swiper--main {
  width: 100%;
  min-height: 165px
}
@media only screen and (min-width: 769px) {
  .swiper--main {
    height: auto;
    max-height: 240px
  }
}
.imgWrap {
  max-width: 290px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  margin-left: auto;
  margin-right: auto
}
@media only screen and (min-width: 769px) {
  .imgWrap {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 2/1/4/2;
    max-width: 425px
  }
}
.swiper--thumbnail {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
@media only screen and (min-width: 769px) {
  .swiper--thumbnail {
    margin-top: 20px
  }
}
.swiper--thumbnail .swiper-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  grid-row-gap: 12px
}
.swiper--thumbnail .swiper-slide {
  width: 65px !important;
  height: auto
}
@media only screen and (min-width: 769px) {
  .swiper--thumbnail .swiper-slide {
    width: 97px !important;
    cursor: pointer
  }
}
.swiper--thumbnail .swiper-slide-thumb-active {
  border: 2px solid #585858
}
.swiper--thumbnail img {
  width: 100%;
  max-width: none !important;
  height: auto
}
.faqArea {
  max-width: 900px;
  margin: 50px auto 0
}
@media only screen and (min-width: 769px) {
  .faqArea {
    margin-top: 70px
  }
}
.faq {
  position: relative
}
.faq:not(:last-child) {
  border-bottom: solid 1px #333;
  margin-bottom: 17.5px
}
.faq__toggle {
  display: none
}
.faq__question, .faq__answer {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all .3s;
  transition: all .3s
}
.faq__question {
  padding-bottom: 20px;
  display: block;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer
}
@media only screen and (min-width: 769px) {
  .faq__question {
    font-size: 20px
  }
}
.faq__question span:not(.faq__toggleIcon) {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-item-align: baseline;
  align-self: baseline;
  position: relative;
  top: -2px;
  width: 26px;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  text-align: right
}
@media only screen and (min-width: 769px) {
  .faq__question span:not(.faq__toggleIcon) {
    top: 0
  }
}
.faq__question .faq__toggleIcon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #333;
  position: absolute;
  top: 0;
  right: 0
}
.faq__question .faq__toggleIcon:after, .faq__question .faq__toggleIcon:before {
  content: "";
  position: absolute;
  right: 50%;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2px;
  height: .75rem;
  background-color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s
}
.faq__question .faq__toggleIcon:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}
.faq__questionInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 20px
}
.faq__questionTxt {
  width: 72%
}
@media only screen and (min-width: 769px) {
  .faq__questionTxt {
    width: 89%
  }
}
.faq__answer {
  max-height: 0;
  overflow: hidden
}
.faq__answer span {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 26px;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  text-align: right;
  position: relative;
  top: 7px
}
@media only screen and (min-width: 769px) {
  .faq__answer span {
    top: 5px
  }
}
.faq__answerInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  grid-column-gap: 20px
}
.faq__toggle:checked ~ .faq__answer {
  max-height: 500px;
  -webkit-transition: all 1.5s;
  transition: all 1.5s
}
.faq__answerTxt {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding-bottom: 35px;
  line-height: 1.8
}
@media only screen and (min-width: 769px) {
  .faq__answerTxt {
    font-size: 16px
  }
}
.faq__toggle:checked + .faq__question .faq__toggleIcon:before {
  -webkit-transform: rotate(90deg) !important;
  transform: rotate(90deg) !important
}

@media only screen and (min-width: 769px) {
  .faq__question .faq__questionTxt h3 {
	font-size: 20px
  }
}

.faq__question h3 {
	font-size: 18px;
}