@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique:wght@400;500&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.pc-only {
  display: block; }
  @media screen and (max-width: 1024px) {
    .pc-only {
      display: none; } }

.sp-only {
  display: none; }
  @media screen and (max-width: 1024px) {
    .sp-only {
      display: block; } }

.pos-right {
  text-align: right; }

.pos-center {
  text-align: center; }

.bold {
  font-weight: bold; }

.mb2 {
  margin-bottom: 2rem; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  font-size: 16px; }
  @media screen and (max-width: 1024px) {
    html {
      font-size: 14px; } }

body {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.1rem;
  line-height: 1.6;
  color: #000;
  background: #F5F7FA;
  letter-spacing: 0.1rem; }

img, picture {
  max-width: 100%;
  height: auto; }

a {
  text-decoration: none;
  color: inherit; }

p + * {
  margin-top: 1rem; }

sup {
  vertical-align: super;
  font-size: smaller; }

small {
  font-size: 0.8rem; }

strong {
  font-weight: 500; }

.scroll-prevent {
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.container {
  width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative; }
  @media screen and (max-width: 1024px) {
    .container {
      padding: 0 30px;
      width: 100%;
      max-width: none;
      min-width: 0; } }

.btn_wrap {
  padding: 10px 0;
  box-sizing: border-box; }
  .btn_wrap.center {
    text-align: center; }
  .btn_wrap .btn {
    position: relative;
    display: inline-block; }
    .btn_wrap .btn::before {
      content: "";
      position: absolute;
      bottom: -7px;
      left: 0;
      background: #000;
      width: 100%;
      height: 1px; }
    .btn_wrap .btn button, .btn_wrap .btn input, .btn_wrap .btn .input_btn {
      background: none;
      border: none;
      cursor: pointer; }
    .btn_wrap .btn a, .btn_wrap .btn button, .btn_wrap .btn input, .btn_wrap .btn .input_btn {
      padding-right: 50px;
      transition: color 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
      .btn_wrap .btn a::before, .btn_wrap .btn button::before, .btn_wrap .btn input::before, .btn_wrap .btn .input_btn::before {
        content: "";
        display: block;
        width: 10px;
        height: 11px;
        background: url(../images/common/icon_arrow.svg) no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: right 0.3s ease,background 0.3s ease-out;
        z-index: 1; }
      .btn_wrap .btn a::after, .btn_wrap .btn button::after, .btn_wrap .btn input::after, .btn_wrap .btn .input_btn::after {
        content: "";
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        border: 1px solid #000;
        display: block;
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 4px;
        transition: border 0.3s ease,background 0.3s ease-out; }
    .btn_wrap .btn .input_btn input, .btn_wrap .btn .input_btn button {
      color: #000 !important;
      transition: color 0.3s ease; }
    .btn_wrap .btn:hover::before {
      width: 100%;
      animation: btn_hover_underline 0.3s linear forwards; }
@keyframes btn_hover_underline {
  0% {
    width: 0; }
  100% {
    width: 100%;
    background: #2cc0b3; } }
    .btn_wrap .btn:hover a, .btn_wrap .btn:hover button, .btn_wrap .btn:hover input, .btn_wrap .btn:hover .input_btn {
      color: #2cc0b3; }
      .btn_wrap .btn:hover a::before, .btn_wrap .btn:hover button::before, .btn_wrap .btn:hover input::before, .btn_wrap .btn:hover .input_btn::before {
        width: 10px;
        height: 11px;
        right: 5px;
        background: url(../images/common/icon_arrow_white.svg) no-repeat;
        background-size: contain;
        background-position: center; }
      .btn_wrap .btn:hover a::after, .btn_wrap .btn:hover button::after, .btn_wrap .btn:hover input::after, .btn_wrap .btn:hover .input_btn::after {
        background: #2cc0b3;
        border: #2cc0b3; }
    .btn_wrap .btn:hover .input_btn input, .btn_wrap .btn:hover .input_btn button {
      color: #2cc0b3 !important; }
  .btn_wrap .btn_map {
    position: relative;
    display: inline-block;
    text-align: center; }
    .btn_wrap .btn_map a {
      box-sizing: border-box;
      padding: 0.2rem 1rem;
      border: 1px solid #000;
      min-width: 250px;
      display: block;
      background: rgba(44, 192, 179, 0);
      transition: border 0.3s ease,background 0.3s ease,color 0.3s ease-out; }
      .btn_wrap .btn_map a::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background: url(../images/common/icon_blank.svg) no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        transition: background 0.3s ease-out;
        z-index: 1; }
      .btn_wrap .btn_map a:hover {
        background: #2cc0b3;
        border: 1px solid #2cc0b3;
        color: #fff; }
        .btn_wrap .btn_map a:hover::before {
          background: url(../images/common/icon_blank_white.svg) no-repeat;
          background-size: contain;
          background-position: center; }
  .btn_wrap .btn_cv {
    position: relative;
    display: inline-block; }
    .btn_wrap .btn_cv a {
      color: #fff;
      display: flex;
      align-items: center;
      gap: 2rem;
      background: #2cc0b3;
      padding: 1rem 8rem 1rem 4rem;
      transition: background 0.3s ease-out; }
      @media screen and (max-width: 1024px) {
        .btn_wrap .btn_cv a {
          flex-wrap: wrap; } }
      .btn_wrap .btn_cv a span {
        font-family: "Roboto Condensed", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-feature-settings: "palt";
        letter-spacing: -0.2rem;
        font-size: 4rem;
        font-weight: 600; }
        @media screen and (max-width: 1024px) {
          .btn_wrap .btn_cv a span {
            display: block; } }
      .btn_wrap .btn_cv a::before {
        content: "";
        display: block;
        width: 20px;
        height: 22px;
        background: url(../images/common/icon_arrow_white.svg) no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        right: 3rem;
        top: 50%;
        transform: translateY(-50%);
        transition: right 0.3s ease,background 0.3s ease-out;
        z-index: 1; }
      .btn_wrap .btn_cv a::after {
        content: "";
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        border: 1px solid #fff;
        display: block;
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        transition: opacity 0.3s ease,background 0.3s ease-out; }
    .btn_wrap .btn_cv:hover a {
      background: rgba(44, 192, 179, 0.8); }
      .btn_wrap .btn_cv:hover a::before {
        right: 1.8rem; }
      .btn_wrap .btn_cv:hover a::after {
        opacity: 0; }

header {
  background: rgba(245, 247, 250, 0.3);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 24px 0;
  backdrop-filter: blur(3px); }
  header .logo {
    text-align: center;
    margin: auto;
    width: 200px; }
    @media screen and (max-width: 1024px) {
      header .logo {
        text-align: left;
        margin: 0;
        width: 170px;
        padding-left: 1rem; } }
    header .logo a svg {
      width: 200px; }
      @media screen and (max-width: 1024px) {
        header .logo a svg {
          width: 170px; } }
      header .logo a svg path {
        fill: #000000; }
  header .global-nav {
    width: 100%;
    position: fixed;
    top: 80px;
    left: 0;
    bottom: auto;
    opacity: 0;
    height: calc(100svh - 80px);
    overflow-y: scroll;
    pointer-events: none; }
    header .global-nav > ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      flex-direction: column;
      justify-content: center; }
      @media screen and (max-width: 767px) {
        header .global-nav > ul {
          flex-wrap: wrap; } }
      header .global-nav > ul > li {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #fff; }
        @media screen and (max-width: 767px) {
          header .global-nav > ul > li {
            width: 100%;
            max-width: none;
            min-width: auto; } }
        header .global-nav > ul > li > a {
          text-align: center;
          display: block;
          font-size: 1.2rem;
          font-weight: 500;
          padding: 35px 0;
          position: relative;
          transition: color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          color: #fff; }
          header .global-nav > ul > li > a span {
            font-family: "Roboto Condensed", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-feature-settings: "palt";
            letter-spacing: -0.2rem;
            font-weight: 600;
            font-size: 3rem;
            display: block; }
  header .btn_menu {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 90px;
    height: 80px;
    z-index: 9999;
    transition: all 0.2s ease-out;
    padding: 25px;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer; }
    @media screen and (max-width: 767px) {
      header .btn_menu {
        display: block; } }
    header .btn_menu::before {
      content: " ";
      width: 90px;
      height: 80px;
      position: absolute;
      right: 0px;
      top: 0px;
      background: rgba(176, 147, 195, 0);
      transition: all 0.2s ease-out;
      z-index: -1; }
    header .btn_menu span {
      display: block;
      background: black;
      width: 100%;
      height: 2px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -moz-transition: all 0.2s ease-out;
      -webkit-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
      margin: auto;
      margin-top: 14px; }
      header .btn_menu span::before {
        content: '';
        position: absolute;
        width: 40px;
        height: 2px;
        background: black;
        top: 27px;
        right: 25px;
        -moz-transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out; }
      header .btn_menu span::after {
        content: '';
        position: absolute;
        width: 40px;
        height: 2px;
        background: black;
        bottom: 27px;
        right: 25px;
        -moz-transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out; }
  header .btn_contact {
    display: block;
    position: absolute;
    top: 0px;
    right: 90px;
    width: 90px;
    height: 80px;
    z-index: 9999;
    transition: all 0.2s ease-out;
    padding: 25px;
    opacity: 1;
    pointer-events: auto; }
    @media screen and (max-width: 767px) {
      header .btn_contact {
        display: block; } }
  header.active .btn_menu {
    background: #000; }
    header.active .btn_menu span {
      background: none !important; }
      header.active .btn_menu span::before {
        -moz-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        top: 38px;
        right: 24px;
        background: #fff !important; }
      header.active .btn_menu span::after {
        -moz-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        bottom: 40px;
        right: 24px;
        background: #fff !important; }
  header.active nav {
    opacity: 1;
    pointer-events: visible;
    background: rgba(43, 193, 179, 0.9);
    overscroll-behavior: contain;
    backdrop-filter: blur(3px); }
    header.active nav > ul > li ul {
      opacity: 1 !important;
      pointer-events: visible !important;
      position: static;
      width: 100% !important; }

main .overlay-bg {
  background-image: url("../images/common/bg.svg");
  background-size: auto;
  background-position: center;
  background-attachment: fixed;
  background-repeat: repeat;
  position: fixed;
  width: 100%;
  height: 100svh;
  mix-blend-mode: multiply;
  opacity: 0.02;
  pointer-events: none;
  z-index: 9999; }
main section {
  padding: 10rem 0; }
  @media screen and (max-width: 1024px) {
    main section {
      padding: 5rem 0; } }
  main section.bg_grey {
    background: #F0F1F5; }
main section + section {
  padding-top: 0; }
main section + section.bg_grey,
main section.bg_grey + section {
  padding-top: 10rem; }
  @media screen and (max-width: 1024px) {
    main section + section.bg_grey,
    main section.bg_grey + section {
      padding-top: 5rem; } }
main .image {
  border-radius: 8px;
  overflow: hidden;
  line-height: 0; }

footer {
  border-top: 1px solid #aaa;
  background: #F5F7FA;
  padding: 0; }
  footer #contact {
    background: url(../images/top/contact_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    position: relative; }
    footer #contact::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      transition: background 0.3s ease-out; }
    footer #contact a {
      display: block; }
      footer #contact a .container .two-column {
        padding: 7rem 0;
        display: flex;
        align-items: center; }
        @media screen and (max-width: 1024px) {
          footer #contact a .container .two-column {
            flex-direction: column; } }
        footer #contact a .container .two-column .left {
          width: 50%;
          position: relative; }
          @media screen and (max-width: 1024px) {
            footer #contact a .container .two-column .left {
              width: 100%; } }
          footer #contact a .container .two-column .left p {
            color: #fff; }
        footer #contact a .container .two-column .right {
          width: 50%;
          position: relative;
          border-left: 1px dotted #fff;
          padding: 3rem 12rem; }
          @media screen and (max-width: 1024px) {
            footer #contact a .container .two-column .right {
              width: 100%;
              padding: 0;
              border: none;
              padding-left: 6rem; } }
          footer #contact a .container .two-column .right::before {
            content: "";
            display: block;
            width: 20px;
            height: 22px;
            background: url(../images/common/icon_arrow_white.svg) no-repeat;
            background-size: contain;
            background-position: center;
            position: absolute;
            left: 5rem;
            top: 50%;
            transform: translateY(-50%);
            transition: right 0.3s ease,background 0.3s ease-out;
            z-index: 1; }
            @media screen and (max-width: 1024px) {
              footer #contact a .container .two-column .right::before {
                left: 2rem; } }
          footer #contact a .container .two-column .right::after {
            content: "";
            width: 50px;
            height: 50px;
            box-sizing: border-box;
            border: 1px solid #fff;
            display: block;
            position: absolute;
            left: 4rem;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            transition: border 0.3s ease,background 0.3s ease-out; }
            @media screen and (max-width: 1024px) {
              footer #contact a .container .two-column .right::after {
                left: 1rem; } }
          footer #contact a .container .two-column .right p:nth-child(1) {
            font-family: "Roboto Condensed", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-feature-settings: "palt";
            letter-spacing: -0.2rem;
            font-weight: 600;
            font-size: 4rem;
            color: #fff; }
          footer #contact a .container .two-column .right p:nth-child(2) {
            color: #fff; }
    footer #contact:hover::before {
      background: rgba(44, 192, 179, 0.8); }
  footer #info {
    text-align: center;
    padding-top: 4rem; }
    footer #info p {
      font-size: 0.9rem; }

