@charset "UTF-8";
/*--------------------------------------*
* 基本設定
*--------------------------------------*/
/*--------------------------------------*
* ベースカラー
*--------------------------------------*/
/*--------------------------------------*
* フォント
*--------------------------------------*/
@font-face {
  font-family: "Nimbus Sans";
  src: url(../assets/font/NimbusSanL-Reg.otf);
}
/*--------------------------------------*
* ブレイクポイント
*--------------------------------------*/
/*--------------------------------------*
* vw変換(SP用)
*--------------------------------------*/
/*--------------------------------------*
* vw変換(PC用)
*--------------------------------------*/
/*--------------------------------------*
* デフォルトスタイル
*--------------------------------------*/
html,
body {
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
  font-family: "Nimbus Sans";
}

img,
video,
object {
  width: 100%;
  border: none;
  display: block;
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

/*--------------------------------------*
* aタグ
*--------------------------------------*/
a {
  display: block;
  text-decoration: none;
  transition: all 0.4s;
  color: #000;
}
@media screen and (min-width: 769px) {
  a:hover {
    opacity: 0.6;
    transition: all 0.4s;
  }
}
a[href=""] {
  pointer-events: none;
}

/*--------------------------------------*
* ローディング
*--------------------------------------*/
#loading-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
}

/*-------------------
* コンテンツのスタイル
-------------------*/
/*--------------------------------------*
* 基本設定
*--------------------------------------*/
/*--------------------------------------*
* FV
*--------------------------------------*/
.fv {
  position: relative;
}
.fv .logo {
  position: absolute;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .fv {
    padding-top: 33.3333333333cqi;
  }
  .fv .logo {
    width: 75px;
    height: 75px;
    top: 20px;
    left: 15px;
    mask-image: url(../assets/images/logo.svg);
    background-color: #000;
    mask-repeat: no-repeat;
    mask-size: contain;
  }
}
@media screen and (min-width: 769px) {
  .fv .logo {
    width: 160px;
    height: 160px;
    top: 40px;
    left: 40px;
    mask-image: url(../assets/images/logo.svg);
    background-color: #fff;
    mask-repeat: no-repeat;
    mask-size: contain;
  }
}
/*--------------------------------------*
* 基本設定
*--------------------------------------*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.opacity {
  opacity: 0;
}

@keyframes maskLeft {
  0% {
    mask-position: left;
    -webkit-mask-position: left;
  }
  100% {
    mask-position: right;
    -webkit-mask-position: right;
  }
}
@keyframes maskRight {
  0% {
    mask-position: right;
    -webkit-mask-position: right;
  }
  100% {
    mask-position: left;
    -webkit-mask-position: left;
  }
}
.mask_left {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.mask_right {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.mask_full {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
figure.zoom {
  overflow: hidden;
}

/*--------------------------------------*
* セクション共通
*--------------------------------------*/
#app {
  overflow: hidden;
}

.code_wrapper {
  container-type: inline-size;
}

.plus {
  position: absolute;
  z-index: 10;
  padding: 3.3333333333cqi;
  bottom: 0;
  right: 0;
  width: 3.3333333333cqi;
  height: 3.3333333333cqi;
  transition: all 0.4s;
}
.plus span {
  background-color: #fff;
  width: 1px;
  height: 3.3333333333cqi;
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  transform-origin: center;
}
.plus span:nth-child(2) {
  rotate: 90deg;
}
.plus.small {
  padding: 1.6666666667cqi;
  width: 1.6666666667cqi;
  height: 1.6666666667cqi;
}
.plus.small span {
  height: 1.6666666667cqi;
}
.plus.white span {
  background-color: #fff;
}
.plus.active {
  rotate: 45deg;
}
.plus.active span {
  background-color: #fff;
}

.container {
  position: relative;
}

.sec5 .container,
.sec7 .container,
.sec11 .container,
.sec13 .container,
.sec14 .container,
.sec21 .container,
.sec25 .container {
  pointer-events: none;
}
.sec5 .plus,
.sec7 .plus,
.sec11 .plus,
.sec13 .plus,
.sec14 .plus,
.sec21 .plus,
.sec25 .plus {
  display: none;
}

.credit_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.65);
}
.credit_bg .credit_inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  font-size: 2.8cqi;
}

.credit {
  display: grid;
  gap: 1.3333333333cqi;
}

.credit a {
  color: #d8d8d8;
  letter-spacing: 0.025em;
}

.sec1 {
  margin: 20cqi 0 13.3333333333cqi;
}
.sec1 .container {
  width: 66.6666666667cqi;
  margin: 0 auto 0 6.6666666667cqi;
}

.sec2 {
  margin-bottom: 33.3333333333cqi;
}
.sec2 .grid {
  display: flex;
}

