@charset "UTF-8";
/* ============================= 共通パーツレイアウト ============================= */
@media screen {
   :root {
      --color-text: #000;
      --color-white: #FFF;
      --color-grey: #D6D6D6;
      --color-lightgrey: #F3F3F3;

      --grad-black: linear-gradient(to right, #000000 0%, #666666 100%);
      --grad-black-reverse: linear-gradient(to left, #000000 0%, #666666 100%);

      --font-default: "Noto Sans JP", sans-serif;
      --font-Jost: "Jost", sans-serif;
   }

   html,
   body {
      width: 100%;
      overflow-x: hidden;
   }

   body {
      font-family: var(--font-default);
      font-weight: 400;
      color: var(--color-text);
      font-size: 16px;
      line-height: 2;
      letter-spacing: .1em;
      background-color: #fff;
      position: relative;
   }

   a {
      transition: opacity .3s;
   }

   a:hover {
      opacity: 0.7;
   }

   img {
      width: 100%;
   }

   .sp,
   .tb,
   .ssp,
   .ham {
      display: none;
   }

   .innerWrap {
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
   }

   main>section {
      margin-bottom: 96px;
   }

   h2.h2_common {
      font-size: clamp(56px, 18.519vw - 86.22px, 136px);
      color: var(--color-grey);
      font-family: var(--font-Jost);
      letter-spacing: .2em;
      line-height: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 20px;
   }

   h2.h2_common span {
      color: var(--color-text);
      font-size: 32px;
      font-weight: 500;
      font-family: var(--font-default);
      letter-spacing: .2em;
   }

   .section-copy {
      font-weight: 500;
      font-size: 32px;
   }

   .grad-black {
      background: var(--grad-black);
      color: var(--color-white);
   }

   .grad-black-reverse {
      background: var(--grad-black-reverse);
      color: var(--color-white);
   }
}

/* ============================= 共通ヘッダー・フッター ============================= */
@media screen {
   header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      transition: background-color 0.4s ease, height 0.4s ease;
      background-color: transparent;
   }

   body.is-scrolled header {
      background-color: rgba(0, 0, 0, 0.25);
   }

   header .innerWrap {
      height: 116px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--color-white);
      transition: height 0.2s ease;
   }

   body.is-scrolled header .innerWrap {
      height: 80px;
   }

   header .global-nav ul {
      display: flex;
      align-items: center;
      gap: 48px;
   }

   header .global-nav a,
   footer ul a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 18px;
      font-weight: 500;
      line-height: 1;
      font-family: var(--font-Jost);
      letter-spacing: .2em;
   }

   header .global-nav a span,
   footer ul a span {
      font-size: 14px;
      font-weight: 400;
      font-family: var(--font-default);
   }

   header .logo {
      width: 170px;
   }

   footer {
      background-color: var(--color-text);
      padding: 56px 0 48px;
   }

   footer .innerWrap {
      color: var(--color-white);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   footer .innerWrap>p:first-of-type {
      width: 170px;
      margin-bottom: 32px;
   }

   footer .innerWrap ul {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-bottom: 56px;
   }

   footer .copyright {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .12em;
   }
}