@keyframes zoom {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.1); } }
@keyframes underline {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
@media screen and (min-width: 1025px) {
  header.fv {
    position: absolute;
    height: 100svh;
    background: none;
    backdrop-filter: blur(0px); }
    header.fv .global-nav {
      height: auto;
      position: absolute;
      top: auto;
      bottom: 0;
      opacity: 1;
      pointer-events: auto; }
      header.fv .global-nav > ul {
        justify-content: center;
        flex-direction: row;
        gap: 2rem; }
        header.fv .global-nav > ul > li {
          width: 25%;
          width: auto;
          border-bottom: none; }
          header.fv .global-nav > ul > li > a {
            color: #000; }
            header.fv .global-nav > ul > li > a span {
              display: none; }
            header.fv .global-nav > ul > li > a::before {
              content: "";
              display: block;
              position: absolute;
              bottom: 30px;
              left: 50%;
              transform: translateX(-50%);
              width: 0%;
              height: 1px;
              background: #000;
              transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
              color: #000; }
            header.fv .global-nav > ul > li > a:hover {
              color: #2cc0b3; }
              header.fv .global-nav > ul > li > a:hover::before {
                width: 100%;
                background: #2cc0b3; }
    header.fv .btn_menu {
      opacity: 0;
      pointer-events: none; }
    header.fv .btn_contact {
      opacity: 0;
      pointer-events: none; }
    header.fv .logo a svg path {
      fill: #ffffff; } }

main .spbg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  z-index: -1; }
  main .spbg li {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s linear;
    z-index: 1;
    backface-visibility: hidden;
    will-change: opacity, transform;
    animation: none; }
    main .spbg li picture, main .spbg li img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    main .spbg li.active {
      animation: zoom 8s linear forwards;
      opacity: 1;
      z-index: 2; }
main .mv.video-bg {
  position: relative;
  width: 100vw;
  height: calc(100svh - 100px);
  overflow: hidden;
  margin-bottom: 100px; }
  @media screen and (max-width: 1024px) {
    main .mv.video-bg {
      height: 100svh; } }
  main .mv.video-bg::before {
    content: "";
    display: block;
    width: 100%;
    height: 100svh;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; }
  main .mv.video-bg video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    /* 全画面に自然にフィット */ }
  main .mv.video-bg .video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    text-align: center;
    width: 100%;
    /* h1の文字ごとアニメーション */ }
    main .mv.video-bg .video-overlay .circle {
      opacity: 1;
      animation: spin 5s linear infinite;
      /* 回転（ずっと回る） */ }
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
      main .mv.video-bg .video-overlay .circle svg {
        animation: fadeZoomIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        /* フェード＆ズーム（登場用） */ }
@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }
    main .mv.video-bg .video-overlay #animated-title {
      font-size: 3rem;
      font-weight: 500;
      position: relative;
      margin-bottom: 40px; }
      @media screen and (max-width: 1024px) {
        main .mv.video-bg .video-overlay #animated-title {
          font-size: 2rem; } }
    main .mv.video-bg .video-overlay .fade-up {
      opacity: 0;
      transform: translateY(20px); }
    main .mv.video-bg .video-overlay .text1 {
      font-size: 1.3rem;
      font-weight: 500;
      padding: 0 0;
      border: 1px solid #fff;
      display: inline-block;
      margin-bottom: 40px;
      position: relative; }
@keyframes waku {
  to {
    padding: 10px 50px; } }
@keyframes waku_sp {
  to {
    padding: 10px 10px; } }
      @media screen and (max-width: 1024px) {
        main .mv.video-bg .video-overlay .text1 {
          box-sizing: border-box;
          margin: 2rem; } }
      main .mv.video-bg .video-overlay .text1::before {
        content: "";
        display: block;
        width: 100px;
        height: 1px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: -200px;
        transform: rotateY(-50%);
        opacity: 0; }
      main .mv.video-bg .video-overlay .text1::after {
        content: "";
        display: block;
        width: 100px;
        height: 1px;
        background: #fff;
        position: absolute;
        top: 50%;
        right: -200px;
        transform: rotateY(-50%);
        opacity: 0; }
    main .mv.video-bg .video-overlay .text2 {
      font-weight: 500; }
    main .mv.video-bg .video-overlay.active .fade-up {
      animation: fadeUpText 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
      animation-delay: calc(var(--delay) * 1s); }
@keyframes fadeUpText {
  to {
    opacity: 1;
    transform: translateY(0); } }
    @media screen and (min-width: 1025px) {
      main .mv.video-bg .video-overlay.active .text1 {
        animation: fadeUpText 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards, waku 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        animation-delay: calc(var(--delay) * 1s); } }
    @media screen and (max-width: 1024px) {
      main .mv.video-bg .video-overlay.active .text1 {
        animation: fadeUpText 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards, waku_sp 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        animation-delay: calc(var(--delay) * 1s); } }
    main .mv.video-bg .video-overlay.active .text1::before {
      animation: arrow-left 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
      animation-delay: calc(var(--delay) * 1s); }
@keyframes arrow-left {
  to {
    opacity: 1;
    width: 30px;
    left: -15px; } }
    main .mv.video-bg .video-overlay.active .text1::after {
      animation: arrow-right 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
      animation-delay: calc(var(--delay) * 1s); }
@keyframes arrow-right {
  to {
    opacity: 1;
    width: 30px;
    right: -15px; } }
main section {
  padding: 120px 0; }
main #about .container .ttl .position {
  width: 100%;
  text-align: center; }
  main #about .container .ttl .position .stroke-text {
    width: 100%;
    height: auto; }
    main #about .container .ttl .position .stroke-text .text {
      text-align: center;
      display: block;
      font-family: "Roboto Condensed", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-feature-settings: "palt";
      letter-spacing: -0.2rem;
      font-size: 7rem;
      font-weight: 600;
      line-height: normal;
      fill: transparent;
      stroke: #000;
      stroke-width: 0.2px;
      stroke-dasharray: 500;
      stroke-dashoffset: 500; }
  main #about .container .ttl .position.on .stroke-text .text {
    animation: draw 1.5s ease forwards, fillIn 0.5s ease forwards;
    animation-delay: 0s, 0.8s;
    /* 塗りは線が書かれたあと */ }
