@charset "UTF-8";
/* Break point
---------------------------------------------------------- */
/* Placeholder
---------------------------------------------------------- */
.p-top__service__list .service-name, .p-top__section-title .title--en {
  background: var(--gradient-main);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-top__section-title .title--en {
  font-family: var(--font-en-condensed);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.p-top__section-title .title--jp {
  font-weight: bold;
  color: var(--color-dark-blue);
}

/* 共通
---------------------------------------------------------- */
.p-top__section-title {
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.p-top__section-title .title--en {
  font-size: 4.5rem;
}
@media screen and (min-width: 768px) {
  .p-top__section-title .title--en {
    font-size: 7rem;
  }
}
.p-top__section-title .title--jp {
  margin-left: 0.5em;
  font-size: var(--font12);
}
@media screen and (min-width: 768px) {
  .p-top__section-title .title--jp {
    font-size: var(--font14);
  }
}
.p-top__wrap {
  overflow: hidden;
}

body.is-loaded .p-top__mv__catch {
  -webkit-animation: textFadein 1s 0.2s var(--bezier) forwards;
          animation: textFadein 1s 0.2s var(--bezier) forwards;
}

/* MV
---------------------------------------------------------- */
.p-top__mv {
  position: relative;
  z-index: 1;
  height: 800px;
}
@media screen and (min-width: 768px) {
  .p-top__mv {
    padding-top: var(--headerH);
    height: 100vh;
  }
}
.p-top__mv__catch {
  position: relative;
  z-index: 3;
  -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
          clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
}
.p-top__mv__catch .catch--en {
  font-size: clamp(2.875rem, 1.714rem + 5.8vw, 4.5rem);
  font-weight: var(--font-medium);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
@media screen and (min-width: 960px) {
  .p-top__mv__catch .catch--en {
    font-size: 7.2vw;
  }
}
.p-top__mv__catch .catch--jp {
  margin-top: 0.6em;
  font-size: clamp(0.875rem, 0.696rem + 0.89vw, 1.125rem);
  font-weight: bold;
  letter-spacing: 0.07em;
}
@media screen and (min-width: 960px) {
  .p-top__mv__catch .catch--jp {
    font-size: 1.8vw;
  }
}
.p-top__mv__element {
  position: absolute;
}
.p-top__mv__element svg {
  width: 100%;
}
.p-top__mv__element.element--main_top {
  top: 11%;
  left: 45%;
  width: 52%;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element.element--main_top {
    top: 13%;
    left: 53%;
    width: 32%;
  }
}
.p-top__mv__element.element--main_top svg {
  aspect-ratio: 1316/541;
}
.p-top__mv__element.element--main_center {
  bottom: 12%;
  min-width: 800px;
  width: 150%;
  right: -5px;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element.element--main_center {
    top: 7%;
    right: auto;
    left: 1%;
    bottom: auto;
    width: 94%;
    min-width: 1030px;
  }
}
.p-top__mv__element.element--main_center svg {
  aspect-ratio: 1316/541;
}
.p-top__mv__element.element--main_right {
  left: 88%;
  top: 28%;
  width: 10%;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element.element--main_right {
    left: 94%;
    top: 48%;
    width: 8%;
  }
}
.p-top__mv__element.element--main_right svg {
  aspect-ratio: 126/359;
}
.p-top__mv__element.element--main_left {
  left: -75px;
  top: 2%;
  width: 37%;
  min-width: 200px;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element.element--main_left {
    left: -12%;
    top: auto;
    bottom: 3%;
    width: 26%;
    min-width: 400px;
  }
}
.p-top__mv__element.element--main_left svg {
  aspect-ratio: 400/410;
}
.p-top__mv__element.element--main_bottom {
  left: -120px;
  bottom: -61px;
  width: 56%;
  min-width: 230px;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element.element--main_bottom {
    top: 78%;
    bottom: auto;
    left: 30%;
    width: 34%;
    min-width: 410px;
  }
}
.p-top__mv__element.element--main_bottom svg {
  aspect-ratio: 483/213;
}
.p-top__mv__element.element--light_top {
  top: 1%;
  left: 24%;
  width: 25%;
  opacity: 0.06;
  z-index: -1;
}
.p-top__mv__element.element--light_top svg {
  aspect-ratio: 310/233;
}
.p-top__mv__element.element--light_right {
  left: 53%;
  top: 19%;
  width: 30%;
  opacity: 0.06;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element.element--light_right {
    left: 73%;
    top: 40%;
    width: 20%;
  }
}
.p-top__mv__element.element--light_right svg {
  aspect-ratio: 121/239;
}
.p-top__mv__element.element--light_left {
  left: 43%;
  bottom: 33%;
  width: 30%;
  opacity: 0.06;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element.element--light_left {
    left: 3%;
    bottom: 1%;
    width: 37%;
  }
}
.p-top__mv__element.element--light_left svg {
  aspect-ratio: 391/198;
}
.p-top__mv__element .circle-image {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  height: auto;
}
.p-top__mv__element .circle-image.image--01 {
  width: 27%;
  top: 53%;
  left: 66%;
}
.p-top__mv__element .circle-image.image--02 {
  width: 14%;
  top: 8%;
  left: 90%;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  display: none;
}
@media screen and (min-width: 768px) {
  .p-top__mv__element .circle-image.image--02 {
    display: block;
  }
}
.p-top__mv__element .circle-image.image--03 {
  width: 30%;
  top: -30%;
  left: 50%;
}
.p-top__mv__element .circle-image.image--04 {
  width: 62%;
  bottom: -23%;
  left: 50%;
}
.p-top__mv__element .element-circle {
  position: relative;
  z-index: 1;
}
.p-top__mv__inner {
  padding-left: var(--headerPadding);
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#main_top .line--01 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite;
}
#main_top .line--02 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite;
}

#main_center .line--01 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite;
}
#main_center .line--02 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite;
}
#main_center .line--03 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 1.2s var(--bezier) infinite;
          animation: drawLine 4s 1.2s var(--bezier) infinite;
}
#main_center .line--04 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 1.5s var(--bezier) infinite;
          animation: drawLine 4s 1.5s var(--bezier) infinite;
}