/* ============================= トップページ ============================= */
@media screen {
   .hero {
      position: relative;
      width: 100%;
      height: 825px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0;
   }

   .hero-video {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
   }

   .hero::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 35px;
      background-color: var(--color-lightgrey);
      z-index: 2;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
   }

   .hero .innerWrap {
      position: relative;
      z-index: 3;
   }

   .hero .main-copy {
      font-size: 72px;
      color: var(--color-white);
      font-family: var(--font-Jost);
      line-height: 1.33;
      font-weight: 500;
      letter-spacing: .2em;
      margin-bottom: 56px;
   }

   .hero .sub-copy {
      font-size: 32px;
      letter-spacing: .2em;
      display: inline-block;
      line-height: 1;
      padding: 16px 0 16px 16px;
   }

   .about {
      background-color: var(--color-lightgrey);
      padding-top: 96px;
      padding-bottom: 96px;
   }

   .about h2.h2_common {
      align-items: center;
      margin-bottom: 0;
   }

   .about .innerWrap>div {
      margin-top: clamp(-56px, -9.259vw + 55.11px, -16px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 56px;
   }

   .about .innerWrap>div .section-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
   }

   .about .innerWrap>div .section-copy span {
      padding: 0 0 0 16px;
      line-height: 1.2;
   }

   .about .innerWrap>div>p:last-child {
      text-align: center;
   }

   .service .innerWrap>p {
      margin-bottom: 64px;
      font-weight: 500;
   }

   .service .service-block {
      display: flex;
      gap: 54px;
      justify-content: space-between;
      align-items: flex-start
   }

   .service .service-block2 {
      flex-direction: row-reverse;
   }

   .service .service-block::before {
      content: "";
      display: block;
      width: 46.875vw;
      max-width: 675px;
      aspect-ratio: 675 / 290;
      background-size: cover;
      background-position: center center;
      flex-shrink: 0;
      background-repeat: no-repeat;
   }

   .service .service-block1::before {
      background-image: url(../img/img_service01.png);
   }

   .service .service-block2::before {
      background-image: url(../img/img_service02.png);
   }

   .service .service-block1 {
      padding-right: max(0px, (100vw - 1200px) / 2);
      margin-bottom: 72px;
   }

   .service .service-block2 {
      padding-left: max(0px, (100vw - 1200px) / 2);
   }

   .service .service-block h3 {
      display: flex;
      flex-direction: column;
      gap: 16px;
      font-weight: 500;
      align-items: flex-start;
      font-size: 24px;
      letter-spacing: .2em;
      line-height: 1;
      margin-bottom: 24px;
   }

   .service .service-block h3 span {
      font-size: 16px;
      padding: 8px;
   }

   .youtube::before {
      content: "";
      display: block;
      width: 100%;
      max-width: 730px;
      aspect-ratio: 730 / 49;
      margin: 0 auto;
      background-image: url(../img/bg_youtube_pc.svg);
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
   }

   .youtube .innerWrap {
      background-color: var(--color-lightgrey);
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: -4px;
      padding-bottom: 72px;
   }

   .youtube h2 {
      display: inline-block;
      transform: translateY(-50%);
      margin-bottom: 16px;
      font-weight: 500;
      letter-spacing: .2em;
      line-height: 1;
      padding: 8px;
   }

   .youtube .innerWrap>p:first-of-type {
      text-align: center;
      margin-bottom: 36px;
   }

   .youtube .innerWrap>p.yt-container {
      width: 100%;
      max-width: 756px;
   }

   .company .innerWrap>p {
      font-weight: 500;
      margin-bottom: 64px;
   }

   .company .company-info {
      border-top: 1px solid #CACACA;
   }

   .company .info-row {
      display: flex;
      border-bottom: 1px solid #CACACA;
      align-items: center;
   }

   .company .company-info dt {
      flex: 0 0 370px;
      padding: 40px 0 40px 60px;
      font-weight: 700;
      letter-spacing: .2em;
      line-height: 2;
   }

   .company .company-info dd {
      flex: 1;
      padding: 40px 0;
      margin: 0;
      font-weight: 500;
      letter-spacing: .2em;
      line-height: 2;
   }
}






/* ============================= レスポンシブ〜1440px ============================= */
@media screen and (max-width:1440px) {

   header .innerWrap,
   footer .innerWrap,
   main>section .innerWrap {
      padding-left: 24px;
      padding-right: 24px;
   }

   .service-block1>div {
      padding-right: 24px;
   }

   .service-block2>div {
      padding-left: 24px;
   }
}

/* ============================= レスポンシブ〜1200px ============================= */
@media screen and (max-width:1200px) {
   .company .company-info dt {
      flex: 0 0 30%;
      padding-left: 20px;
   }
}

/* ============================= レスポンシブ〜1024px ============================= */
@media screen and (max-width:1080px) {
   .tb {
      display: revert;
   }

   .cta .pc {
      display: none;
   }
}