@keyframes draw {
  to {
    stroke-dashoffset: 0; } }
@keyframes fillIn {
  to {
    fill: black; } }
main #about .container .ttl h2 {
  text-align: center;
  margin-bottom: 120px;
  font-size: 1.3rem; }
main #about .container .card-group {
  display: flex;
  justify-content: space-between;
  gap: 3rem; }
  @media screen and (max-width: 1024px) {
    main #about .container .card-group {
      flex-direction: column; } }
  main #about .container .card-group .card {
    width: 100%;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
    main #about .container .card-group .card .icon {
      width: 100%;
      height: 120px;
      margin-bottom: 40px;
      text-align: center; }
      main #about .container .card-group .card .icon svg {
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        transform: scale(0);
        opacity: 0; }
        main #about .container .card-group .card .icon svg path {
          fill: #2cc0b3;
          transition: fill 0.6s 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
    main #about .container .card-group .card .text1 {
      text-align: center;
      font-size: 1.2rem;
      font-weight: 500;
      color: #fff;
      background: #2cc0b3;
      border-radius: 6px;
      padding: 10px 0;
      transition: background 0.6s 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
    main #about .container .card-group .card .text2 {
      text-align: center;
      font-size: 1.2rem;
      font-weight: 500;
      padding: 10px 0;
      margin-bottom: 10px;
      position: relative; }
      main #about .container .card-group .card .text2::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 1px;
        background: #000;
        width: 0;
        transition: width 0.6s 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
    main #about .container .card-group .card .text3 {
      font-size: 0.7rem; }
    main #about .container .card-group .card.on {
      opacity: 1;
      transform: translateY(0); }
      main #about .container .card-group .card.on .icon svg {
        transform: scale(1);
        opacity: 1; }
        main #about .container .card-group .card.on .icon svg path {
          fill: #000000; }
      main #about .container .card-group .card.on .text1 {
        background: #000; }
      main #about .container .card-group .card.on .text2::before {
        width: 100%; }
