@charset 'utf-8';

.c-heading-top {
  margin-bottom: 5.128vw;
  font-size: var(--fs-50);
}

.index {
  text-align: center;
}
.mv {
  position: relative;
  aspect-ratio: 390 / 741;
}
.mv::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/frame_sp.svg) left top / 100% auto no-repeat;
  pointer-events: none;
  z-index: 1;
}
.mv__logo {
  position: absolute;
  top: 2.7vw;
  left: 2vw;
  width: 38.76vw;
  z-index: 2;
}
.mv__movieWrap {
  position: relative;
  width: 100%;
  height: 91.9%;
  overflow: hidden;
}
.mv__movieWrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.mv__marquee {
  position: relative;
  margin-top: -3.897vw;
  overflow: hidden;
  z-index: 1;
}
.mv__marqueeContainer {
  display: flex;
  width: max-content;
}
.mv__marqueeInner {
  display: flex;
  align-items: center;
  gap: 0 2.564vw;
  width: fit-content;
  white-space: nowrap;
  animation: marquee-left 40s linear infinite;
}
@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.mv__marqueeInner--logo {
  width: 5.128vw;
}
.mv__marqueeInner--text {
  font-size: var(--fs-16);
}
.mv__marqueeInner--text02 {
  font-size: var(--fs-12);
}

.tec {
  margin-top: -15vw;
  padding-block: 14vw 0;
}
.tec__title::after {
  content: '';
  position: absolute;
  top: 12vw;
  left: 0;
  width: 100%;
  height: 23.846vw;
  background: url(../img/about_title_bg.svg) repeat-x;
  background-size: auto 100%;
  animation: marquee-bg 20s linear infinite;
  z-index: -1;
}
@keyframes marquee-bg {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -390px; /* SVG幅 */
  }
}
.tec__lead {
  position: relative;
  font-size: var(--fs-16);
  line-height: 1.8;
  z-index: 1;
}
.tec__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26.667vw 0;
  padding-top: 14.103vw;
}
.tec__detailImg {
  position: relative;
  width: 61.026vw;
}
.tec__detailImg::before,
.tec__detailImg::after {
  content: '';
  position: absolute;
}
.tec__detailImg::before {
  left: -17vw;
  bottom: -12vw;
  width: 31.026vw;
  height: 33.333vw;
  background: url(../img/pattern_plus_sp.svg) no-repeat;
  z-index: 1;
}
.tec__detailImg::after {
  left: -1.051vw;
  bottom: -18vw;
  width: 126.154vw;
  height: 20.513vw;
  background: url(../img/about_text_bg.svg) left top / contain no-repeat;
  z-index: -1;
}
.tec__detailImgSlide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  animation: fadeInOut 12s infinite;
}
.tec__detailImgSlide:nth-child(1) {
  position: relative;
  animation-delay: 0s;
}
.tec__detailImgSlide:nth-child(2) {
  animation-delay: 3s;
}
.tec__detailImgSlide:nth-child(3) {
  animation-delay: 6s;
}
.tec__detailImgSlide:nth-child(4) {
  animation-delay: 9s;
}
@keyframes fadeInOut {
  0%   { opacity: 0; }
  4%  { opacity: 1; }
  24%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}
.tec__detailImg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: drop-shadow(0px 4px 40px rgba(115,107,235,0.4));
}
.tec__detailText {
  position: relative;
  width: 89.744vw;
  margin-inline: auto;
  text-align: left;
}
.tec__detailText::before {
  content: '';
  position: absolute;
  top: 0;
  left: 19.744vw;
  width: 1px;
  height: 100%;
  background-color: #D5DDDF;
}
.tec__detailTextItem {
  position: relative;
  padding: 3.846vw 0 3.846vw 25.128vw;
}
.tec__detailTextItem + .tec__detailTextItem {
  border-top: solid 1px #D5DDDF;
}
.tec__detailTextItem::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.tec__detailTextItem--01::before {
  left: 2.308vw;
  width: 12.308vw;
  height: 10.769vw;
  background: url(../img/about_icon01.svg) left top / 100% no-repeat;
}
.tec__detailTextItem--02::before {
  left: 3.333vw;
  width: 12.051vw;
  height: 7.179vw;
  background: url(../img/about_icon02.svg) left top / 100% no-repeat;
}
.tec__detailTextItem--03::before {
  left: 4.308vw;
  width: 9.308vw;
  height: 9.308vw;
  background: url(../img/about_icon03.svg) left top / 100% no-repeat;
}
.tec__detailTextItem--04::before {
  left: 4.308vw;
  width: 9.308vw;
  height: 10.179vw;
  background: url(../img/about_icon04.svg) left top / 100% no-repeat;
}
.tec__detailText dt {
  font-size: var(--fs-16);
  line-height: 1.3;
}
.tec__detailText dd {
  margin-top: 1em;
  font-size: var(--fs-12);
  line-height: 1.7;
}