/* ============================= レスポンシブ〜768px ============================= */
@media screen and (max-width:768px) {
   .pc {
      display: none;
   }

   .sp {
      display: revert;
   }

   main>section {
      margin-bottom: 56px;
   }

   main>section.service {
      margin-bottom: 20px;
   }

   .section-copy {
      font-size: 24px;
   }

   h2.h2_common {
      gap: 24px;
      margin-bottom: 24px;
   }

   h2.h2_common span {
      font-size: 24px;
   }

   .hero {
      position: relative;
      height: 800px;
   }

   .hero .main-copy {
      font-size: 40px;
      margin-bottom: 32px;
   }

   .hero .sub-copy {
      font-size: 24px;
      padding: 8px 0 8px 8px;
   }

   .about {
      padding-top: 40px;
      padding-bottom: 56px;
   }

   .about .innerWrap>div {
      gap: 24px;
   }

   .service .innerWrap>p {
      margin-bottom: 40px;
   }

   .service .service-block {
      gap: 32px;
   }

   .service .service-block::before {
      width: 100%;
      max-width: 100%;
      aspect-ratio: 390 / 290;
   }

   .service .service-block1 {
      flex-direction: column;
      margin-bottom: 36px;
   }

   .service .service-block2 {
      flex-direction: column;
   }

   .service .service-block1::before {
      background-image: url(../img/img_service01_sp.png);
   }

   .service .service-block2::before {
      background-image: url(../img/img_service02_sp.png);
   }

   .service-block1>div,
   .service-block2>div {
      padding-right: 24px;
      padding-left: 24px;
   }

   .service .service-block h3 {
      margin-bottom: 16px;
   }

   .youtube .innerWrap {
      padding-bottom: 40px;
   }

   .youtube::before {
      max-width: 306px;
      aspect-ratio: 306 / 97;
      background-image: url(../img/bg_youtube_sp.svg);
   }

   .youtube h2 {
      margin-bottom: 12px;
   }

   .youtube .innerWrap>p:first-of-type {
      margin-bottom: 24px;
   }

   .company .innerWrap>p {
      margin-bottom: 40px;
   }

   .company .info-row {
      align-items: flex-start;
      flex-direction: column;
   }

   .company .company-info dt {
      padding: 24px 0 0 18px;
      width: 100%;
   }

   .company .company-info dd {
      padding: 0 0 24px 18px;
      width: 100%;
      line-height: 1.8;
   }

   footer {
      padding: 48px 0 36px;
   }

   footer .innerWrap>p:first-of-type {
      margin-bottom: 24px;
   }

   footer .innerWrap ul {
      flex-direction: column;
      align-items: center;
      gap: 24px;
      margin-bottom: 48px;
   }
}


/* ============================= レスポンシブ〜540px ============================= */
@media screen and (max-width:540px) {
   .ssp {
      display: revert;
   }

   h2.h2_common {
      font-size: 50px;
      letter-spacing: .15em;
   }

   h2.h2_common span {
      font-size: 20px;
      letter-spacing: .15em;
   }

   header .innerWrap,
   footer .innerWrap,
   main>section .innerWrap {
      padding-left: 18px;
      padding-right: 18px;
   }

   .service-block1>div {
      padding-right: 18px;
   }

   .service-block2>div {
      padding-left: 18px;
   }
}


/* ============================= ハンバーガーメニュー〜900px ============================= */
@media screen and (max-width: 900px) {
   body.is-open {
      overflow: hidden;
   }

   body::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.25);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
   }

   body.is-open::after {
      opacity: 1;
      visibility: visible;
   }

   body.is-open header {
      z-index: 1100;
      background-color: transparent !important;
   }

   .ham {
      display: flex !important;
   }

   .global-menu {
      display: none;
   }

   .hamburger-menu {
      width: 34px;
      height: 20px;
      cursor: pointer;
      z-index: 1100;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      position: relative;
   }

   .hamburger-menu .bar {
      width: 34px;
      height: 1px;
      background-color: var(--color-white);
      transition: all 0.3s ease;
      display: block;
   }

   .header-menu-drawer {
      position: fixed;
      top: 0;
      right: -500px;
      width: 500px;
      height: 100vh;
      background-color: var(--color-text);
      padding: 0;
      transition: right 0.4s ease;
      z-index: 1050;
      overflow-y: auto;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   @media screen and (max-width: 768px) {
      .header-menu-drawer {
         right: -100%;
         width: 100%;
      }
   }

   body.is-open .header-menu-drawer {
      right: 0;
   }

   header .global-nav ul {
      flex-direction: column;
      gap: 64px;
   }

   .global-nav ul li {
      width: 100%;
   }

   .global-nav ul li a {
      color: var(--color-white);
      font-size: 32px;
      font-family: var(--font-Jost);
      line-height: 1.2;
   }

   .global-nav ul li a span {
      font-size: 16px;
      font-family: var(--font-default);
   }

   body.is-open .hamburger-menu .bar:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
   }

   body.is-open .hamburger-menu .bar:nth-child(2) {
      opacity: 0;
   }

   body.is-open .hamburger-menu .bar:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
   }
}