main #service {
  border-top: 1px solid #000;
  padding-top: 4rem;
  background: #fff; }
  main #service .container {
    width: 100%;
    min-width: 1280px;
    padding: 0; }
    @media screen and (max-width: 1024px) {
      main #service .container {
        min-width: auto; } }
    main #service .container > .ttl .position {
      width: 100%;
      text-align: center; }
      main #service .container > .ttl .position .stroke-text {
        width: 100%;
        height: auto; }
        main #service .container > .ttl .position .stroke-text .text {
          text-align: center;
          display: block;
          font-family: "Roboto Condensed", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          font-feature-settings: "palt";
          letter-spacing: -0.2rem;
          font-size: 7rem;
          font-weight: 600;
          line-height: normal;
          fill: transparent;
          stroke: #000;
          stroke-width: 0.2px;
          stroke-dasharray: 500;
          stroke-dashoffset: 500; }
      main #service .container > .ttl .position.on .stroke-text .text {
        animation: draw 1.5s ease forwards, fillIn 0.5s ease forwards;
        animation-delay: 0s, 0.8s;
        /* 塗りは線が書かれたあと */ }
@keyframes draw {
  to {
    stroke-dashoffset: 0; } }
@keyframes fillIn {
  to {
    fill: black; } }
    main #service .container > .ttl h2 {
      text-align: center;
      margin-bottom: 120px;
      font-size: 1.3rem; }
    main #service .container > .contents .introduction {
      position: sticky;
      top: 0;
      height: 100svh;
      width: 100%;
      overflow: hidden; }
      main #service .container > .contents .introduction .side-text {
        position: absolute;
        background: #666; }
        @media screen and (max-width: 1024px) {
          main #service .container > .contents .introduction .side-text {
            background: none; } }
        main #service .container > .contents .introduction .side-text p {
          font-family: "Roboto Condensed", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          font-feature-settings: "palt";
          letter-spacing: -0.2rem;
          font-weight: bold;
          font-size: 5rem;
          color: #999;
          display: block;
          white-space: nowrap; }
          @media screen and (max-width: 1024px) {
            main #service .container > .contents .introduction .side-text p {
              font-size: 5rem; } }
        main #service .container > .contents .introduction .side-text.left {
          transform-origin: left;
          transform: rotate(90deg);
          top: 0;
          left: 50px;
          border-top: 1px solid #fff;
          animation: text-scroll_left 30s linear infinite; }
