@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=noto+sans+JP+New:wght@300;400;500;700;900&display=swap");
:root {
  --font-fam: 'noto sans JP';
  --theme-color: #fff;
  --font-color: #111;
}

@view-transition {
  navigation: auto;
}
body,
input,
textarea {
  font-family: var(--font-fam), sans-serif;
  color: var(--font-color);
}

body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  background: url(../img/bg.png);
  background-size: 100%;
}
@media (min-width: 768px) {
  body {
    background-size: 50%;
  }
}

img {
  width: 100%;
}

.br-sp {
  display: block;
}
@media (min-width: 1024px) {
  .br-sp {
    display: none;
  }
}
.br-pc {
  display: none;
}
@media (min-width: 1024px) {
  .br-pc {
    display: block;
  }
}

#top-back {
  width: 25px;
  position: fixed;
  right: 20px;
  bottom: 61.5px;
  z-index: 11;
  cursor: pointer;
}
@media (min-width: 1024px) {
  #top-back {
    width: 40px;
    right: 30px;
    bottom: 20px;
  }
}

.fv {
  position: relative;
}

.fv__contents {
  width: 100%;
  height: 100%;
  padding-inline: 4.26%;
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 768px) {
  .fv__contents {
    padding-inline: 1.66%;
  }
}
.fv__contents .txt01 {
  width: 53.01vw;
  position: absolute;
  top: 2.66vw;
  transform: rotate(22deg);
}
@media (min-width: 768px) {
  .fv__contents .txt01 {
    width: 31.2vw;
    top: 2.44vw;
    left: calc(50% + 1.41vw);
    transform: translateX(-50%) rotate(12deg);
  }
}
.fv__contents .txt02 {
  width: 24.53vw;
  position: absolute;
  top: 49.06vw;
}
@media (min-width: 768px) {
  .fv__contents .txt02 {
    width: 11.09vw;
    top: 33.28vw;
    left: calc(50% - 5.545vw - 0.93vw);
    transform: translateX(-50%);
  }
}
.fv__contents .image {
  width: 44.16vw;
  position: absolute;
  left: 50%;
  bottom: -58.67vw;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .fv__contents .image {
    width: 24.34vw;
    top: 6.61vw;
    left: 6.71vw;
    transform: none;
  }
}
.fv__contents .txt01,
.fv__contents .txt02,
.fv__contents .image {
  opacity: 0;
}