#main_left .line--01 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite;
}
#main_left .line--02 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite;
}
#main_left .line--03 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 1.2s var(--bezier) infinite;
          animation: drawLine 4s 1.2s var(--bezier) infinite;
}

#main_bottom .line--01 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite;
}
#main_bottom .line--02 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite;
}
#main_bottom .line--03 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s 1.2s var(--bezier) infinite;
          animation: drawLine 4s 1.2s var(--bezier) infinite;
}

#main_right .line--01 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite;
}

html.safari #main_top .line--01 {
  -webkit-animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
}
html.safari #main_top .line--02 {
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
}
html.safari #main_center .line--01 {
  -webkit-animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
}
html.safari #main_center .line--02 {
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
}
html.safari #main_center .line--03 {
  -webkit-animation: drawLine 4s 1.2s var(--bezier) infinite, drawLineOpacity 4s 1.2s var(--bezier) infinite;
          animation: drawLine 4s 1.2s var(--bezier) infinite, drawLineOpacity 4s 1.2s var(--bezier) infinite;
}
html.safari #main_center .line--04 {
  -webkit-animation: drawLine 4s 1.5s var(--bezier) infinite, drawLineOpacity 4s 1.5s var(--bezier) infinite;
          animation: drawLine 4s 1.5s var(--bezier) infinite, drawLineOpacity 4s 1.5s var(--bezier) infinite;
}
html.safari #main_left .line--01 {
  -webkit-animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
}
html.safari #main_left .line--02 {
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
}
html.safari #main_left .line--03 {
  -webkit-animation: drawLine 4s 1.2s var(--bezier) infinite, drawLineOpacity 4s 1.2s var(--bezier) infinite;
          animation: drawLine 4s 1.2s var(--bezier) infinite, drawLineOpacity 4s 1.2s var(--bezier) infinite;
}
html.safari #main_bottom .line--01 {
  -webkit-animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
}
html.safari #main_bottom .line--02 {
  -webkit-animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
          animation: drawLine 4s 0.5s var(--bezier) infinite, drawLineOpacity 4s 0.5s var(--bezier) infinite;
}
html.safari #main_bottom .line--03 {
  -webkit-animation: drawLine 4s 1.2s var(--bezier) infinite, drawLineOpacity 4s 1.2s var(--bezier) infinite;
          animation: drawLine 4s 1.2s var(--bezier) infinite, drawLineOpacity 4s 1.2s var(--bezier) infinite;
}
html.safari #main_right .line--01 {
  -webkit-animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
          animation: drawLine 4s var(--bezier) infinite, drawLineOpacity 4s var(--bezier) infinite;
}

@-webkit-keyframes gradientAnim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 10em 0;
  }
}

@keyframes gradientAnim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 10em 0;
  }
}
@-webkit-keyframes textFadein {
  0% {
    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes textFadein {
  0% {
    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@-webkit-keyframes drawLine {
  0% {
    stroke-dashoffset: 500;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -500;
  }
}
@keyframes drawLine {
  0% {
    stroke-dashoffset: 500;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -500;
  }
}
@-webkit-keyframes drawLineOpacity {
  0% {
    visibility: visible;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes drawLineOpacity {
  0% {
    visibility: visible;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* Topics
---------------------------------------------------------- */
.p-top__topics {
  padding: 4rem 0 10rem;
}
@media screen and (min-width: 768px) {
  .p-top__topics {
    padding: 6rem 0 10rem;
  }
}
.p-top__topics .category-tab {
  font-size: var(--font12);
}
@media screen and (min-width: 768px) {
  .p-top__topics .category-tab {
    font-size: var(--font17);
  }
}

/* Service
---------------------------------------------------------- */
.p-top__service {
  padding: 4rem 0 6rem;
}
@media screen and (min-width: 768px) {
  .p-top__service {
    padding: 6rem 0 10rem;
  }
}
.p-top__service__lead {
  font-size: var(--font14);
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-top__service__lead {
    font-size: 1rem;
    text-align: right;
  }
}
.p-top__service__list {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .p-top__service__list {
    margin-top: 5rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}
@media screen and (min-width: 960px) {
  .p-top__service__list {
    gap: 4rem;
  }
}
.p-top__service__list .service-name {
  margin-bottom: 0.3em;
  font-size: var(--font22);
  font-weight: bold;
  -ms-flex-item-align: end;
      align-self: flex-end;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
@media screen and (min-width: 768px) {
  .p-top__service__list .service-name {
    font-size: var(--font30);
  }
}
.p-top__service__list .service-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}

/* ==================================================================  */
@media (prefers-reduced-motion: no-preference) {
  @-webkit-keyframes scroll {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  @keyframes scroll {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  @-webkit-keyframes scroll2 {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
              transform: translateX(-200%);
    }
  }
  @keyframes scroll2 {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
              transform: translateX(-200%);
    }
  }
}