@keyframes text-scroll_left {
  0% {
    top: -121%; }
  100% {
    top: -10%; } }
        main #service .container > .contents .introduction .side-text.right {
          transform-origin: right;
          transform: rotate(-90deg);
          top: 0;
          right: 50px;
          border-top: 1px solid #fff;
          animation: text-scroll_right 30s linear infinite; }
@keyframes text-scroll_right {
  0% {
    top: -10%; }
  100% {
    top: -121%; } }
      main #service .container > .contents .introduction .video-bg {
        position: relative;
        width: calc(100vw - 231px);
        height: 100svh;
        margin: auto;
        min-width: 1052px; }
        @media screen and (max-width: 1024px) {
          main #service .container > .contents .introduction .video-bg {
            width: 100vw;
            min-width: auto; } }
        main #service .container > .contents .introduction .video-bg::before {
          content: "";
          display: block;
          width: 100%;
          height: 100svh;
          background: rgba(0, 0, 0, 0.5);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1; }
        main #service .container > .contents .introduction .video-bg video {
          position: absolute;
          top: 0;
          left: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          object-fit: cover;
          /* 全画面に自然にフィット */
          z-index: -1;
          /* 背景に */ }
        main #service .container > .contents .introduction .video-bg .video-overlay {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: calc(100% - 240px);
          min-width: calc(1280px - 240px);
          padding: 0 1rem;
          z-index: 1; }
          @media screen and (max-width: 1024px) {
            main #service .container > .contents .introduction .video-bg .video-overlay {
              width: 100%;
              min-width: auto;
              padding: 0 1rem; } }
          main #service .container > .contents .introduction .video-bg .video-overlay .two-column {
            display: flex;
            align-items: center; }
            @media screen and (max-width: 1024px) {
              main #service .container > .contents .introduction .video-bg .video-overlay .two-column {
                flex-direction: column; } }
            main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl {
              width: 50%;
              position: relative; }
              @media screen and (max-width: 1024px) {
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl {
                  width: 100%; } }
              main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap {
                text-align: center;
                color: #fff; }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap::before {
                  content: "";
                  display: block;
                  border: 1px solid #fff;
                  border-radius: 50%;
                  width: 0px;
                  aspect-ratio: 1 / 1;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap::after {
                  content: "";
                  display: block;
                  width: 0px;
                  height: 1px;
                  background: #fff;
                  position: absolute;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                  transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1), height 0.5s cubic-bezier(0.23, 1, 0.32, 1), left 0.5s cubic-bezier(0.23, 1, 0.32, 1), right 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
                  @media screen and (max-width: 1024px) {
                    main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap::after {
                      width: 1px;
                      height: 0;
                      top: auto;
                      bottom: 50%;
                      left: 50%;
                      transform: translatex(-50%); } }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap p {
                  font-family: "Roboto Condensed", sans-serif;
                  font-optical-sizing: auto;
                  font-weight: 400;
                  font-style: normal;
                  font-feature-settings: "palt";
                  letter-spacing: -0.2rem;
                  font-size: 8rem;
                  font-weight: 600;
                  text-align: center;
                  line-height: 1;
                  position: relative;
                  bottom: -5rem;
                  opacity: 0;
                  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), bottom 1s cubic-bezier(0.23, 1, 0.32, 1); }
                  @media screen and (max-width: 1024px) {
                    main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap p {
                      font-size: 4rem; } }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap h3 {
                  font-size: 1.2rem;
                  position: relative;
                  bottom: -5rem;
                  opacity: 0;
                  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), bottom 1s cubic-bezier(0.23, 1, 0.32, 1); }
                  @media screen and (max-width: 1024px) {
                    main #service .container > .contents .introduction .video-bg .video-overlay .two-column .ttl .wrap h3 {
                      font-size: 1rem; } }
            main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents {
              width: 50%; }
              @media screen and (max-width: 1024px) {
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents {
                  width: 100%;
                  padding-top: 5rem; } }
              main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents .wrap {
                background: rgba(255, 255, 255, 0.8);
                color: #000;
                text-align: left;
                box-sizing: border-box;
                padding: 3rem;
                border-radius: 10px;
                position: relative;
                bottom: -5rem;
                opacity: 0;
                transition: opacity 0.5s 0.5s cubic-bezier(0.23, 1, 0.32, 1), bottom 1s 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
                @media screen and (max-width: 1024px) {
                  main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents .wrap {
                    padding: 1.5rem; } }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents .wrap .circle {
                  opacity: 1;
                  animation: spin 5s linear infinite;
                  transform-origin: center;
                  position: relative;
                  left: -1rem;
                  display: inline-block;
                  /* 回転（ずっと回る） */ }
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents .wrap h4 {
                  font-size: 1.4rem;
                  margin-bottom: 2rem; }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents .wrap p {
                  font-size: 0.8rem; }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents .wrap ul li {
                  list-style-type: disc;
                  margin-left: 1rem; }
                main #service .container > .contents .introduction .video-bg .video-overlay .two-column .contents .wrap .btn {
                  margin-top: 2rem; }
          main #service .container > .contents .introduction .video-bg .video-overlay.on .two-column .ttl .wrap::before {
            width: 400px; }
            @media screen and (max-width: 1024px) {
              main #service .container > .contents .introduction .video-bg .video-overlay.on .two-column .ttl .wrap::before {
                width: 200px; } }
          main #service .container > .contents .introduction .video-bg .video-overlay.on .two-column .ttl .wrap::after {
            width: 100px;
            left: calc(50% + 150px); }
            @media screen and (max-width: 1024px) {
              main #service .container > .contents .introduction .video-bg .video-overlay.on .two-column .ttl .wrap::after {
                width: 1px;
                height: 50px;
                left: 50%;
                bottom: -80px; } }
          main #service .container > .contents .introduction .video-bg .video-overlay.on .two-column .ttl .wrap p {
            bottom: 0;
            opacity: 1; }
          main #service .container > .contents .introduction .video-bg .video-overlay.on .two-column .ttl .wrap h3 {
            bottom: 0;
            opacity: 1; }
          main #service .container > .contents .introduction .video-bg .video-overlay.on .two-column .contents .wrap {
            bottom: 0;
            opacity: 1; }
      @media screen and (min-width: 1025px) {
        main #service .container > .contents .introduction:nth-child(even) .video-bg .video-overlay .two-column .ttl {
          order: 1; }
          main #service .container > .contents .introduction:nth-child(even) .video-bg .video-overlay .two-column .ttl .wrap::after {
            left: auto;
            right: 0; }
        main #service .container > .contents .introduction:nth-child(even) .video-bg .video-overlay .two-column .contents {
          order: 0; }
        main #service .container > .contents .introduction:nth-child(even) .video-bg .video-overlay.on .two-column .ttl .wrap::after {
          left: auto;
          right: calc(50% + 150px); } }
