@charset "UTF-8";
.new-header {
  opacity: 0;
}

.wrapper {
  overflow-x: clip;
}

body {
  background-image: url("../images/bg.png");
  background-size: 19rem;
  background-color: #51c3ca;
}

h2,
h3 {
  font-family: var(--font-primary);
}

.hero-wrapper {
  max-width: 136.6rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.js-particle {
  background-color: #F08300;
  border-radius: 100%;
  position: absolute;
  opacity: 0.5;
}
.js-particle.type2 {
  background-color: #ED7FA4;
}
.js-particle.type3 {
  background-color: #4083C5;
}
.js-particle.type4 {
  background-color: #96adbf;
}

.js-particle-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.hero {
  color: #fff;
  min-height: 76.6rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rem;
}
@media (max-width: 767px) {
  .hero {
    height: 66.7rem;
    min-height: 66.7rem;
  }
}
.hero__mv {
  width: 50rem;
  position: absolute;
  inset: auto 0 0;
  margin: auto;
  transform: translate(2.5rem, 0);
  z-index: 3;
}
@media (max-width: 1260px) {
  .hero__mv {
    width: 39rem;
  }
}
@media (max-width: 1130px) {
  .hero__mv {
    width: 36rem;
  }
}
@media (max-width: 767px) {
  .hero__mv {
    width: 29.2rem;
    transform: none;
    left: 6.8rem;
    margin: 0;
  }
}
.hero__mv-lead {
  position: absolute;
  width: 12.9rem;
  right: 1.5rem;
  bottom: 14.7rem;
}
.hero__mv-lead img {
  opacity: 0 !important;
}
.hero__mv-lead div {
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  right: -1.4rem;
  top: 0;
}
@media (max-width: 767px) {
  .hero__mv-lead div {
    right: -0.7rem;
  }
}
.hero__mv-lead p {
  font-size: 4.36rem;
  color: #212121;
  writing-mode: vertical-rl;
  font-family: var(--font-primary);
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0.1em;
  overflow: hidden;
  position: relative;
}
@media (max-width: 767px) {
  .hero__mv-lead p {
    font-size: 2.6rem;
  }
}
.hero__mv-lead .hero__mv-lead-text1 span {
  display: inline-block;
  opacity: 0;
  transition: 0.3s;
  transform: translateX(1em);
}
@media (max-width: 767px) {
  .hero__mv-lead .hero__mv-lead-text1 span {
    font-weight: bold;
  }
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(2) {
  transition-delay: 0.15s;
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(3) {
  transition-delay: 0.25s;
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(4) {
  transition-delay: 0.35s;
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(5) {
  transition-delay: 0.45s;
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(6) {
  transition-delay: 0.55s;
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(7) {
  transition-delay: 0.65s;
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(8) {
  transition-delay: 0.75s;
}
.hero__mv-lead .hero__mv-lead-text1 span:nth-child(9) {
  transition-delay: 0.85s;
}
@media (max-width: 767px) {
  .hero__mv-lead .hero__mv-lead-text2 {
    font-weight: bold;
  }
}
.hero__mv-lead .hero__mv-lead-text2 span {
  display: inline-block;
  opacity: 0;
  transition: 0.3s;
  transform: translateX(1em);
}
.hero__mv-lead .hero__mv-lead-text2 span:nth-child(1) {
  transition-delay: 0.95s;
}
.hero__mv-lead .hero__mv-lead-text2 span:nth-child(2) {
  transition-delay: 1.05s;
}
.hero__mv-lead .hero__mv-lead-text2 span:nth-child(3) {
  transition-delay: 1.15s;
}
.hero__mv-lead .hero__mv-lead-text2 span:nth-child(4) {
  transition-delay: 1.25s;
}
.hero__mv-lead .hero__mv-lead-text2 span:nth-child(5) {
  transition-delay: 1.35s;
}
.hero__mv-lead .hero__mv-lead-text2 span:nth-child(6) {
  transition-delay: 1.45s;
}
.hero__mv-lead.is-ok .hero__mv-lead-text1 span {
  opacity: 1;
  transform: translateY(0);
}
.hero__mv-lead.is-ok .hero__mv-lead-text2 span {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 1130px) {
  .hero__mv-lead {
    scale: 0.8;
  }
}
@media (max-width: 767px) {
  .hero__mv-lead {
    width: 7.8rem;
    inset: -12.8rem 1.75rem auto auto;
    scale: 1;
  }
}
.hero__mv-vis {
  position: absolute;
  border: solid #212121 3px;
  border-radius: 2rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .hero__mv-vis {
    border-radius: 1rem;
  }
}
.hero__mv-vis--1 {
  width: 22.8rem;
  inset: 20.8rem auto auto 22.3rem;
}
@media (max-width: 767px) {
  .hero__mv-vis--1 {
    width: 12.6rem;
    inset: 10rem auto auto 2.3rem;
  }
}
.hero__mv-vis--2 {
  width: 46.2rem;
  inset: 13.5rem -10rem auto auto;
}
@media (max-width: 767px) {
  .hero__mv-vis--2 {
    width: 18.2rem;
    inset: 22.8rem auto auto 5.8rem;
  }
}
.hero__mv-vis--3 {
  width: 27.7rem;
  inset: auto auto 8.5rem 13.7rem;
}
@media (max-width: 767px) {
  .hero__mv-vis--3 {
    width: 14.7rem;
    inset: auto auto 15.7rem -1.4rem;
  }
}
.hero__mv-vis--4 {
  width: 19rem;
  inset: auto 8rem 6.8rem auto;
}
@media (max-width: 767px) {
  .hero__mv-vis--4 {
    width: 11.5rem;
    inset: auto -2.2rem 11.7rem auto;
  }
}

.interview {
  position: relative;
  overflow-x: clip;
  padding-bottom: 12rem;
  --logo-gap: 6rem;
}
@media (max-width: 767px) {
  .interview {
    padding-bottom: 0;
  }
}
.interview__title-row {
  display: flex;
  gap: var(--logo-gap);
  margin-left: calc(50% - 50vw);
}
.interview__title-row img {
  animation: holizon-animation1 20s linear infinite;
}
@media (max-width: 767px) {
  .interview__title-row img {
    max-width: none;
    height: 9rem;
  }
}
@keyframes holizon-animation1 {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(calc(-100% - var(--logo-gap)), 0);
  }
}
.interview__headline {
  position: relative;
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  .interview__headline {
    padding-left: 2.5rem;
    margin-bottom: 3.8rem;
  }
}
.interview__headline .c-headline {
  position: absolute;
  inset: 0 auto;
  margin: auto;
  height: fit-content;
}
@media (max-width: 767px) {
  .interview__headline .c-headline {
    inset: 2.2rem auto 0;
    margin: 0;
  }
}

.interview-head {
  display: flex;
  align-items: center;
  gap: 4rem;
  background-position: center bottom;
  background-image: linear-gradient(to right, var(--black) var(--senbun, 4px), transparent var(--kankaku, 4px));
  background-size: calc(var(--senbun, 4px) * 2) 2px;
  background-repeat: repeat-x;
  margin-bottom: 3.15rem;
}
@media (max-width: 767px) {
  .interview-head {
    gap: 1.6rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
  }
}
.interview-head__q {
  font-family: var(--font-en);
  font-size: 6rem;
}
@media (max-width: 767px) {
  .interview-head__q {
    font-size: 3.6rem;
  }
}
.interview-head__q-tit {
  font-size: 2.8rem;
  font-weight: bold;
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .interview-head__q-tit {
    margin-top: 0;
    font-size: 1.6rem;
  }
}

.interview-gallery {
  margin-bottom: 5.5rem;
}
@media (max-width: 767px) {
  .interview-gallery {
    margin-bottom: 7.8rem;
  }
}

.splide__arrow {
  position: static;
  width: 5.4rem;
  height: 5.4rem;
  outline: 0 !important;
  transform: none;
  opacity: 1;
  transition: 0.4s;
}
@media (max-width: 767px) {
  .splide__arrow {
    width: 3.8rem;
    height: 3.8rem;
  }
}
.splide__arrow:hover {
  scale: 0.9;
}
.splide__arrow svg {
  width: 100% !important;
  height: 100% !important;
}

.splide__arrows {
  margin-top: 4.5rem;
  display: flex;
  gap: 2rem;
}
@media (max-width: 767px) {
  .splide__arrows {
    margin-top: 0;
    gap: 1rem;
  }
}

.interview-slider {
  margin-right: -20px;
}
.interview-slider .splide__track {
  margin-right: calc(50% - 50vw);
}
.interview-slider .carousel-progress-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 2.8rem;
  font-weight: normal;
  font-family: var(--font-en);
}
@media (max-width: 767px) {
  .interview-slider .carousel-progress-wrap {
    font-size: 2rem;
    gap: 0.8rem;
    position: relative;
    right: 2rem;
  }
}
.interview-slider .carousel-progress {
  width: 16rem;
  background: #212121;
}
@media (max-width: 767px) {
  .interview-slider .carousel-progress {
    width: 11rem;
  }
}
.interview-slider .carousel-progress-bar {
  background: #f08300;
  height: 2px;
  transition: width 400ms ease;
  width: 0;
}
.interview-slider__options {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .interview-slider__options {
    margin-top: 3.6rem;
  }
}

.inteview-card {
  transition: 0.4s;
}
.inteview-card:hover {
  filter: brightness(0.8);
}
.inteview-card:hover .inteview-card__image-bg {
  background-position: right 0.5rem bottom 1rem;
}
.inteview-card:hover .inteview-card__image-bg::before {
  background-color: #212121;
}
.inteview-card:hover .inteview-card__image-bg::after {
  opacity: 1;
}
.inteview-card__image {
  position: relative;
  height: 31.5rem;
  display: flex;
  margin-bottom: 3.45rem;
}
@media (max-width: 767px) {
  .inteview-card__image {
    height: 21rem;
    height: 19rem;
    margin-bottom: 2.5rem;
  }
}
.inteview-card__image > img {
  position: absolute;
  inset: auto 0 3px;
}
.inteview-card__image-bg {
  width: 42.5rem;
  height: 25rem;
  margin-top: auto;
  background-color: #41a9b1;
  border: solid 3px var(--black);
  overflow: hidden;
  border-radius: 20px;
  transition: 0.4s;
}
.inteview-card__image-bg::after, .inteview-card__image-bg::before {
  content: "";
  width: 4rem;
  height: 4rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_30670%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2030670%22%20transform%3D%22translate(-453%20-1459.549)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_329005%22%20data-name%3D%22%E3%83%91%E3%82%B9%20329005%22%20d%3D%22M14.258%2C0%2C13.066%2C1.192l5.369%2C5.446H0V8.324H18.483L12.99%2C13.741l1.192%2C1.192%2C7.49-7.413-.015-.015.015-.015Z%22%20transform%3D%22translate(461.789%201472.451)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_30555%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2030555%22%20transform%3D%22translate(453%201460)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_30553%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2030553%22%3E%20%3Cg%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_29%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2029%22%20transform%3D%22translate(0%20-0.451)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2219%22%20fill%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  position: absolute;
  inset: auto 1rem 1rem auto;
  background-repeat: no-repeat;
  background-size: 4rem;
  transition: 0.4s;
  z-index: 2;
  border-radius: 100%;
}
@media (max-width: 767px) {
  .inteview-card__image-bg::after, .inteview-card__image-bg::before {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 2.8rem;
  }
}
.inteview-card__image-bg::after {
  opacity: 0;
  background: transparent;
  border: solid 2.5px #212121;
}
@media (max-width: 767px) {
  .inteview-card__image-bg {
    background-size: 2.7rem;
    border-radius: 2rem;
    width: 25rem;
    height: 16.6rem;
  }
  .inteview-card__image-bg img {
    width: 100%;
    height: 100%;
  }
}
.inteview-card__body {
  text-align: left;
}
.inteview-card__subtitle {
  font-weight: bold;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .inteview-card__subtitle {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
}
.inteview-card__title {
  font-size: 4.2rem;
  font-weight: bold;
  font-family: var(--font-en);
}
@media (max-width: 767px) {
  .inteview-card__title {
    font-size: 2.4rem;
    line-height: 3.5rem;
  }
}

.works {
  position: relative;
  overflow-x: clip;
}
.works__inner {
  padding: 12rem 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .works__inner {
    padding: 5.6rem 0 6rem;
  }
}
.works__inner::after {
  content: "";
  background-color: #41a9b1;
  width: calc(100% - 9rem);
  height: 100%;
  border-radius: 9rem 0 0 9rem;
  position: absolute;
  inset: 0 0 0 auto;
}
@media (max-width: 767px) {
  .works__inner::after {
    border-radius: 6rem 0 0 6rem;
    width: calc(100% - 1rem);
  }
}
.works__inner > * {
  position: relative;
  z-index: 3;
}
.works__headline {
  margin-left: 9rem;
}
@media (max-width: 767px) {
  .works__headline {
    margin-left: 3.6rem;
  }
}

.works-slider {
  position: relative;
}
.works-slider__options {
  display: flex;
  margin-top: -9rem;
  margin-left: auto;
  justify-content: end;
}
@media (max-width: 767px) {
  .works-slider__options {
    margin-top: -4rem;
  }
}
.works-slider__options2 {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.works-slider__options2 .splide__arrows {
  gap: 67.2rem;
  margin-top: -2rem;
}
.works-slider .splide__prevbutton,
.works-slider .splide__nextbutton {
  background-color: transparent;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  z-index: 10;
  transition: 0.4s;
}
.works-slider .splide__prevbutton:hover,
.works-slider .splide__nextbutton:hover {
  scale: 0.9;
}
.works-slider .splide__prevbutton svg,
.works-slider .splide__nextbutton svg {
  width: 100%;
  height: 100%;
  display: block;
}
.works-slider .splide__prevbutton {
  transform: scaleX(-1);
}
.works-slider .splide__track {
  z-index: 7;
}

.works-card {
  transition: 0.4s;
  scale: 0.75;
  display: block;
}
@media print, screen and (min-width: 768px) {
  .works-card:hover {
    filter: brightness(0.8);
  }
  .works-card:hover .works-card__image-bg {
    background-position: right 0.5rem bottom 1rem;
  }
  .works-card:hover .works-card__image-bg::before {
    background-color: #212121;
  }
  .works-card:hover .works-card__image-bg::after {
    opacity: 1;
  }
}
.works-card__image {
  position: relative;
  height: 44.6rem;
  display: flex;
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  .works-card__image {
    height: 22.7rem;
  }
}
.works-card__image > img {
  position: absolute;
  inset: auto 0 3px;
  z-index: 2;
}
.works-card__image-bg {
  width: 60rem;
  height: 35.4rem;
  margin-top: auto;
  background-color: #41a9b1;
  border: solid 3px var(--black);
  overflow: hidden;
  border-radius: 2rem;
}
.works-card__image-bg::after, .works-card__image-bg::before {
  content: "";
  width: 5.7rem;
  height: 5.7rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_30670%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2030670%22%20transform%3D%22translate(-453%20-1459.549)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_329005%22%20data-name%3D%22%E3%83%91%E3%82%B9%20329005%22%20d%3D%22M14.258%2C0%2C13.066%2C1.192l5.369%2C5.446H0V8.324H18.483L12.99%2C13.741l1.192%2C1.192%2C7.49-7.413-.015-.015.015-.015Z%22%20transform%3D%22translate(461.789%201472.451)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_30555%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2030555%22%20transform%3D%22translate(453%201460)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_30553%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2030553%22%3E%20%3Cg%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_29%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2029%22%20transform%3D%22translate(0%20-0.451)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2219%22%20fill%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  position: absolute;
  inset: auto 1.2rem 1.3rem auto;
  background-repeat: no-repeat;
  background-size: 5.7rem;
  transition: 0.4s;
  z-index: 2;
  border-radius: 100%;
}
@media (max-width: 767px) {
  .works-card__image-bg::after, .works-card__image-bg::before {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 2.8rem;
  }
}
.works-card__image-bg::after {
  opacity: 0;
  background: transparent;
  border: solid 3.5px #212121;
}
@media (max-width: 767px) {
  .works-card__image-bg {
    width: 100%;
    height: 17.9rem;
  }
}
.works-card__image-bg > img {
  scale: 1.018;
}
.works-card__subtitle {
  font-weight: bold;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .works-card__subtitle {
    font-size: 1.4rem;
  }
}
.works-card__title {
  font-size: 4.2rem;
  font-weight: bold;
  font-family: var(--font-en);
}
@media (max-width: 767px) {
  .works-card__title {
    white-space: nowrap;
    font-size: 2.75rem;
  }
}

.splide__slide.is-active .works-card {
  scale: 1;
  z-index: 1; /* 中央のスライドを一番上にする */
}

.sns {
  padding: 18rem 0 12rem;
  position: relative;
}
@media (max-width: 767px) {
  .sns {
    padding: 8rem 0 6rem;
  }
}
.sns__inner {
  max-width: 1040px;
}
.sns__headline {
  margin-left: 5rem;
}
@media (max-width: 767px) {
  .sns__headline {
    margin-left: 2.6rem;
  }
}
.sns__content {
  position: relative;
  margin: 6rem auto 0;
}
@media (max-width: 767px) {
  .sns__content {
    margin-top: 2.5rem;
  }
}
.sns__image {
  position: absolute;
  inset: 0 0 auto auto;
  width: 53.9rem;
  height: 25.8rem;
  transform: translateY(-100%);
}
@media (max-width: 767px) {
  .sns__image {
    transform: translateY(-99%);
    width: 18.7rem;
    height: 16.4rem;
  }
}
.sns__image-img1 {
  width: 26.9rem;
  margin-left: auto;
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 767px) {
  .sns__image-img1 {
    width: 11.1rem;
  }
}
.sns__image-img2 {
  width: 29.3rem;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.4s;
}
@media (max-width: 767px) {
  .sns__image-img2 {
    width: 10.1rem;
  }
}
.sns__item {
  background-image: linear-gradient(to right, var(--black) var(--senbun, 4px), transparent var(--kankaku, 4px));
  background-size: calc(var(--senbun, 4px) * 2) 2px;
  background-repeat: repeat-x;
  display: grid;
  grid-template-columns: 12rem 1fr;
  padding: 4rem 3rem 4rem 0;
  position: relative;
}
@media (max-width: 767px) {
  .sns__item {
    grid-template-columns: 7.5rem 1fr;
    gap: 1.55rem;
    padding: 2.5rem 1rem;
  }
}
.sns__item:last-child::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background-image: linear-gradient(to right, var(--black) var(--senbun, 4px), transparent var(--kankaku, 4px));
  background-size: calc(var(--senbun, 4px) * 2) 2px;
  background-repeat: repeat-x;
  background-position: center bottom;
}
.sns__item-icon {
  color: #fff;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 2rem;
}
@media (max-width: 767px) {
  .sns__item-icon {
    font-size: 1.56rem;
    white-space: nowrap;
  }
}
.sns__item-icon img {
  margin: 0 auto 0.4rem;
  width: 6.3rem;
  height: 6.3rem;
  border-radius: 100%;
}
@media (max-width: 767px) {
  .sns__item-icon img {
    width: 5rem;
    height: 5rem;
    margin-bottom: 0;
  }
}
.sns__item-list {
  display: block;
  width: 38rem;
  height: 10rem;
  border-radius: 10rem;
  padding: 1rem;
  background-color: #fff;
  border: solid 2px;
  position: relative;
  overflow: hidden;
  filter: brightness(1) !important;
}
.sns__item-list::before {
  content: "";
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  position: absolute;
  inset: 0;
  transform: translate(30rem, -20rem);
  background-color: #f08300;
  transition: 0.6s;
  margin: auto;
}
.sns__item-list span {
  position: relative;
  z-index: 2;
}
.sns__item-list:hover > div {
  position: relative;
  z-index: 3;
  transition-delay: 0.6s;
  transition: 0.5s;
}
@media print, screen and (min-width: 768px) {
  .sns__item-list:hover {
    opacity: 1 !important;
  }
  .sns__item-list:hover .sns__item-list-title1,
  .sns__item-list:hover .sns__item-list-title2 {
    color: #fff !important;
  }
  .sns__item-list:hover .sns__item-list-arrow {
    scale: 1 !important;
  }
  .sns__item-list:hover .sns__item-list-arrow svg {
    color: #fff;
  }
  .sns__item-list:hover span {
    color: #fff;
  }
  .sns__item-list:hover::before {
    transform: translate(0, 0);
  }
}
.sns__item-list:hover .sns__item-list-arrow {
  transform: translate(0.5rem, 0);
}
@media (max-width: 767px) {
  .sns__item-list {
    width: 100%;
    height: 5.5rem;
    padding: 0.5rem;
    padding-right: 2rem;
  }
}
.sns__item-lists {
  display: flex;
  gap: 4rem;
  margin-left: 3rem;
}
@media (max-width: 767px) {
  .sns__item-lists {
    display: grid;
    gap: 1rem;
    margin-left: 0;
  }
}
.sns__item-list {
  display: grid;
  align-items: center;
  grid-template-columns: 8.2rem 1fr 2.9rem;
}
@media (max-width: 767px) {
  .sns__item-list {
    gap: 1rem;
    grid-template-columns: 4rem 1fr 1.5rem;
  }
}
.sns__item-list-title1 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #f08300;
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
  .sns__item-list-title1 {
    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
    white-space: nowrap;
    line-height: 1;
    margin-bottom: 0.25rem;
  }
}
.sns__item-list-title2 {
  font-weight: bold;
}
@media (max-width: 767px) {
  .sns__item-list-title2 {
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 0.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sns__item-list-icon {
    margin-right: 1.5rem;
  }
}
.sns__item-list-arrow {
  transition: 0.4s;
}
.sns__item-list-arrow svg {
  display: block;
  width: 2.9rem;
  height: 2rem;
}
@media (max-width: 767px) {
  .sns__item-list-arrow svg {
    width: 1.5rem;
    height: 1rem;
  }
}

.message .c-new-button {
  position: relative;
  overflow: hidden;
  filter: brightness(1) !important;
}
.message .c-new-button::before {
  content: "";
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  position: absolute;
  transform: translate(30rem, -20rem);
  background-color: #f08300;
  transition: 0.6s;
  margin: auto;
}
@media (max-width: 767px) {
  .message .c-new-button {
    margin-left: 0;
  }
}
.message .c-new-button span {
  position: relative;
  z-index: 2;
}
@media print, screen and (min-width: 768px) {
.message .c-new-button:hover .c-new-button__arrow {
  scale: 1 !important;
  background-color: #fff;
}
.message .c-new-button:hover .c-new-button__arrow svg {
  color: #f08300;
}
.message .c-new-button:hover span {
  color: #fff;
}
.message .c-new-button:hover::before {
  transform: translate(0, 0);
}
}
.message__inner {
  padding: 8rem 0 12rem;
  position: relative;
}
@media (max-width: 767px) {
  .message__inner {
    padding: 4.5rem 1rem 6rem;
  }
  .message__inner .c-new-button {
    margin-left: 0;
  }
}
.message__inner::before {
  content: "";
  background-color: #41a9b1;
  border-radius: 0 9rem 9rem 0;
  width: 200%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 auto;
}
@media (max-width: 767px) {
  .message__inner::before {
    inset: 0 1rem 0 auto;
    border-radius: 0 6rem 6rem 0;
  }
}
.message__inner > * {
  position: relative;
  z-index: 3;
}
.message__headline {
  margin-bottom: 3.5rem;
}
@media (max-width: 767px) {
  .message__headline {
    margin-bottom: 40.4rem;
    padding-left: 2.4rem;
  }
}
.message__copy {
  font-size: 3.6rem;
  font-family: var(--font-primary);
  margin-bottom: 2.5rem;
}
@media (max-width: 767px) {
  .message__copy {
    font-size: 2.6rem;
  }
}
.message__lead {
  line-height: 2;
  margin-bottom: 4.5rem;
}
@media (max-width: 767px) {
  .message__lead {
    padding-right: 2rem;
    margin-bottom: 4rem;
  }
}
.message__row {
  display: grid;
  grid-template-columns: 50rem 44.3rem;
  gap: 11.3rem;
  align-items: end;
  padding-left: 2rem;
  justify-content: center;
}
@media (max-width: 767px) {
  .message__row {
    padding-left: 0;
    display: flex;
    flex-direction: column;
  }
}
.message__images {
  position: relative;
}
@media (max-width: 767px) {
  .message__images {
    position: absolute;
    inset: 13rem 16% auto;
    margin: 0 auto;
  }
}
.message__image {
  width: 44.3rem;
  height: 58rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .message__image {
    width: 22.8rem;
    height: 29.8rem;
  }
}
.message__image--2 {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.message__image--2 img {
  rotate: 10deg;
}
.message__image-img {
  position: absolute;
  inset: auto 0 1px -2px;
  margin: 0 auto 0px;
  width: 44.2rem;
  height: 58rem;
}
@media (max-width: 767px) {
  .message__image-img {
    width: 22.8rem;
    height: 29.8rem;
  }
}

.data {
  margin: 12rem auto;
}
@media (max-width: 767px) {
  .data {
    margin: 6rem auto;
  }
}
.data:hover .data__arrow {
  transform: translate(0.5rem, 0);
}
.data__arrow {
  transition: 0.4s;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 100%;
  background-color: #f08300;
  position: absolute;
  inset: auto 4.6rem 2.76rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .data__arrow {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 100%;
    inset: auto 2rem 2rem auto;
  }
}
.data__arrow svg {
  width: 2.6rem;
  height: 1.8rem;
}
@media (max-width: 767px) {
  .data__arrow svg {
    width: 1.8rem;
    height: 1.2rem;
  }
}
.data__box {
  position: relative;
  height: 51.8rem;
  display: block;
}
@media (max-width: 767px) {
  .data__box {
    height: auto;
  }
}
.data__titles {
  position: absolute;
  inset: 0 auto 0 7.85rem;
  height: fit-content;
  margin: auto 0;
}
@media (max-width: 767px) {
  .data__titles {
    white-space: nowrap;
    width: 100%;
    inset: 10rem auto auto 2.2rem;
  }
}
.data__title {
  font-size: 7.2rem;
  font-weight: bold;
  font-family: var(--font-primary);
}
@media (max-width: 767px) {
  .data__title {
    font-size: 4.2rem;
  }
}
.data__subtitle {
  font-size: 3.6rem;
  font-weight: bold;
  font-family: var(--font-primary);
}
@media (max-width: 767px) {
  .data__subtitle {
    font-size: 1.6rem;
  }
}

.c-headline__title {
  transform: translate(-2rem, 0);
  opacity: 0;
  transition: 0.5s;
  transition-delay: 0.8s;
}

.c-headline__subtitle {
  transform: translate(2rem, 0);
  opacity: 0;
  transition: 0.5s;
  transition-delay: 1s;
}

.c-headline__accent1-dot {
  opacity: 0;
  transition: 0.5s;
  scale: 0.2;
}
.c-headline__accent1-dot:nth-child(2) {
  transition-delay: 0.1s;
}
.c-headline__accent1-dot:nth-child(3) {
  transition-delay: 0.2s;
}
.c-headline__accent1-dot:nth-child(4) {
  transition-delay: 0.3s;
}
.c-headline__accent1-dot:nth-child(5) {
  transition-delay: 0.4s;
}
.c-headline__accent1-dot:nth-child(6) {
  transition-delay: 0.5s;
}

.fadein1 {
  opacity: 0;
  transform: translate(4rem, 0);
  transition: 0.8s;
}
.fadein1.is-active {
  opacity: 1;
  transform: none;
}

.fadein2 {
  opacity: 0;
  transform: translate(0, 4rem);
}
.fadein2.is-active {
  opacity: 1;
  transform: none;
}

.is-active .c-headline__accent1-dot {
  opacity: 1;
  scale: 1;
}
.is-active .c-headline__title {
  transform: translate(0, 0);
  opacity: 1;
}
.is-active .c-headline__subtitle {
  transform: translate(0, 0);
  opacity: 1;
}

.interview-modal {
  width: 100%;
  height: fit-content;
  outline: 0;
  border: 0;
  margin: auto;
  background-color: transparent;
}
@media (max-width: 767px) {
  .interview-modal {
    border-radius: 0;
    margin: 0;
    padding: 0;
    height: 100dvh;
    max-height: 100%;
  }
}
.interview-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
.interview-modal__content {
  overflow: auto;
  background-color: #fff;
  height: 54rem;
  padding: 10rem 11.5rem;
  border-radius: 9rem;
  display: grid;
  grid-template-columns: 22.5rem 1fr;
  gap: 6rem;
  background-image: url("../images/top/modal/bg.svg");
  background-position: right -18rem bottom -22rem;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .interview-modal__content {
    border-radius: 10px;
    border-radius: 0;
    background-size: 19rem;
    background-position: bottom -5rem right -5rem;
    height: 100dvh;
    padding: 3rem;
    display: block;
  }
}
.interview-modal__tag {
  font-size: 2rem;
  font-weight: bold;
}
@media (max-width: 767px) {
  .interview-modal__tag {
    font-size: 1.2rem;
  }
}
.interview-modal__title {
  font-size: 4.2rem;
  font-weight: bold;
  margin-bottom: 3.2rem;
  font-family: var(--font-en);
}
@media (max-width: 767px) {
  .interview-modal__title {
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }
}
.interview-modal__lead {
  margin-bottom: 1.6rem;
  color: #f08300;
  font-weight: bold;
  font-size: 2rem;
  font-family: var(--font-primary);
}
@media (max-width: 767px) {
  .interview-modal__lead {
    margin-bottom: 2rem;
  }
}
@media (max-width: 767px) {
  .interview-modal__image {
    margin-bottom: 2rem;
  }
  .interview-modal__image img {
    width: 100%;
    height: 18rem;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .interview-modal__desc {
    font-size: 1.4rem;
    line-height: 2;
  }
}

.js-vis1,
.js-vis2,
.js-vis3,
.js-vis4,
.js-mv1 {
  opacity: 0;
}

.js-vis1,
.js-vis2,
.js-vis3,
.js-vis4 {
  transform: translate(0, 50px);
}

/*# sourceMappingURL=index.css.map */