.fv_image_active {
  animation: popup_image 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (min-width: 768px) {
  .fv_image_active {
    animation: popup_image_pc 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

.fv_txt01_active {
  animation: popup_txt01 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (min-width: 768px) {
  .fv_txt01_active {
    animation: popup_txt01_pc 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

.fv_txt02_active {
  animation: popup_txt02 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (min-width: 768px) {
  .fv_txt02_active {
    animation: popup_txt02_pc 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

@keyframes popup_image {
  0% {
    transform: translateX(-50%) translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup_image_pc {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup_txt01 {
  0% {
    transform: translateY(40px) scale(0.8) rotate(22deg);
    opacity: 0;
  }
  60% {
    transform: translateY(0) scale(1.2) rotate(22deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(22deg);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup_txt01_pc {
  0% {
    transform: translateX(-50%) translateY(40px) scale(0.8) rotate(12deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) translateY(0) scale(1.2) rotate(12deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(12deg);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup_txt02 {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup_txt02_pc {
  0% {
    transform: translateX(-50%) translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
:root {
  --inner-margin: 32px;
  --inner-max: 1200px;
}
@media (min-width: 768px) {
  :root {
    --inner-margin: 7.5%;
  }
}
@media (min-width: 1024px) {
  :root {
    --inner-margin: 15%;
  }
}

.inner {
  width: min(100% - var(--inner-margin), var(--inner-max));
  margin-left: auto;
  margin-right: auto;
  transition: width 0.2s;
}

.contents-popup {
  opacity: 0;
}
.contents-popup.active {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.txt-popup {
  opacity: 0;
}
.txt-popup.active {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
.fv__fukidashi {
  width: min(91.47%, 1200px);
  margin-top: 34.66vw;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .fv__fukidashi {
    margin-top: 0;
    margin-top: -8.18vw;
    position: relative;
    z-index: 5;
  }
}

.intro {
  padding-top: clamp(1.6rem, 2.08vw, 3.2rem);
  position: relative;
}
.intro::before {
  content: "";
  display: block;
  width: 100%;
  height: 8.06vw;
  background: url(../img/intro/bg.svg) repeat-x;
  background-size: 15.08vw auto;
  background-position: 0 center;
  position: absolute;
  bottom: 28vw;
  left: 0;
  animation: bgLoop 2.5s linear infinite;
}
@media (min-width: 768px) {
  .intro::before {
    height: min(9.37vw, 179.99px);
    background-size: 17.5vw auto;
    bottom: min(18.17vw, 349px);
    animation: bgLoopTab 5s linear infinite;
  }
}
.intro::after {
  content: "";
  display: block;
  width: 100%;
  height: 8.06vw;
  background: url(../img/intro/bg.svg) repeat-x;
  background-size: 15.08vw auto;
  background-position: 0 center;
  position: absolute;
  bottom: 16.26vw;
  left: 0;
  animation: bgLoop 2.5s linear infinite;
  animation-direction: reverse;
}
@media (min-width: 768px) {
  .intro::after {
    height: min(9.37vw, 179.99px);
    background-size: 17.5vw auto;
    bottom: min(6.09vw, 117px);
    animation: bgLoopTab 5s linear infinite;
    animation-direction: reverse;
  }
}
.intro {
  /* SP用 */
}
@keyframes bgLoop {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -15.09vw center;
  }
}
.intro {
  /* PC用 */
}
@keyframes bgLoopTab {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -17.5vw center;
  }
}
.intro__inner {
  width: min(91.47%, 1200px);
  margin-inline: auto;
}
.intro__inner h2 {
  width: clamp(26.9rem, 35.02vw, 69.3rem);
  margin-inline: auto;
  position: relative;
  z-index: 10;
}
.intro__contents {
  position: relative;
  z-index: 5;
  margin-top: -7px;
}
@media (min-width: 768px) {
  .intro__contents {
    margin-top: -2.66vw;
  }
}
.intro__contents .img_box {
  width: min(69.97%, 700px);
  margin-inline: auto;
}
.intro__contents .txt01 {
  width: min(28.26vw, 350px);
  position: absolute;
  top: 5.06vw;
  left: 0;
}
@media (min-width: 768px) {
  .intro__contents .txt01 {
    top: min(1.36vw, 26.3px);
  }
}
.intro__contents .txt02 {
  width: min(28.26vw, 350px);
  position: absolute;
  top: 6.93vw;
  right: 0;
}
@media (min-width: 768px) {
  .intro__contents .txt02 {
    top: min(2.65vw, 51px);
  }
}

.use {
  padding-top: clamp(6.4rem, 8.33vw, 12.8rem);
  overflow: clip;
}
.use__inner {
  width: 100%;
  margin-inline: auto;
}
.use__inner h2 {
  width: clamp(34.6rem, 45.05vw, 96.597rem);
  margin-inline: auto;
  position: relative;
  z-index: 10;
}
.use .slider--box {
  position: relative;
}

.use--slider {
  margin-top: 40px;
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) {
  .use--slider {
    margin-top: min(3.95vw, 76px);
  }
}
.use--slider .slick-list {
  overflow: visible !important;
  transform: none !important;
}
.use--slider .slick-track {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10.8vw;
  will-change: transform;
}
@media (min-width: 768px) {
  .use--slider .slick-track {
    gap: min(9.92vw, 127px);
  }
}
.use--slider .click-cloned {
  display: none !important;
}
.use--slider .item {
  width: 48vw;
  will-change: transform;
  transform: translateZ(0);
}
@media (min-width: 768px) {
  .use--slider .item {
    width: min(37.44vw, 479px);
  }
}
.use--slider .item .img_box {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.use--slider .item.slick-center .img_box {
  transform: scale(1.333);
}
@media (min-width: 768px) {
  .use--slider .item.slick-center .img_box {
    transform: scale(1.43);
  }
}

.use--slider-sub {
  width: 32vw;
  position: absolute;
  right: 2.66vw;
  top: 28.53vw;
}
@media (min-width: 768px) {
  .use--slider-sub {
    width: min(27.34vw, 350px);
    top: min(14.16vw, 272px);
    right: calc(50% - (8.43vw + min(27.34vw, 350px)));
  }
}

.use--slider-dots {
  margin-top: 13.33vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 1.3vw, 1.6rem);
}
@media (min-width: 768px) {
  .use--slider-dots {
    margin-top: min(10.39vw, 133px);
  }
}
.use--slider-dots li {
  width: clamp(1rem, 1.3vw, 1.6rem);
  height: clamp(1rem, 1.3vw, 1.6rem);
  border-radius: 50%;
  border: solid 2px #0054A7;
  background-color: #fff;
}
.use--slider-dots li button {
  appearance: none;
  display: none;
}
.use--slider-dots li.slick-active {
  background: #0054A7;
}