main .service-modal {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease-out; }
  main .service-modal.active {
    opacity: 1;
    visibility: visible; }
  main .service-modal .modal-content {
    background: #fff;
    padding: 20px;
    max-width: 800px;
    width: 90%;
    position: relative; }
    main .service-modal .modal-content .close-modal {
      position: absolute;
      top: 10px;
      right: 10px; }
    main .service-modal .modal-content .swiper-slide .ttl {
      font-size: 2rem; }
    main .service-modal .modal-content .swiper-slide p:last-child {
      margin-bottom: 40px; }
main #products {
  position: relative;
  background: #fff; }
  main #products .container {
    width: 100%;
    min-width: 1280px;
    padding: 0; }
    @media screen and (max-width: 1024px) {
      main #products .container {
        min-width: auto; } }
    main #products .container .two-column {
      display: flex;
      align-items: flex-start; }
      @media screen and (max-width: 1024px) {
        main #products .container .two-column {
          flex-direction: column; } }
      main #products .container .two-column .left {
        position: sticky;
        left: 0;
        top: calc(50svh - 25%);
        width: 40%;
        box-sizing: border-box;
        padding: 0 1rem; }
        @media screen and (max-width: 1024px) {
          main #products .container .two-column .left {
            position: static;
            width: 100%;
            margin-bottom: 4rem; } }
        main #products .container .two-column .left .ttl p {
          text-align: left;
          display: block;
          font-family: "Roboto Condensed", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          font-feature-settings: "palt";
          letter-spacing: -0.2rem;
          font-size: 80px;
          font-weight: 600;
          line-height: normal; }
        main #products .container .two-column .left .ttl h2 {
          text-align: left;
          margin-bottom: 120px;
          font-size: 1.3rem; }
      main #products .container .two-column .right {
        width: 60%;
        /* モーダル共通 */ }
        @media screen and (max-width: 1024px) {
          main #products .container .two-column .right {
            width: 100%; } }
        main #products .container .two-column .right .product {
          position: relative; }
          main #products .container .two-column .right .product .btn_wrap {
            position: absolute;
            bottom: 5rem;
            left: 1rem;
            z-index: 9998; }
          main #products .container .two-column .right .product.p1 h3 {
            background: #00A1E1; }
          main #products .container .two-column .right .product.p2 h3 {
            background: #E85F9D; }
          main #products .container .two-column .right .product.p3 h3 {
            background: #EC6A01; }
          main #products .container .two-column .right .product h3 {
            position: sticky;
            top: 80px;
            left: 100%;
            display: inline-block;
            box-sizing: border-box;
            padding: 30px 40px;
            font-size: 1.4rem;
            color: #fff;
            z-index: 1; }
            @media screen and (max-width: 1024px) {
              main #products .container .two-column .right .product h3 {
                left: 0;
                padding: 15px 20px; } }
          main #products .container .two-column .right .product .image-container {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 900px;
            margin: 0 auto; }
            @media screen and (max-width: 1024px) {
              main #products .container .two-column .right .product .image-container {
                padding: 10rem 0; } }
            main #products .container .two-column .right .product .image-container picture.base {
              display: block;
              width: 100%;
              height: auto; }
            main #products .container .two-column .right .product .image-container .hotspot {
              position: absolute;
              cursor: pointer; }
              main #products .container .two-column .right .product .image-container .hotspot picture {
                display: block;
                opacity: .5;
                opacity: 0;
                transition: opacity 0.3s ease-out;
                height: auto; }
                @media screen and (max-width: 1024px) {
                  main #products .container .two-column .right .product .image-container .hotspot picture {
                    display: none; } }
              main #products .container .two-column .right .product .image-container .hotspot:hover picture {
                opacity: 1; }
        main #products .container .two-column .right .modal {
          display: flex;
          position: fixed;
          z-index: 9998;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.6);
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(5px);
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.4s ease, visibility 0.4s ease-out; }
          main #products .container .two-column .right .modal.active {
            opacity: 1;
            visibility: visible; }
          main #products .container .two-column .right .modal-content {
            background: #fff;
            padding: 20px;
            max-width: 600px;
            width: 90%;
            border-radius: 8px;
            position: relative; }
            main #products .container .two-column .right .modal-content #modalBody .modal-inner .ttl {
              font-size: 2rem; }
            main #products .container .two-column .right .modal-content #modalBody .modal-inner .image {
              width: 100%;
              margin-bottom: 1rem;
              aspect-ratio: 1 / 1;
              overflow: hidden;
              background: #fff;
              border-radius: 8px; }
              main #products .container .two-column .right .modal-content #modalBody .modal-inner .image picture, main #products .container .two-column .right .modal-content #modalBody .modal-inner .image img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: contain; }
          main #products .container .two-column .right .modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold; }