.sec3 {
  margin-bottom: 26.6666666667cqi;
}
.sec3 .container {
  width: 86.6666666667cqi;
  margin: 0 0 0 auto;
}

.sec4 {
  margin-bottom: 56cqi;
}

.sec4 .container,
.sec12 .container,
.sec16 .container,
.sec21 .container,
.sec28 .container {
  width: 86.6666666667cqi;
  margin: 0 auto;
}
.sec4 .grid,
.sec12 .grid,
.sec16 .grid,
.sec21 .grid,
.sec28 .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3333333333cqi;
}

.sec5 {
  margin-bottom: 4cqi;
}
.sec5 .container {
  width: 40cqi;
  margin: 0 6.6666666667cqi 0 auto;
}

.sec6 {
  margin-bottom: 4cqi;
}
.sec6 .container {
  width: 80cqi;
  margin: 0 auto 0 6.6666666667cqi;
}

.sec7 {
  margin-bottom: 33.3333333333cqi;
}
.sec7 .container {
  width: 48cqi;
  margin: 0 6.6666666667cqi 0 auto;
}

.sec8 {
  margin-bottom: 26.6666666667cqi;
}
.sec8 .container {
  width: 85.3333333333cqi;
  margin: 0 auto;
}

.sec9 .container {
  width: 94cqi;
  margin: 0 0 0 auto;
}
.sec9 .grid_six {
  background-color: #000;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8cqi;
  padding: 1.3333333333cqi 0 1.3333333333cqi 1.3333333333cqi;
}

.sec10 {
  margin: 46.6666666667cqi 0 40cqi;
}
.sec10 .container {
  width: 48cqi;
  margin: 0 auto;
}

.sec11 .container {
  width: 84cqi;
}

.sec12 {
  margin: -7.3333333333cqi 0 20cqi;
}

.sec13,
.sec14 {
  margin-top: 2.6666666667cqi;
}
.sec13 .container,
.sec14 .container {
  width: 84cqi;
  margin: 0 5.3333333333cqi 0 auto;
}

.sec15 {
  margin: -7.3333333333cqi 0 20cqi;
}
.sec15 .container {
  width: 53.3333333333cqi;
  margin: 0 9.3333333333cqi 0 auto;
}

.sec17 {
  margin: 6.6666666667cqi 0 20cqi;
}

.sec18,
.sec19 {
  margin-top: 2.6666666667cqi;
}
.sec18 .container,
.sec19 .container {
  width: 66.6666666667cqi;
  margin: 0 auto 0 6.6666666667cqi;
}

.sec20 {
  margin-top: 20cqi;
}
.sec20 .container {
  width: 66.6666666667cqi;
  margin: 0 6.6666666667cqi 0 auto;
}

.sec21 {
  margin: 2.6666666667cqi 0 5.3333333333cqi;
}
.sec21 .container {
  margin: 0 0 0 2.6666666667cqi;
}

.sec22 {
  margin-bottom: 48cqi;
}
.sec22 .container {
  width: 66.6666666667cqi;
  margin: 0 6.6666666667cqi 0 auto;
}

.sec23 {
  margin-bottom: 4cqi;
}
.sec23 .container {
  width: 40cqi;
  margin: 0 auto 0 4cqi;
}

.sec24 .plus {
  right: initial;
  left: 0;
}

.sec25 {
  margin-top: -30cqi;
}
.sec25 .container {
  width: 40cqi;
  margin: 0 8cqi 0 auto;
}

.sec26 {
  margin: 30cqi 0 20cqi;
}
.sec26 .container {
  width: 66.6666666667cqi;
  margin: 0 auto;
}

.sec27 .container {
  width: 53.3333333333cqi;
  margin: 0 0 0 13.3333333333cqi;
}
.sec27 .grid {
  display: grid;
  gap: 1.3333333333cqi;
}

.sec28 {
  margin: 20cqi 0 4cqi;
}

.sec29 .container {
  width: 53.3333333333cqi;
  margin: 0 6.6666666667cqi 0 auto;
}

.lp_footer {
  padding: 200px 0 300px;
}

.view_all {
  font-size: 14px;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  padding: 0 10px 3px;
  border-bottom: 1px solid;
}

@media screen and (max-width: 768px) {
  .code_wrapper {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .code_wrapper {
    margin: 0 auto;
    width: 45.1388888889vw;
  }
  .sec4 {
    margin-bottom: 6cqi;
  }
  .sec5 {
    margin-bottom: 29.3333333333cqi;
  }
  .sec5 .container {
    margin: 0 auto 0 6.6666666667cqi;
  }
  .sec17 .container {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  .sec22 {
    margin-bottom: 4.6666666667cqi;
  }
  .sec23 {
    margin-bottom: 40cqi;
  }
}/*# sourceMappingURL=style.css.map */