@charset "UTF-8";
body:before {
  background: none;
}

/***************************************
スプリットレイアウト
****************************************/
.split-all {
  display: block;
}

.split-left, .split-right {
  display: none;
}
@media screen and (min-width: 769px) {
  .split-left, .split-right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: repeating-linear-gradient(330deg, #fefedc, #fefedc 7.5px, #fff 7.5px, #fff 15px);
    position: fixed;
  }
}

@media screen and (min-width: 769px) {
  .split-left {
    width: calc((100% - 375px) * 0.6);
    left: 0;
  }
}

@media screen and (min-width: 769px) {
  .left-images {
    position: relative;
    padding-bottom: 12vw;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }
  .left-images .left-image02, .left-images .left-image03 {
    position: absolute;
    bottom: 0;
    width: 30%;
    height: auto;
  }
  .left-images .left-image02 {
    left: 20%;
  }
  .left-images .left-image03 {
    right: 20%;
  }
}

.split-center {
  width: 100%;
  background-color: #ffffea;
  box-shadow: 0px 0px 15px -5px #777777;
  z-index: 400;
}
@media screen and (min-width: 769px) {
  .split-center {
    width: 375px;
    padding-top: 60px;
    margin-left: calc((100% - 375px) * 0.6);
  }
}
@media screen and (min-width: 769px) {
  .split-center .sp-gnav {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .split-right {
    width: calc((100% - 375px) * 0.4);
    right: 0;
  }
}

/***************************************
メインビジュアル
****************************************/
#mainVisual {
  width: 100%;
  max-width: 1000px;
  padding: 40px 20px 0;
  position: relative;
  background-color: #ffffea;
}
@media screen and (min-width: 769px) {
  #mainVisual {
    padding-top: 0;
  }
}

.fv {
  padding-top: 24px;
}
.fv .movie-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1270/720;
  margin-bottom: 24px;
}
.fv .movie-image iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1270/720;
  padding: 0;
}
.fv .fv-images {
  width: 100%;
  padding-bottom: 32px;
  position: relative;
}
.fv .fv-images .fv-all {
  width: 100%;
}

@keyframes grow {
  from {
    transform: translate(-50%, 0) scale(0.1);
  }
  to {
    transform: translate(-50%, 0) scale(1);
  }
}
.fv-part {
  position: absolute;
  top: 20%;
  left: calc(50% - 8px);
  transform: translate(-50%, 0%);
  width: 50%;
  height: calc((100vw - 40px) * 0.5 * 147 / 367);
}
@media screen and (min-width: 769px) {
  .fv-part {
    height: 75.1021798365px;
  }
}

.fv-part.animate-grow {
  animation: grow 1s alternate;
}

/***************************************
小さいサイズから拡大
****************************************/
.scaleBefore {
  transform: scale(0.5);
  transition: transform 0.8s;
}

/***************************************
上からふわっと
****************************************/
.noScale {
  opacity: 0;
  transform: translateY(-20px); /* 初期状態で上方向に移動 */
  transition: opacity 0.5s ease, transform 0.5s ease; /* アニメーションの時間とイージングを設定 */
}

.noScale.show {
  opacity: 1;
  transform: translateY(0); /* 上方向への移動をリセットして表示 */
}