main #works {
  padding-top: 120px; }
  main #works .container .ttl p {
    text-align: left;
    display: block;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-feature-settings: "palt";
    letter-spacing: -0.2rem;
    font-size: 80px;
    font-weight: 600;
    line-height: normal; }
  main #works .container .ttl h2 {
    text-align: left;
    margin-bottom: 120px;
    font-size: 1.3rem; }
  main #works .container ul {
    margin-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 0px; }
    @media screen and (max-width: 1024px) {
      main #works .container ul {
        flex-direction: column; } }
    main #works .container ul li {
      box-sizing: border-box;
      width: calc(25% - 1rem);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      overflow: hidden; }
      @media screen and (max-width: 1024px) {
        main #works .container ul li {
          width: 100%; } }
      main #works .container ul li .image {
        overflow: hidden;
        line-height: 0; }
        main #works .container ul li .image picture, main #works .container ul li .image img {
          display: block;
          transform-origin: center;
          transition: transform 0.3s ease-out; }
      main #works .container ul li p {
        text-align: center;
        font-weight: 500;
        padding: 10px 0; }
      main #works .container ul li:hover .image picture, main #works .container ul li:hover .image img {
        transform: scale(1.2); }
main #banner .container ul {
  display: flex;
  justify-content: space-between; }
  @media screen and (max-width: 1024px) {
    main #banner .container ul {
      flex-direction: column; } }
  main #banner .container ul li {
    width: calc(33.3333% - 1rem); }
    @media screen and (max-width: 1024px) {
      main #banner .container ul li {
        width: 100%; } }
    main #banner .container ul li a .image {
      overflow: hidden;
      border-radius: 8px;
      line-height: 1; }
      main #banner .container ul li a .image picture, main #banner .container ul li a .image img {
        display: block;
        transform-origin: center;
        transition: transform 0.3s ease-out; }
    main #banner .container ul li a:hover .image picture, main #banner .container ul li a:hover .image img {
      transform: scale(1.2); }

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