.tec02 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.tec02 .tec02__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.75);
  filter: blur(0px);
  z-index: 0;
  will-change: transform, filter; /* ブラウザのレンダリング最適化 */
}
.tec02 .tec02__bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #736beb 1px, transparent 1px);
  background-position: 0 0;
  background-size: 37px 37px;
}
.tec02 .tec02__bg img {
  height: 100%;
  object-fit: cover;
}
.tec02__scrollArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  color: #fff;
  text-align: center;
  z-index: 9;
  transform: translateY(60px);
  scale: .8;
  will-change: transform, opacity;
}
.tec02__scrollAreaImg {
  width: 41.026vw;
  margin-inline: auto;
}
.tec02__title,
.tec02__text {
  padding-inline: 5.128vw;
}
.tec02__title {
  position: relative;
  margin-block: 10.256vw 5.128vw;
  padding-top: 21.28vw;
  font-size: var(--fs-17);
  line-height: 1.6;
  text-align: left;
}
.tec02__title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 15.385vw;
  height: 13.59vw;
  margin: auto;
  background: url(../img/about_icon03_ye.svg) left top / contain no-repeat;
}
.tec02__text {
  font-size: var(--fs-14);
  line-height: 1.8;
  text-align: left;
}
.tec02__introImgWrap {
  margin-top: 4.385vw;
  overflow-x: auto;
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
 /*Google Chrome、Safariへの対応*/
.tec02__introImgWrap::-webkit-scrollbar {
  display: none;
}
.tec02__introImg {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}
.tec02__introImg li {
  width: 57.949vw;
}
.tec02__introImg li p {
  padding-inline: 4.5vw;
  font-size: var(--fs-13);
  line-height: 1.6;
  text-align: left;
}

.voice {
  padding-block: 17.949vw;
}
.voice__title {
  margin-bottom: 11.538vw;
}

.howtouse {
  padding-block: 17.949vw;
  background: url(../img/pattern_plus_wh.svg) left top / 160px 160px #736beb;
}
.howtouse__title,
.howtouse__lead,
.howtouse__infoWrap {
  color: #fff;
}
.howtouse__title {
  margin-bottom: 10.256vw;
}
.howtouse__lead {
  margin-bottom: 5.385vw;
  font-size: var(--fs-16);
  line-height: 1.5;
}
.howtouse__infoWrap {
  margin-bottom: 7.385vw;
}
.howtouse__info,
.howtouse__infoBox {
  display: flex;
  justify-content: center;
}
.howtouse__info {
  gap: 0 2vw;
}
.howtouse__infoBox {
  gap: 0 2vw;
  width: 44vw;
  padding: .5em 1em;
  border: solid 2px #fff;
  border-radius: 10.256vw;
  font-size: var(--fs-16);
}
.howtouse__info dt {
  font-weight: normal;
}
.howtouse__infoNote {
  margin-top: 1em;
  font-size: var(--fs-13);
}
.howtouse__stepScroll {
  overflow-x: auto;
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
 /*Google Chrome、Safariへの対応*/
.howtouse__stepScroll::-webkit-scrollbar {
  display: none;
}
.howtouse__stepWrap {
  display: flex;
  gap: 0 3.846vw;
  width: 229.23vw;
  margin-inline: 5.128vw;
}
.howtouse__step {
  width: 73.846vw;
  padding-bottom: 5.641vw;
  background-color: #fff;
  border-radius: 2.564vw;
  text-align: left;
  overflow: hidden;
}
.howtouse__stepTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 41.538vw;
  margin-bottom: 4.103vw;
  color: var(--color-lime);
  font-size: var(--fs-30);
}
.howtouse__step--01 .howtouse__stepTitle {
  background: url(../img/use_img_step01.jpg) left top / cover no-repeat;
}
.howtouse__step--02 .howtouse__stepTitle {
  background: url(../img/use_img_step02.jpg) left top / cover no-repeat;
}
.howtouse__step--03 .howtouse__stepTitle {
  background: url(../img/use_img_step03.jpg) left top / cover no-repeat;
}
.howtouse__stepTitle span {
  font-size: var(--fs-90);
}
.howtouse__stepInner {
  padding: 0 4.872vw;
}
.howtouse__stepLead {
  font-size: var(--fs-16);
  font-weight: bold;
}
.howtouse__stepText {
  margin-top: 1em;
  font-size: var(--fs-13);
  line-height: 1.6;
}
.howtouse__stepBtn {
  position: relative;
  margin-top: 4.359vw;
  font-size: var(--fs-13);
}
.howtouse__stepBtn--line {
  color: #fff;
}
.howtouse__stepBtn a {
  display: block;
  padding: 2.564vw 5.128vw;
  border-radius: 10.256vw;
}
.howtouse__stepBtn--line a {
  background-color: #06C755;
}
.howtouse__stepBtn a::after {
  content: '';
  position: absolute;
  top: 0;
  right: 4vw;
  bottom: 0;
  width: 8.205vw;
  height: 2.251vw;
  margin: auto;
  background: url(../common/img/icon_arrow_wh.svg) left top / contain no-repeat;
}

.stores {
  position: relative;
  padding: 12.821vw 5.897vw 107vw;
  background: url(../img/bg_stores_sp.jpg) left top / 100% auto no-repeat;
  color: #fff;
  text-align: left;
}
.stores__title {
  margin-bottom: 11.026vw;
  font-size: var(--fs-50);
}
.stores__lead {
  margin-bottom: 3.333vw;
  font-size: var(--fs-28);
  font-weight: bold;
  line-height: 1.5;
}
.stores__lead span {
  display: block;
  margin-bottom: .25em;
  color: var(--color-lime);
  font-size: var(--fs-12);
}
.stores__text {
  font-size: var(--fs-16);
}
.stores__btn {
  position: relative;
  width: 53.077vw;
  margin: 11.795vw 0 0 auto;
  color: var(--color-lime);
  font-size: var(--fs-16);
}
.stores__btn a {
  display: block;
  padding: 3.333vw 3.846vw;
  background-color: var(--color-purple);
  border-radius: 7.692vw;
}
.stores__btn a::after {
  content: '';
  position: absolute;
  top: 0;
  right: 4vw;
  bottom: 0;
  width: 8.205vw;
  height: 2.251vw;
  margin: auto;
  background: url(../common/img/icon_arrow_ye.svg) left top / contain no-repeat;
}

.news {
  padding-block: 20.513vw;
}
.news__title {
  margin-bottom: 21.795vw;
}
.news__list {
  width: 89.744vw;
  margin-inline: auto;
  text-align: left;
}
.news__list li {
  margin-bottom: 4.615vw;
  padding-bottom: 4.615vw;
  border-bottom: solid 1px #000;
}
.news__list li a {
  display: block;
  padding-right: 8vw;
}
.news__listDate {
  display: block;
  margin-bottom: .5em;
  font-size: var(--fs-18);
}
.news__listText {
  position: relative;
  font-size: var(--fs-14);
  line-height: 1.5;
}
.news__listText::after {
  content: '';
  position: absolute;
  top: 0;
  right: -8vw;
  bottom: 0;
  width: 5.128vw;
  height: 2.251vw;
  margin: auto;
  background: url(../common/img/icon_arrow_bl.svg) left top / contain no-repeat;
}

.global-footer {
  margin-top: 0;
}

@media screen and (max-width: 767px) {

  .tec__title {
    position: sticky;
    top: 0;
    padding-top: 11vw;
  }
  .tec__title::before {
    content: '';
    position: absolute;
    top: -18vw;
    left: 0;
    width: 100%;
    height: 72vw;
    background: url(../img/about_shadow.svg) left top / 100% 100% no-repeat;
    z-index: -2;
  }
  .tec__title::after {
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .tec__title.is-sticky::after {
    opacity: 0;
  }
  .js-sticky-marker {
    display: block;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .tec__detail {
    overflow: hidden;
  }
  .tec__detailImg,
  .tec__detailText {
    z-index: -1;
  }

  .tec02__introImgWrap {
    padding-block: 4vw 6vw; /* scale時に上下が切れにくいように */
  }
  .tec02__introImg li {
    flex: 0 0 auto;
  }
  .tec02__introImg li img {
    transition: transform 0.3s ease;
    transform-origin: center center;
  }
  .tec02__introImg li.is-active img {
    transform: scale(1.2);
  }

}

@media screen and (min-width: 768px) {

  .c-heading-top {
    margin-block: 0 2.917vw;
    font-size: var(--fs-90);
  }

  .index {
    overflow: hidden;
  }
  .mv {
    aspect-ratio: 1440 / 985;
  }
  .mv::before {
    background: url(../img/frame_pc.svg) left top / 100% no-repeat;
  }
  .mv__logo {
    top: 1.25vw;
    left: 1.25vw;
    width: 14.236vw;
  }
  .mv__movieWrap {
    height: 81.2%;
  }
  .mv__marquee {
    margin-top: .2vw;
  }
  .mv__marqueeInner {
    gap: 0 1.25vw;
  }
  .mv__marqueeInner--logo {
    width: 2.014vw;
  }
  .mv__marqueeInner--text {
    font-size: var(--fs-18);
  }
  .mv__marqueeInner--text02 {
    font-size: var(--fs-14);
  }

  .tec {
    margin-top: -7vw;
    padding-block: 130px 223px;
    background: linear-gradient(to bottom, #D5DDDF, #fff);
    overflow: hidden;
  }
  .tec__title {
    position: relative;
    z-index: 0;
  }
  .tec__title::after {
    top: 20px;
    height: 176px;
  }
  .tec__lead {
    font-size: var(--fs-24);
    line-height: 1.8;
  }
  .tec__detail {
    justify-content: center;
    flex-direction: initial;
    gap: 0 83px;
    padding-top: 103px;
  }
  .tec__detailImg {
    max-width: 531px;
    z-index: 0;
  }
  .tec__detailImg::before {
    left: -83px;
    bottom: -120px;
    width: 361px;
    height: 333px;
    background: url(../img/pattern_plus_pc.svg) no-repeat;
  }
  .tec__detailImg::after {
    left: 198px;
    bottom: -193px;
    width: 1254px;
    height: 204px;
  }
  .tec__detailImg img {
    filter: drop-shadow(0px 4px 60px rgba(115,107,235,0.6));
  }
  .tec__detailText {
    max-width: 617px;
    margin-inline: 0;
  }
  .tec__detailText::before {
    left: 147px;
  }
  .tec__detailTextItem {
    padding: 33px 0 33px 186px;
  }
  .tec__detailTextItem--01::before {
    left: 37px;
    width: 70px;
    height: 62px;
  }
  .tec__detailTextItem--02::before {
    left: 37px;
    width: 84px;
    height: 50px;
  }
  .tec__detailTextItem--03::before {
    left: 37px;
    width: 70px;
    height: 70px;
  }
  .tec__detailTextItem--04::before {
    left: 37px;
    width: 71px;
    height: 71px;
  }
  .tec__detailText dt {
    font-size: var(--fs-22);
  }
  .tec__detailText dd {
    font-size: var(--fs-13);
  }
  .tec02 .tec02__bg::after {
    background-size: 47px 47px;
  }
  .tec02__boxWrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 9.028vw;
    justify-content: center;
    margin-top: 11.806vw;
  }
  .tec02__scrollAreaImg {
    width: 24.028vw;
    margin-inline: 0;
  }
  .tec02__box {
    width: 44.236vw;
  }
  .tec02__title,
  .tec02__text {
    padding-inline: 0;
  }
  .tec02__title {
    margin-block: 0 1.736vw;
    padding-top: 6.25vw;
    font-size: var(--fs-32);
  }
  .tec02__title::before {
    width: 5.556vw;
    height: 4.931vw;
    margin-left: 0;
  }
  .tec02__text {
    font-size: var(--fs-21);
  }
  .tec02__introImgWrap {
    margin-top: 9.444vw;
    padding-inline: 7.431vw;
  }
  .tec02__introImg {
    width: 100%;
  }
  .tec02__introImg li {
    width: 25%;
  }
  .tec02__introImg li p {
    padding-inline: 2.5vw;
    font-size: var(--fs-14);
  }

  .voice {
    padding-block: 148px 164px;
  }

  .howtouse {
    padding-block: 150px 143px;
    background: url(../img/pattern_plus_wh.svg) left top / 200px 200px #736beb;
  }
  .howtouse__lead {
    margin-bottom: 30px;
    font-size: var(--fs-24);
  }
  .howtouse__infoWrap {
    margin-bottom: 45px;
  }
  .howtouse__info {
    gap: 0 30px;
  }
  .howtouse__infoBox {
    width: 250px;
    font-size: var(--fs-18);
  }
  .howtouse__infoNote {
    font-size: var(--fs-15);
  }
  .howtouse__stepWrap {
    gap: 0 19px;
    max-width: 1178px;
    width: auto;
    margin-inline: auto;
  }
  .howtouse__step {
    width: 32.5%;
    padding-bottom: 25px;
    border-radius: 10px;
  }
  .howtouse__stepTitle {
    margin-bottom: 21px;
    height: 214px;
    font-size: var(--fs-41);
  }
  .howtouse__stepTitle span {
    font-size: var(--fs-124);
  }
  .howtouse__stepInner {
    padding-inline: 25px;
  }
  .howtouse__stepLead {
    font-size: var(--fs-18);
  }
  .howtouse__stepText {
    font-size: var(--fs-16);
  }
  .howtouse__stepBtn {
    width: 261px;
    margin-top: 19px;
    font-size: var(--fs-14);
  }
  .howtouse__stepBtn a {
    padding: 10px 21px;
  }
  .howtouse__stepBtn a::after {
    right: 24px;
    width: 32px;
    height: 8px;
  }

  .stores {
    padding: 7.639vw 0 37.847vw;
    background: url(../img/bg_stores.jpg) left top / cover no-repeat;
  }
  .stores__inner {
    position: relative;
    z-index: 1;
  }
  .stores__title {
    margin: 0 0 0 61px;
    font-size: var(--fs-90);
  }
  .stores__colRight {
    position: absolute;
    top: 0;
    right: 10.903vw;
  }
  .stores__lead {
    margin-bottom: 1.389vw;
    font-size: var(--fs-48);
  }
  .stores__text {
    font-size: var(--fs-18);
  }
  .stores__btn {
    width: 260px;
    margin: 18.889vw 0 0;
  }
  .stores__btn a {
    padding: 1.25vw 1.389vw;
    border-radius: 40px;
  }
  .stores__btn a::after {
    right: 24px;
    width: 32px;
    height: 8px;
  }

  .news {
    padding-block: 9.306vw 9.931vw;
  }
  .news__title {
    margin-bottom: 5.903vw;
  }
  .news__list {
    max-width: 69.444vw;
  }
  .news__list li {
    margin-bottom: 3.125vw;
    padding-bottom: 3.125vw;
  }
  .news__list li a {
    display: flex;
    align-items: center;
    gap: 0 6.25vw;
    padding-right: 5vw;
  }
  .news__listDate {
    margin-bottom: 0;
    transform: translateY(.08em);
  }
  .news__listText {
    flex: 1;
    font-size: var(--fs-18);
  }
  .news__listText::after {
    right: -5vw;
    width: 2.222vw;
    height: .833vw;
  }

}