/***************************************
米印から始まるテキスト
****************************************/
.t-kome {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/***************************************
斜線ボーダー入り背景
****************************************/
.bg-blue {
  background: repeating-linear-gradient(330deg, #33b7ec, #33b7ec 7.5px, #3dbaed 7.5px, #3dbaed 15px);
}

.bg-yellow {
  background: repeating-linear-gradient(330deg, #ffdd32, #ffdd32 7.5px, #ffd91e 7.5px, #ffd91e 15px);
}

/***************************************
テキスト関連の装飾
****************************************/
.t-pink {
  color: #ff8080;
}

.t-blue {
  color: #64cbdf;
}

.t-oswald {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}

.t-mini {
  font-size: 0.8em;
}

.l-pink {
  background: url(../img/wavy-pink.webp) bottom repeat-x;
  background-size: contain;
  padding-bottom: 2px;
}

.l-blue {
  background: url(../img/wavy-blue.webp) bottom repeat-x;
  background-size: contain;
  padding-bottom: 2px;
}

/***************************************
westerページ　リンクボタン
****************************************/
.desc-link {
  text-align: center;
}
.desc-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 290px;
  height: 55px;
  margin: 0 auto;
  border: 3px solid #000;
  border-radius: 21px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.05em;
}
.desc-link .desc-link-yellow {
  background-color: #ffdd32;
}
.desc-link .desc-link-blue {
  background-color: #0074bf;
  color: #fff;
}

/***************************************
desc-sectionクラス
****************************************/
.desc-section {
  padding-top: 32px;
  padding-bottom: 32px;
}

/***************************************
desc01
****************************************/
.desc01 .desc01-01 {
  width: 40%;
  margin: 0 auto;
}

/***************************************
desc02
****************************************/
.desc02 .desc-link {
  margin-bottom: 24px;
}

.slider {
  width: 90%;
  margin: 0 auto;
  padding: 0;
  display: none;
  /* arrowsカスタム */
}
.slider.slick-initialized {
  display: block;
}
.slider .slick-prev, .slider .slick-next {
  top: 50%;
}
.slider .slick-prev::before, .slider .slick-next::before {
  content: "" !important;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: #000;
  box-sizing: content-box;
  position: absolute;
  top: calc(50% - 5px);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 1;
}
.slider .slick-prev::after, .slider .slick-next::after {
  content: "" !important;
  width: 25px;
  height: 25px;
  border-style: solid;
  border-color: #000;
  border: 1px solid #000;
  border-radius: 50%;
  box-sizing: content-box;
  position: absolute;
  top: calc(50% - 12.5px);
  opacity: 1;
}
.slider .slick-prev::before {
  border-width: 0 0 3px 3px;
  left: calc(50% - 3px);
}
.slider .slick-prev::after {
  left: calc(50% - 12.5px);
}
.slider .slick-next::before {
  border-width: 3px 3px 0 0;
  right: calc(50% - 5px);
}
.slider .slick-next::after {
  left: calc(50% - 12.5px);
}

/***************************************
desc03
****************************************/
.desc03 {
  position: relative;
}
.desc03 .desc03-01 {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  top: 23%;
  left: 10%;
  transform: translate(0, 48px);
}
.desc03 .desc03-02 {
  width: 100%;
  margin-bottom: 16px;
}

/***************************************
desc04
****************************************/
.desc04 {
  position: relative;
}
.desc04 .desc04-bigtext {
  margin-bottom: 24px;
}
.desc04 .desc04-bigtext p {
  width: 100%;
  text-align: center;
  font-size: 28px;
  line-height: 1.2;
}
.desc04 .desc04-bigtext p span {
  font-size: 1.2em;
  letter-spacing: -0.05em;
}
.desc04 .desc04-03 {
  margin-bottom: 8px;
}
.desc04 .desc04-04 {
  width: 80%;
  margin: 0 auto 8px;
}
.desc04 .desc04-text {
  margin-bottom: 16px;
}

/***************************************
desc05
****************************************/
.desc05 .desc05-01 {
  width: 40%;
  margin: 0 auto;
}
.desc05 .desc05-howto {
  width: 100%;
  margin: 36px auto 64px;
}
.desc05 .desc05-howto:last-child {
  margin: 36px auto 32px;
}

/***************************************
desc06
****************************************/
.desc06 {
  background-color: #ffffea;
}
.desc06 .desc06-container {
  width: 93%;
  margin: 0 auto;
}
.desc06 .desc06-title {
  margin: 32px auto 16px;
}
.desc06 .desc06-question {
  margin: 80px auto 40px;
}
.desc06 .desc06-answer {
  margin: 40px auto 64px;
}

/***************************************
desc07
****************************************/
.desc07 {
  background-color: #ffffea;
}
.desc07 .desc07-container {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 32px;
  padding: 32px 10px;
  margin-bottom: 48px;
  position: relative;
}
.desc07 .desc07-container .desc07-title {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  margin: 0 auto;
}
.desc07 .app-kome {
  width: 90%;
  margin: 24px auto;
}
.desc07 .desc07-text01 {
  margin: 20% 0 32px;
}
.desc07 .desc07-text01 p {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.desc07 .desc07-text01 p span {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: -0.06em;
}
.desc07 .app-download {
  display: block;
}
.desc07 .app-download .download-text01 {
  font-size: 18px;
  text-align: center;
}
.desc07 .app-download .download-images {
  display: flex;
  justify-content: space-around;
}
.desc07 .app-download .download-images .download-images-link {
  width: 40%;
}
.desc07 .desc07-app {
  margin-bottom: 48px;
}
.desc07 .desc07-app .desc07-app-image {
  width: 55%;
  margin: 0 auto;
}
.desc07 .desc07-app .desc07-app-text p {
  text-align: center;
  line-height: 1.2;
}
.desc07 .desc07-app .desc07-app-text .app-name {
  font-size: 28px;
  margin-bottom: 8px;
}
.desc07 .desc07-app .desc07-app-text .app-desc {
  font-size: 22px;
  letter-spacing: 0.01em;
  line-height: 1.8;
  margin-bottom: 16px;
}
.desc07 .app-table .app-table-title {
  text-align: center;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.desc07 .app-table table {
  width: 100%;
  background-color: #ecf4f4;
  border-collapse: collapse;
  border: 1.8px solid #000;
  margin-bottom: 8px;
}
.desc07 .app-table th, .desc07 .app-table td {
  border: 0.9px solid #000;
}
.desc07 .app-table th:first-child, .desc07 .app-table td:first-child {
  text-align: left;
  width: 48%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.desc07 .app-table th:not(first-child), .desc07 .app-table td:not(first-child) {
  width: 26%;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  font-weight: 700;
}
.desc07 .app-table thead th, .desc07 .app-table thead td {
  padding: 10px 2px;
}
.desc07 .app-table thead td {
  text-align: center;
}
.desc07 .app-table thead td img {
  width: 55%;
}
.desc07 .app-table tbody th, .desc07 .app-table tbody td {
  padding: 4px 2px;
}
.desc07 .under-table .under-table-text01 {
  text-align: center;
  line-height: 1.8;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 32px;
}
.desc07 .under-table .under-table-text01 span {
  font-size: 1.3em;
  color: #33b7ec;
  text-decoration: underline #33b7ec 5px;
  text-underline-offset: 0.1em;
}
.desc07 .under-table .under-table-text02 {
  text-align: center;
  line-height: 1.4;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
}
.desc07 .under-table .under-table-image {
  margin-bottom: 16px;
}
.desc07 .under-table .under-table-image img {
  padding-left: 10%;
}

/***************************************
desc08
****************************************/
.desc08 .desc08-text {
  margin-bottom: 32px;
}
.desc08 .desc08-text p {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}
.desc08 .desc-link {
  margin-bottom: 64px;
}
.desc08 .desc08-01 {
  width: 90%;
  margin: 0 auto 32px;
}
.desc08 .desc08-02 {
  display: flex;
  position: relative;
  padding-bottom: 52.5333333333vw;
}
@media screen and (min-width: 769px) {
  .desc08 .desc08-02 {
    padding-bottom: 197px;
  }
}
.desc08 .desc08-02 .desc08-left, .desc08 .desc08-02 .desc08-right {
  width: 50%;
}
.desc08 .desc08-02 .desc08-left-image, .desc08 .desc08-02 .desc08-right-image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.desc08 .pagetop-text {
  text-align: center;
}
.desc08 .pagetop-image {
  width: 60px;
  margin: 0 auto;
  height: 60px;
}