@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;1,100&display=swap");
html {
  font-size: 16px;
  /* ルート要素 */ }
  @media (max-width: 1390px) {
    html {
      font-size: 14px; } }
  @media (max-width: 780px) {
    html {
      font-size: 14px; } }
  @media (max-width: 622px) {
    html {
      font-size: 13px; } }
  html .mb101 {
    font-family: "Gothic MB101 DemiBold", sans-serif; }
  html body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    color: #000;
    line-height: 1.5; }
  html .video_width, html .wp-block-embed.is-type-video {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1rem 0 2rem 0; }
    html .video_width .video_padding, html .video_width .wp-block-embed__wrapper, html .wp-block-embed.is-type-video .video_padding, html .wp-block-embed.is-type-video .wp-block-embed__wrapper {
      width: 100%;
      position: relative;
      padding-top: 56.25%;
      height: 0;
      overflow: hidden; }
      html .video_width .video_padding iframe, html .video_width .video_padding video, html .video_width .wp-block-embed__wrapper iframe, html .video_width .wp-block-embed__wrapper video, html .wp-block-embed.is-type-video .video_padding iframe, html .wp-block-embed.is-type-video .video_padding video, html .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe, html .wp-block-embed.is-type-video .wp-block-embed__wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
  html br.tb {
    display: none; }
    @media (max-width: 780px) {
      html br.tb {
        display: inline; } }
  html #loadingWindow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white; }
  html h1.center, html h2.center, html h3.center {
    text-align: center; }
  html h1.right, html h2.right, html h3.right {
    text-align: right; }
  html .jsThumbnail {
    position: absolute;
    transform-origin: left;
    width: 640px;
    height: 360px;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto !important;
    background-color: white;
    background-image: url(../image/jsThumbnailBack.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden; }
    html .jsThumbnail .benefit {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 12%;
      border-radius: 100rem;
      background-color: #F48D00;
      color: white;
      width: 125px;
      height: 125px;
      margin: auto;
      font-weight: bold;
      font-family: "Gothic MB101 DemiBold","M PLUS 1p", sans-serif;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem; }
      html .jsThumbnail .benefit small {
        display: block;
        font-size: 1rem; }
      html .jsThumbnail .benefit span {
        font-size: 1.6rem; }
      html .jsThumbnail .benefit b {
        font-size: 1.6rem; }
    html .jsThumbnail .beforeImage, html .jsThumbnail .afterImage {
      border: 6px white solid;
      overflow: hidden;
      width: 180px;
      position: absolute;
      height: 290px;
      padding: 0;
      bottom: 6%;
      margin: auto;
      box-shadow: 0 0 12px #888;
      background-color: gray; }
      html .jsThumbnail .beforeImage img, html .jsThumbnail .afterImage img {
        transform: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto; }
    html .jsThumbnail .beforeImage {
      left: 10%; }
    html .jsThumbnail .afterImage {
      right: 10%; }
  html .linkWrap {
    margin-top: 2.5rem; }
    html .linkWrap.center a {
      margin: auto; }
    html .linkWrap a, html .linkWrap span {
      background: transparent linear-gradient(108deg, #F48D00 0%, #FF6767 100%) 0% 0% no-repeat padding-box;
      color: white;
      border-radius: 10rem;
      padding: 1rem 2rem;
      color: white;
      min-width: 10rem;
      font-weight: bold;
      font-size: 1.15rem;
      display: inline-flex;
      position: relative;
      align-items: center; }
      @media (max-width: 622px) {
        html .linkWrap a, html .linkWrap span {
          font-size: 1rem;
          display: block; } }
      html .linkWrap a:before, html .linkWrap span:before {
        border-radius: 10rem;
        margin-right: 0.5rem;
        width: 1.8rem;
        height: 1.8rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transform: rotate(90deg);
        content: "▲";
        font-size: 0.75rem;
        color: #F48D00;
        background-color: white; }
      html .linkWrap a:nth-of-type(2), html .linkWrap span:nth-of-type(2) {
        margin-left: 1rem; }
        @media (max-width: 622px) {
          html .linkWrap a:nth-of-type(2), html .linkWrap span:nth-of-type(2) {
            margin-top: 1rem;
            margin-left: 0; } }
    html .linkWrap.white a, html .linkWrap.white span {
      background-color: #fff;
      color: #000;
      border-radius: 10rem; }
  html footer .footerInner {
    max-width: 80rem;
    margin: auto;
    width: 100%;
    justify-content: space-between;
    display: flex;
    padding: 30px 1rem; }
    html footer .footerInner ul {
      display: block; }
      html footer .footerInner ul li a {
        padding: 0.5rem;
        text-align: right;
        display: block;
        font-size: 0.875rem; }
        html footer .footerInner ul li a:hover {
          text-decoration: underline; }
    html footer .footerInner .logo a {
      display: block; }
    html footer .footerInner .logo small {
      font-size: 0.75rem; }
    @media (max-width: 622px) {
      html footer .footerInner {
        display: flex;
        flex-direction: column-reverse; }
        html footer .footerInner ul {
          margin-top: 2rem; }
          html footer .footerInner ul li {
            text-align: left; }
            html footer .footerInner ul li a {
              text-align: left; } }
  html header {
    background-color: white;
    align-items: center;
    width: 100%;
    right: 0;
    top: 0;
    z-index: 100;
    display: flex;
    position: relative;
    z-index: 998;
    justify-content: space-between;
    padding: 0 1rem;
    left: 0;
    position: fixed; }
    html header .logo {
      width: 200px; }
      @media (max-width: 622px) {
        html header .logo {
          width: 150px; } }
      html header .logo img {
        width: 100%;
        height: auto; }
    html header .menuIcon {
      width: 2.5rem;
      height: 1rem;
      cursor: pointer;
      display: none;
      position: relative; }
      @media (max-width: 900px) {
        html header .menuIcon {
          display: block; } }
      html header .menuIcon span {
        width: 100%;
        display: block;
        height: 1px;
        background-color: black;
        position: absolute;
        left: 0;
        right: 0; }
        html header .menuIcon span:nth-of-type(1) {
          top: 0; }
        html header .menuIcon span:nth-of-type(2) {
          bottom: 0; }
    html header .menu-header-container {
      transition: all ease 1s; }
      @media (max-width: 900px) {
        html header .menu-header-container {
          position: absolute;
          top: 10rem;
          right: -100%; }
          html header .menu-header-container.active {
            right: 0; } }
      html header .menu-header-container ul {
        display: flex;
        justify-content: flex-end;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        transition: all ease 1s; }
        @media (max-width: 900px) {
          html header .menu-header-container ul {
            border-radius: 10px 0 0 10px;
            display: block;
            padding: 2rem;
            padding-right: 4rem; }
            html header .menu-header-container ul li {
              margin: 2rem 0; } }
        html header .menu-header-container ul li {
          margin-left: 1rem;
          position: relative; }
          html header .menu-header-container ul li a, html header .menu-header-container ul li .a {
            line-height: 1;
            font-size: 0.875rem;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            cursor: pointer; }
            html header .menu-header-container ul li a:before, html header .menu-header-container ul li .a:before {
              font-size: 0.5rem;
              margin-right: 0.5rem;
              transform: rotate(90deg);
              content: "▲"; }
          html header .menu-header-container ul li ul.sub-menu {
            display: none; }
          html header .menu-header-container ul li.menu-item-has-children {
            position: relative; }
            html header .menu-header-container ul li.menu-item-has-children ul.sub-menu {
              display: none;
              width: 18rem;
              padding: 1rem;
              background-color: #fff; }
              @media (max-width: 900px) {
                html header .menu-header-container ul li.menu-item-has-children ul.sub-menu {
                  background-color: rgba(0, 0, 0, 0);
                  display: block;
                  padding: 0;
                  width: auto;
                  position: static;
                  backdrop-filter: unset;
                  padding: 0 0 0 1rem; }
                  html header .menu-header-container ul li.menu-item-has-children ul.sub-menu li {
                    margin: 1rem 0; } }
            html header .menu-header-container ul li.menu-item-has-children:hover ul {
              position: absolute;
              top: 99%;
              left: 0;
              display: block; }
              @media (max-width: 900px) {
                html header .menu-header-container ul li.menu-item-has-children:hover ul {
                  position: static; } }
  html .firstViewSection {
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    background-position: cover;
    background-attachment: fixed;
    background-size: cover;
    perspective: 601px;
    transform-style: preserve-3d;
    perspective-origin: 97% 25%; }
    @media (max-width: 622px) {
      html .firstViewSection {
        min-height: 100vw; } }
    @media (max-width: 622px) {
      html .firstViewSection .contentsBody {
        max-height: 100vw;
        overflow: hidden;
        position: relative;
        min-height: 100vw; } }
    html .firstViewSection .contentsBody .videoWrap {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
      html .firstViewSection .contentsBody .videoWrap video, html .firstViewSection .contentsBody .videoWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: none;
        pointer-events: none; }
    html .firstViewSection .contentsBody .messageBody {
      z-index: 111;
      position: absolute;
      left: 10%;
      bottom: 0;
      height: fit-content;
      margin-bottom: 7rem; }
      @media (max-width: 622px) {
        html .firstViewSection .contentsBody .messageBody {
          margin: auto;
          left: 2rem;
          right: 0;
          bottom: 3rem; } }
      html .firstViewSection .contentsBody .messageBody h1 {
        font-weight: bold;
        font-size: 3rem;
        color: white;
        letter-spacing: 0em;
        font-family: "Gothic MB101 DemiBold","M PLUS 1p", sans-serif; }
        @media (max-width: 622px) {
          html .firstViewSection .contentsBody .messageBody h1 {
            font-size: 7.5vw; } }
      html .firstViewSection .contentsBody .messageBody p {
        color: white;
        font-weight: bold;
        line-height: 1.8;
        font-size: 1.25rem; }
        @media (max-width: 622px) {
          html .firstViewSection .contentsBody .messageBody p {
            font-size: 4vw; } }
    html .firstViewSection:after {
      background-color: rgba(0, 0, 0, 0.25);
      height: 100%;
      width: 100%;
      content: "";
      display: block;
      position: absolute; }
    @media (min-width: 1200px) {
      html .firstViewSection {
        perspective-origin: 97% 35%; } }
    html .firstViewSection .scrollBody .display {
      box-shadow: 0 0 12px #000;
      border-radius: 1rem;
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      border: 1px solid #999; }
      @media (max-width: 622px) {
        html .firstViewSection .scrollBody .display {
          box-shadow: 0 0 12px gray; } }
      html .firstViewSection .scrollBody .display:before {
        content: '';
        /*絶対配置でキラッと光るの位置を決める*/
        position: absolute;
        top: 0;
        left: -105%;
        /*キラッと光る形状*/
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
        transform: skewX(-25deg);
        transition-delay: 3s;
        z-index: 1111; }
        @media (max-width: 622px) {
          html .firstViewSection .scrollBody .display:before {
            transition-delay: 0s; } }
      html .firstViewSection .scrollBody .display.active:before {
        animation: shine 4.7s; }
      html .firstViewSection .scrollBody .display.active .after {
        opacity: 1;
        clip-path: polygon(0% -100%, 100% 0%, 100% 100%, 0 100%); }
@keyframes shine {
  50% {
    left: -100%; }
  100% {
    left: 125%; } }
      html .firstViewSection .scrollBody .display img {
        width: 100%;
        transition: all ease 1.5s;
        transition-delay: 3.5s;
        height: 100%;
        border-radius: 1rem; }
        @media (max-width: 622px) {
          html .firstViewSection .scrollBody .display img {
            transition-delay: 0s; } }
      html .firstViewSection .scrollBody .display .after {
        opacity: 1;
        position: absolute;
        left: 0;
        top: 0;
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0 100%); }
    @media (max-width: 622px) {
      html .firstViewSection .scrollBody {
        position: relative;
        display: flex;
        margin-top: 2rem; }
        html .firstViewSection .scrollBody ul {
          display: flex;
          flex-wrap: nowrap; }
          html .firstViewSection .scrollBody ul.first {
            animation: spfirstLoop 80s -40s linear infinite; }
          html .firstViewSection .scrollBody ul.second {
            animation: spfirstLoop2 80s linear infinite; }
          html .firstViewSection .scrollBody ul li {
            padding: 1rem; }
            html .firstViewSection .scrollBody ul li:nth-of-type(25) {
              display: none; }
            html .firstViewSection .scrollBody ul li .display {
              width: calc(100vw / 3);
              transition-delay: 1.5s !important; }
              html .firstViewSection .scrollBody ul li .display img {
                transition-delay: 1.5s !important; } }
    @media (min-width: 622px) {
      html .firstViewSection .scrollBody {
        z-index: 1;
        position: absolute;
        right: 0%;
        bottom: 0rem;
        width: 50%;
        height: 110vh;
        max-width: 880px;
        overflow: hidden;
        transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(13deg) rotateY(0deg) rotateZ(0deg); } }
  @media (min-width: 622px) and (max-width: 622px) {
    html .firstViewSection .scrollBody {
      position: relative;
      background-color: white;
      width: 100%;
      height: 120vw;
      overflow: hidden;
      transform: none;
      max-width: 100%; } }
    @media (min-width: 622px) {
        html .firstViewSection .scrollBody ul {
          right: 0;
          bottom: 0;
          display: flex;
          flex-wrap: wrap; }
          html .firstViewSection .scrollBody ul.first {
            animation: firstLoop 30s -15s linear infinite; } }
      @media (min-width: 622px) and (max-width: 1390px) {
        html .firstViewSection .scrollBody ul.first {
          animation: firstLoop 30s -15s linear infinite; } }
    @media (min-width: 622px) {
          html .firstViewSection .scrollBody ul.second {
            animation: firstLoop2 30s linear infinite; } }
      @media (min-width: 622px) and (max-width: 1390px) {
        html .firstViewSection .scrollBody ul.second {
          animation: firstLoop2 30s linear infinite; } }
    @media (min-width: 622px) {
          html .firstViewSection .scrollBody ul li {
            width: 20%;
            padding: 1rem;
            height: fit-content; } }
      @media (min-width: 622px) and (min-width: 1281px) {
        html .firstViewSection .scrollBody ul li {
          width: 20%; }
          html .firstViewSection .scrollBody ul li:nth-of-type(1), html .firstViewSection .scrollBody ul li:nth-of-type(3), html .firstViewSection .scrollBody ul li:nth-of-type(5), html .firstViewSection .scrollBody ul li:nth-of-type(6), html .firstViewSection .scrollBody ul li:nth-of-type(8), html .firstViewSection .scrollBody ul li:nth-of-type(10), html .firstViewSection .scrollBody ul li:nth-of-type(11), html .firstViewSection .scrollBody ul li:nth-of-type(13), html .firstViewSection .scrollBody ul li:nth-of-type(15), html .firstViewSection .scrollBody ul li:nth-of-type(16), html .firstViewSection .scrollBody ul li:nth-of-type(18), html .firstViewSection .scrollBody ul li:nth-of-type(20), html .firstViewSection .scrollBody ul li:nth-of-type(21), html .firstViewSection .scrollBody ul li:nth-of-type(23), html .firstViewSection .scrollBody ul li:nth-of-type(25) {
            transform: translateY(-50%); } }
      @media (min-width: 622px) and (max-width: 1280px) {
        html .firstViewSection .scrollBody ul li {
          width: 25%; }
          html .firstViewSection .scrollBody ul li:last-of-type {
            display: none; }
          html .firstViewSection .scrollBody ul li:nth-of-type(even) {
            transform: translateY(-50%); } }
      @media (min-width: 622px) and (max-width: 980px) {
        html .firstViewSection .scrollBody ul li {
          transform: translateY(0%);
          width: 50%; }
          html .firstViewSection .scrollBody ul li:nth-of-type(even) {
            transform: translateY(-50%); } }
    @media (min-width: 622px) {
            html .firstViewSection .scrollBody ul li .display {
              box-shadow: 0 0 12px #000;
              border-radius: 1rem;
              position: relative;
              overflow: hidden;
              border-radius: 1rem;
              border: 1px solid #999; } }
        @media (min-width: 622px) and (max-width: 622px) {
          html .firstViewSection .scrollBody ul li .display {
            box-shadow: 0 0 12px gray; } }
    @media (min-width: 622px) {
              html .firstViewSection .scrollBody ul li .display:before {
                content: '';
                /*絶対配置でキラッと光るの位置を決める*/
                position: absolute;
                top: 0;
                left: -105%;
                /*キラッと光る形状*/
                width: 50%;
                height: 100%;
                background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
                transform: skewX(-25deg);
                transition-delay: 3s;
                z-index: 1111; }
              html .firstViewSection .scrollBody ul li .display.active:before {
                animation: shine 4.7s; }
              html .firstViewSection .scrollBody ul li .display.active .after {
                opacity: 1;
                clip-path: polygon(0% -100%, 100% 0%, 100% 100%, 0 100%); }
      @keyframes shine {
        50% {
          left: -100%; }
        100% {
          left: 125%; } }
              html .firstViewSection .scrollBody ul li .display img {
                width: 100%;
                transition: all ease 1.5s;
                transition-delay: 3.5s;
                height: 100%; }
              html .firstViewSection .scrollBody ul li .display .after {
                opacity: 1;
                position: absolute;
                left: 0;
                top: 0;
                clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0 100%); } }
  html .noiseGray {
    color: white;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-image: url(../image/darkNoise.jpg); }
    @media (max-width: 622px) {
      html .noiseGray {
        background-attachment: inherit; } }
  html .blurSection {
    position: relative; }
    html .blurSection .stackSectionInner {
      position: relative;
      z-index: 111; }
    html .blurSection:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: white;
      backdrop-filter: blur(12px);
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.6; }
  html .stackSection {
    overflow: inherit;
    padding: 0; }
    html .stackSection .backgroundText {
      position: sticky;
      display: none;
      width: 100%;
      top: 100%;
      margin: auto;
      text-align: center;
      font-size: 14vw;
      line-height: 1;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 100;
      font-style: normal; }
      html .stackSection .backgroundText.yellow {
        color: #F48D00; }
    html .stackSection .stackSectionInner {
      max-width: 80rem;
      margin: auto;
      display: flex;
      width: 100%; }
      @media (max-width: 622px) {
        html .stackSection .stackSectionInner {
          display: block; } }
      html .stackSection .stackSectionInner .leftBoxWrap {
        position: sticky;
        top: 30%;
        height: fit-content;
        height: 100vh; }
        @media (max-width: 622px) {
          html .stackSection .stackSectionInner .leftBoxWrap {
            position: relative;
            height: fit-content; } }
        html .stackSection .stackSectionInner .leftBoxWrap .leftBox {
          left: 0;
          padding: 5rem 2rem;
          height: fit-content; }
          @media (max-width: 622px) {
            html .stackSection .stackSectionInner .leftBoxWrap .leftBox {
              padding: 5rem 1rem; } }
          html .stackSection .stackSectionInner .leftBoxWrap .leftBox p {
            font-weight: bold;
            font-size: 1.15rem; }
            @media (max-width: 622px) {
              html .stackSection .stackSectionInner .leftBoxWrap .leftBox p {
                font-size: 1rem; } }
          html .stackSection .stackSectionInner .leftBoxWrap .leftBox h2 {
            font-size: 2.5rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            font-family: "Gothic MB101 DemiBold", sans-serif; }
            @media (max-width: 622px) {
              html .stackSection .stackSectionInner .leftBoxWrap .leftBox h2 {
                letter-spacing: 0;
                font-size: 1.8rem; } }
    html .stackSection .magicSwiper {
      min-height: 2500px;
      width: 50%;
      padding: 10rem 0; }
      @media (max-width: 622px) {
        html .stackSection .magicSwiper {
          width: 100%;
          min-height: auto;
          padding: 0; } }
      html .stackSection .magicSwiper .swiper-pagination, html .stackSection .magicSwiper .swiper-button-prev, html .stackSection .magicSwiper .swiper-button-next {
        display: none; }
        @media (max-width: 622px) {
          html .stackSection .magicSwiper .swiper-pagination, html .stackSection .magicSwiper .swiper-button-prev, html .stackSection .magicSwiper .swiper-button-next {
            display: block; } }
      html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap {
        align-items: flex-start;
        justify-content: center;
        min-height: 150vh;
        display: flex; }
        @media (max-width: 622px) {
          html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap {
            min-height: auto;
            display: initial;
            max-height: 150vw;
            margin-bottom: 5rem; } }
        html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap.swiper-slide-duplicate {
          display: none; }
          @media (max-width: 622px) {
            html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap.swiper-slide-duplicate {
              display: flex; } }
        html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap.activeMagic .magicDisplay figure .MagicAfter {
          opacity: 1; }
        html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap.activeMagic .magicDisplay figure .MagicAfter {
          opacity: 1; }
        html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap.activeMagic .magicDisplay figure .magic {
          animation: magicAction 2s linear forwards; }
        html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .function {
          width: 1px; }
          html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .function .before {
            height: 100vh; }
            @media (max-width: 622px) {
              html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .function .before {
                height: 120vw; } }
          html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .function .magic {
            height: 200vh; }
            @media (max-width: 622px) {
              html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .function .magic {
                height: 120vw; } }
        html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay {
          position: sticky;
          top: calc(80px + 2vw);
          min-height: 85vh;
          padding-bottom: 2rem; }
          @media (max-width: 622px) {
            html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay {
              top: 35vw;
              padding-bottom: 0;
              position: static;
              min-height: 120vw; } }
          html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure {
            border-radius: 2rem;
            width: 400px;
            height: 700px;
            border: 2px darkgray solid;
            overflow: hidden;
            position: relative;
            z-index: 1;
            max-height: 85vh; }
            @media (max-width: 622px) {
              html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure {
                width: 80vw;
                margin: auto;
                height: 150vw;
                max-height: 150vw; } }
            html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure .magic {
              opacity: 0;
              z-index: 100;
              left: 0;
              object-fit: none;
              mix-blend-mode: plus-lighter; }
              @media (min-width: 622px) {
                html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure .magic.active {
                  animation: magicAction 2s linear forwards; } }
            html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure .MagicAfter {
              opacity: 0;
              transition-delay: 1s; }
              @media (min-width: 622px) {
                html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure .MagicAfter.active {
                  opacity: 1; } }
            html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure:after {
              padding-top: 180%;
              content: "";
              display: block; }
            html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure img {
              height: 100%;
              object-fit: cover;
              position: absolute;
              left: 0;
              top: 0;
              margin: auto;
              width: fit-content;
              transition: all ease 1s;
              width: 100%;
              right: 0; }
              @media (min-width: 622px) {
                html .stackSection .magicSwiper .magicDisplayContainer .magicDisplayWrap .magicDisplay figure img.MagicAfter {
                  opacity: 0; } }
  html #modalBackground {
    background-color: rgba(0, 0, 0, 0.65);
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; }
  html .trainerModalWrap .trainerModal {
    position: fixed;
    width: 100%;
    max-width: 400px;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 0 12px #000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    display: none;
    z-index: 1111;
    overflow: hidden; }
    html .trainerModalWrap .trainerModal.active {
      display: block; }
    html .trainerModalWrap .trainerModal .trainerModalInner {
      overflow: scroll; }
      html .trainerModalWrap .trainerModal .trainerModalInner figure {
        overflow: hidden;
        height: 200px;
        width: 100%;
        border-radius: 0.5rem 0.5rem 0 0; }
        html .trainerModalWrap .trainerModal .trainerModalInner figure img {
          width: 100%;
          height: auto; }
      html .trainerModalWrap .trainerModal .trainerModalInner .detail {
        padding: 2rem 1rem; }
        html .trainerModalWrap .trainerModal .trainerModalInner .detail .modalName .en {
          font-weight: bold;
          font-family: "Montserrat", sans-serif;
          font-size: 2.5rem;
          line-height: 1; }
        html .trainerModalWrap .trainerModal .trainerModalInner .detail .modalName .jp {
          font-weight: bold;
          font-size: 0.75rem; }
        html .trainerModalWrap .trainerModal .trainerModalInner .detail .modalCopy {
          font-weight: bold;
          font-size: 1.15rem;
          margin-top: 1rem;
          font-family: "Gothic MB101 DemiBold", sans-serif; }
        html .trainerModalWrap .trainerModal .trainerModalInner .detail .modalMessage {
          white-space: pre-wrap;
          margin-top: 1rem;
          font-size: 0.875rem; }
  @media (max-width: 622px) {
    html .trainerScrollWrap {
      align-items: flex-start; } }
  html .trainer {
    width: fit-content;
    padding: 2rem;
    height: fit-content;
    padding-right: 5rem; }
    @media (max-width: 622px) {
      html .trainer {
        width: 48%;
        padding: 1rem; } }
    html .trainer .nameWrap {
      margin-top: 1rem; }
      html .trainer .nameWrap .en {
        font-size: 1.5rem; }
        @media (max-width: 622px) {
          html .trainer .nameWrap .en {
            font-size: 1.25rem; } }
      html .trainer .nameWrap .jp {
        font-size: 1rem; }
    html .trainer .imageWrap {
      position: relative;
      width: fit-content; }
      @media (max-width: 622px) {
        html .trainer .imageWrap {
          width: 100%; } }
      html .trainer .imageWrap .GoDetail {
        background-color: #5A5A5A;
        color: #F48D00;
        width: 10rem;
        height: 10rem;
        position: absolute;
        bottom: 0;
        border-radius: 30rem;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        transition: all ease 1s; }
        @media (max-width: 622px) {
          html .trainer .imageWrap .GoDetail {
            width: 5rem;
            height: 5rem; } }
        html .trainer .imageWrap .GoDetail:hover {
          transform: scale(1.1); }
        html .trainer .imageWrap .GoDetail span {
          display: block;
          text-align: center; }
          @media (max-width: 622px) {
            html .trainer .imageWrap .GoDetail span {
              transform: scale(0.7); } }
        @media (max-width: 622px) {
          html .trainer .imageWrap .GoDetail small {
            transform: scale(0.7); } }
      html .trainer .imageWrap figure {
        overflow: hidden;
        border-radius: 20rem;
        width: 30rem;
        height: 30rem; }
        @media (max-width: 622px) {
          html .trainer .imageWrap figure {
            width: 100%;
            position: relative;
            height: auto;
            overflow: hidden;
            border-radius: 40rem; }
            html .trainer .imageWrap figure:after {
              padding-top: 100%;
              display: block;
              content: "";
              width: 100%; } }
        html .trainer .imageWrap figure img {
          object-fit: cover;
          margin: auto;
          display: block;
          width: 100%;
          height: 100%; }
          @media (max-width: 622px) {
            html .trainer .imageWrap figure img {
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
              top: 0; } }

.accessSection {
  background-size: cover;
  background-image: url(../image/accessBack.png);
  background-position: right center; }

.contactSection {
  background-image: url(../image/darkNoise.jpg); }
  .contactSection * {
    text-align: center;
    color: white; }

.contactSection, .accessSection, .trainerSection {
  background-color: #5A5A5A;
  display: flex;
  align-items: center; }
  @media (max-width: 622px) {
    .contactSection, .accessSection, .trainerSection {
      min-height: 100vw;
      padding: 5rem 1rem; } }
  .contactSection .contactSectionInner, .contactSection .accessSectionInner, .contactSection .trainerSectionInner, .accessSection .contactSectionInner, .accessSection .accessSectionInner, .accessSection .trainerSectionInner, .trainerSection .contactSectionInner, .trainerSection .accessSectionInner, .trainerSection .trainerSectionInner {
    max-width: 80rem;
    width: 100%;
    margin: auto;
    height: 100%;
    padding: 2rem; }
    @media (max-width: 622px) {
      .contactSection .contactSectionInner, .contactSection .accessSectionInner, .contactSection .trainerSectionInner, .accessSection .contactSectionInner, .accessSection .accessSectionInner, .accessSection .trainerSectionInner, .trainerSection .contactSectionInner, .trainerSection .accessSectionInner, .trainerSection .trainerSectionInner {
        padding: 0rem; } }
    .contactSection .contactSectionInner.animated .linkWrap, .contactSection .accessSectionInner.animated .linkWrap, .contactSection .trainerSectionInner.animated .linkWrap, .accessSection .contactSectionInner.animated .linkWrap, .accessSection .accessSectionInner.animated .linkWrap, .accessSection .trainerSectionInner.animated .linkWrap, .trainerSection .contactSectionInner.animated .linkWrap, .trainerSection .accessSectionInner.animated .linkWrap, .trainerSection .trainerSectionInner.animated .linkWrap {
      opacity: 1;
      transform: translateY(0); }
    .contactSection .contactSectionInner.animated p, .contactSection .accessSectionInner.animated p, .contactSection .trainerSectionInner.animated p, .accessSection .contactSectionInner.animated p, .accessSection .accessSectionInner.animated p, .accessSection .trainerSectionInner.animated p, .trainerSection .contactSectionInner.animated p, .trainerSection .accessSectionInner.animated p, .trainerSection .trainerSectionInner.animated p {
      opacity: 1;
      transform: translateY(0); }
    .contactSection .contactSectionInner.animated h2, .contactSection .accessSectionInner.animated h2, .contactSection .trainerSectionInner.animated h2, .accessSection .contactSectionInner.animated h2, .accessSection .accessSectionInner.animated h2, .accessSection .trainerSectionInner.animated h2, .trainerSection .contactSectionInner.animated h2, .trainerSection .accessSectionInner.animated h2, .trainerSection .trainerSectionInner.animated h2 {
      font-family: "Gothic MB101 DemiBold", sans-serif; }
      .contactSection .contactSectionInner.animated h2 span, .contactSection .accessSectionInner.animated h2 span, .contactSection .trainerSectionInner.animated h2 span, .accessSection .contactSectionInner.animated h2 span, .accessSection .accessSectionInner.animated h2 span, .accessSection .trainerSectionInner.animated h2 span, .trainerSection .contactSectionInner.animated h2 span, .trainerSection .accessSectionInner.animated h2 span, .trainerSection .trainerSectionInner.animated h2 span {
        clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%); }
        .contactSection .contactSectionInner.animated h2 span:after, .contactSection .accessSectionInner.animated h2 span:after, .contactSection .trainerSectionInner.animated h2 span:after, .accessSection .contactSectionInner.animated h2 span:after, .accessSection .accessSectionInner.animated h2 span:after, .accessSection .trainerSectionInner.animated h2 span:after, .trainerSection .contactSectionInner.animated h2 span:after, .trainerSection .accessSectionInner.animated h2 span:after, .trainerSection .trainerSectionInner.animated h2 span:after {
          width: 100%;
          animation: h2SpanAnimation 0.5s linear forwards;
          animation-delay: 1s; }
          @media (max-width: 622px) {
            .contactSection .contactSectionInner.animated h2 span:after, .contactSection .accessSectionInner.animated h2 span:after, .contactSection .trainerSectionInner.animated h2 span:after, .accessSection .contactSectionInner.animated h2 span:after, .accessSection .accessSectionInner.animated h2 span:after, .accessSection .trainerSectionInner.animated h2 span:after, .trainerSection .contactSectionInner.animated h2 span:after, .trainerSection .accessSectionInner.animated h2 span:after, .trainerSection .trainerSectionInner.animated h2 span:after {
              display: none; } }
        @media (max-width: 622px) {
          .contactSection .contactSectionInner.animated h2 span, .contactSection .accessSectionInner.animated h2 span, .contactSection .trainerSectionInner.animated h2 span, .accessSection .contactSectionInner.animated h2 span, .accessSection .accessSectionInner.animated h2 span, .accessSection .trainerSectionInner.animated h2 span, .trainerSection .contactSectionInner.animated h2 span, .trainerSection .accessSectionInner.animated h2 span, .trainerSection .trainerSectionInner.animated h2 span {
            clip-path: none; } }
        .contactSection .contactSectionInner.animated h2 span:nth-of-type(2):after, .contactSection .accessSectionInner.animated h2 span:nth-of-type(2):after, .contactSection .trainerSectionInner.animated h2 span:nth-of-type(2):after, .accessSection .contactSectionInner.animated h2 span:nth-of-type(2):after, .accessSection .accessSectionInner.animated h2 span:nth-of-type(2):after, .accessSection .trainerSectionInner.animated h2 span:nth-of-type(2):after, .trainerSection .contactSectionInner.animated h2 span:nth-of-type(2):after, .trainerSection .accessSectionInner.animated h2 span:nth-of-type(2):after, .trainerSection .trainerSectionInner.animated h2 span:nth-of-type(2):after {
          animation-delay: 1.5s; }
    .contactSection .contactSectionInner h2, .contactSection .accessSectionInner h2, .contactSection .trainerSectionInner h2, .accessSection .contactSectionInner h2, .accessSection .accessSectionInner h2, .accessSection .trainerSectionInner h2, .trainerSection .contactSectionInner h2, .trainerSection .accessSectionInner h2, .trainerSection .trainerSectionInner h2 {
      font-size: 2.5rem;
      font-weight: bold;
      letter-spacing: 0.2em;
      color: #F48D00; }
      @media (max-width: 622px) {
        .contactSection .contactSectionInner h2, .contactSection .accessSectionInner h2, .contactSection .trainerSectionInner h2, .accessSection .contactSectionInner h2, .accessSection .accessSectionInner h2, .accessSection .trainerSectionInner h2, .trainerSection .contactSectionInner h2, .trainerSection .accessSectionInner h2, .trainerSection .trainerSectionInner h2 {
          letter-spacing: 0;
          font-size: 1.8rem; } }
      .contactSection .contactSectionInner h2 span, .contactSection .accessSectionInner h2 span, .contactSection .trainerSectionInner h2 span, .accessSection .contactSectionInner h2 span, .accessSection .accessSectionInner h2 span, .accessSection .trainerSectionInner h2 span, .trainerSection .contactSectionInner h2 span, .trainerSection .accessSectionInner h2 span, .trainerSection .trainerSectionInner h2 span {
        transition: all ease 0.5s;
        clip-path: polygon(0% 0, 0% 0%, 0% 100%, 0 100%);
        position: relative; }
        .contactSection .contactSectionInner h2 span:after, .contactSection .accessSectionInner h2 span:after, .contactSection .trainerSectionInner h2 span:after, .accessSection .contactSectionInner h2 span:after, .accessSection .accessSectionInner h2 span:after, .accessSection .trainerSectionInner h2 span:after, .trainerSection .contactSectionInner h2 span:after, .trainerSection .accessSectionInner h2 span:after, .trainerSection .trainerSectionInner h2 span:after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          top: 0;
          position: absolute;
          right: 0;
          background-color: #F48D00;
          transition: all ease 0.5s;
          animation-delay: 1s; }
        .contactSection .contactSectionInner h2 span:nth-of-type(2), .contactSection .accessSectionInner h2 span:nth-of-type(2), .contactSection .trainerSectionInner h2 span:nth-of-type(2), .accessSection .contactSectionInner h2 span:nth-of-type(2), .accessSection .accessSectionInner h2 span:nth-of-type(2), .accessSection .trainerSectionInner h2 span:nth-of-type(2), .trainerSection .contactSectionInner h2 span:nth-of-type(2), .trainerSection .accessSectionInner h2 span:nth-of-type(2), .trainerSection .trainerSectionInner h2 span:nth-of-type(2) {
          transition-delay: .5s; }
    .contactSection .contactSectionInner p, .contactSection .accessSectionInner p, .contactSection .trainerSectionInner p, .accessSection .contactSectionInner p, .accessSection .accessSectionInner p, .accessSection .trainerSectionInner p, .trainerSection .contactSectionInner p, .trainerSection .accessSectionInner p, .trainerSection .trainerSectionInner p {
      font-weight: bold;
      color: white;
      font-size: 1.15rem;
      margin-top: 2rem;
      line-height: 1.8;
      letter-spacing: 0.1em;
      transform: translateY(20%);
      opacity: 0;
      transition: all ease 1s;
      transition-delay: 2s; }
      @media (max-width: 622px) {
        .contactSection .contactSectionInner p, .contactSection .accessSectionInner p, .contactSection .trainerSectionInner p, .accessSection .contactSectionInner p, .accessSection .accessSectionInner p, .accessSection .trainerSectionInner p, .trainerSection .contactSectionInner p, .trainerSection .accessSectionInner p, .trainerSection .trainerSectionInner p {
          transition-delay: 0s;
          letter-spacing: 0;
          font-size: 1rem; } }
    .contactSection .contactSectionInner .linkWrap, .contactSection .accessSectionInner .linkWrap, .contactSection .trainerSectionInner .linkWrap, .accessSection .contactSectionInner .linkWrap, .accessSection .accessSectionInner .linkWrap, .accessSection .trainerSectionInner .linkWrap, .trainerSection .contactSectionInner .linkWrap, .trainerSection .accessSectionInner .linkWrap, .trainerSection .trainerSectionInner .linkWrap {
      transform: translateY(20%);
      opacity: 0;
      transition: all ease 1s;
      transition-delay: 2.5s; }
      @media (max-width: 622px) {
        .contactSection .contactSectionInner .linkWrap, .contactSection .accessSectionInner .linkWrap, .contactSection .trainerSectionInner .linkWrap, .accessSection .contactSectionInner .linkWrap, .accessSection .accessSectionInner .linkWrap, .accessSection .trainerSectionInner .linkWrap, .trainerSection .contactSectionInner .linkWrap, .trainerSection .accessSectionInner .linkWrap, .trainerSection .trainerSectionInner .linkWrap {
          transition-delay: 0s; } }

.trainerSection {
  color: white;
  background: none;
  min-height: auto;
  padding-top: 6rem;
  padding-bottom: 0; }

.scroll_container {
  height: 500vh; }
  @media (max-width: 622px) {
    .scroll_container {
      height: auto; } }

.sticky_wrap {
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh; }
  @media (max-width: 622px) {
    .sticky_wrap {
      height: auto;
      position: relative; } }

.horizontal_scroll {
  position: absolute;
  top: 0;
  height: 100%;
  width: 500vw;
  will-change: transform;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media (max-width: 622px) {
    .horizontal_scroll {
      display: block;
      width: 100%;
      height: auto;
      position: relative; } }

.scroll_container2 {
  height: calc(65vh * 4); }
  @media (max-width: 622px) {
    .scroll_container2 {
      height: auto !important; } }

.sticky_wrap2 {
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh; }
  @media (max-width: 622px) {
    .sticky_wrap2 {
      display: block;
      width: 100%;
      height: auto; } }

.horizontal_scroll2 {
  position: absolute;
  top: 0;
  height: 100%;
  width: fit-content;
  will-change: transform;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media (max-width: 622px) {
    .horizontal_scroll2 {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: auto;
      align-items: flex-start; } }
  @media (max-width: 622px) {
    .horizontal_scroll2 .trainer {
      width: 50%; } }

.sideScrollWrap .article {
  padding: 4rem 2rem;
  width: 100vw; }
  @media (max-width: 622px) {
    .sideScrollWrap .article {
      padding: 4rem 1rem; } }
  .sideScrollWrap .article .articleInner {
    max-width: 80rem;
    min-height: calc(100vh - 8rem);
    margin: auto;
    width: 100%;
    position: relative; }
    @media (max-width: 622px) {
      .sideScrollWrap .article .articleInner {
        min-height: calc(180vw - 8rem);
        max-width: 100%;
        display: flex;
        flex-direction: column-reverse; } }
    .sideScrollWrap .article .articleInner.animated .images figure {
      clip-path: polygon(30% 0, 100% 0%, 70% 100%, 0 100%); }
      .sideScrollWrap .article .articleInner.animated .images figure:after {
        right: 130%; }
    .sideScrollWrap .article .articleInner .images {
      position: absolute;
      right: 0;
      bottom: 0;
      height: fit-content;
      width: 70%; }
      @media (max-width: 622px) {
        .sideScrollWrap .article .articleInner .images {
          position: relative;
          width: 100%;
          margin-bottom: 1rem; } }
      .sideScrollWrap .article .articleInner .images figure {
        margin-top: 2rem;
        width: 100%;
        overflow: hidden;
        clip-path: polygon(100% 0, 100% 0%, 70% 100%, 70% 100%);
        transition: all ease 0.5s;
        transition-delay: 1s; }
        @media (max-width: 622px) {
          .sideScrollWrap .article .articleInner .images figure {
            transition-delay: 0s; } }
        .sideScrollWrap .article .articleInner .images figure:after {
          content: "";
          display: block;
          width: 30%;
          height: 100%;
          background-color: #F48D00;
          position: absolute;
          top: 0;
          right: 0;
          transition: all ease 1s;
          transform: skewX(-25.5deg);
          transition-delay: 1s; }
        .sideScrollWrap .article .articleInner .images figure img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .sideScrollWrap .article .articleInner .images .index {
        font-weight: bold;
        font-size: 30vw;
        position: absolute;
        line-height: 1;
        vertical-align: bottom;
        transform: translateY(15%);
        right: 0;
        bottom: 0;
        font-family: Arial, Helvetica, sans-serif; }
        @media (max-width: 622px) {
          .sideScrollWrap .article .articleInner .images .index {
            font-size: 50vw; } }
    .sideScrollWrap .article .articleInner .detail {
      width: 45%;
      position: relative;
      z-index: 10;
      padding-top: 5rem; }
      @media (max-width: 622px) {
        .sideScrollWrap .article .articleInner .detail {
          width: 100%;
          padding-top: 0; } }
      .sideScrollWrap .article .articleInner .detail h3 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: 0.1em;
        white-space: pre-wrap;
        font-family: "Gothic MB101 DemiBold", sans-serif; }
        @media (max-width: 622px) {
          .sideScrollWrap .article .articleInner .detail h3 {
            letter-spacing: 0;
            font-size: 1.8rem; } }
      .sideScrollWrap .article .articleInner .detail p {
        line-height: 1.8;
        margin-top: 2rem;
        font-size: 1rem;
        max-width: 70%;
        white-space: pre-wrap; }
        @media (max-width: 622px) {
          .sideScrollWrap .article .articleInner .detail p {
            font-size: 1rem;
            max-width: 100%; } }
        .sideScrollWrap .article .articleInner .detail p span {
          background-color: #F48D00; }
      .sideScrollWrap .article .articleInner .detail .subLine {
        max-width: 100%;
        margin-top: 2rem;
        font-weight: bold;
        font-size: 1.25rem;
        font-family: "Gothic MB101 DemiBold", sans-serif; }
        @media (max-width: 622px) {
          .sideScrollWrap .article .articleInner .detail .subLine {
            font-size: 1.25rem; } }

.flexTextImageWrap .flexTextImage {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .flexTextImageWrap .flexTextImage:nth-of-type(odd) {
    flex-direction: row-reverse; }
  @media (max-width: 622px) {
    .flexTextImageWrap .flexTextImage {
      display: block; } }
  .flexTextImageWrap .flexTextImage .detail {
    width: 47.5%; }
    @media (max-width: 622px) {
      .flexTextImageWrap .flexTextImage .detail {
        width: 100%; } }
    .flexTextImageWrap .flexTextImage .detail h3 {
      font-family: "Gothic MB101 DemiBold", sans-serif; }
    .flexTextImageWrap .flexTextImage .detail p {
      margin-top: 1rem; }
  .flexTextImageWrap .flexTextImage figure {
    margin-top: 2rem;
    width: 47.5%;
    overflow: hidden;
    clip-path: polygon(100% 0, 100% 0%, 70% 100%, 70% 100%);
    transition: all ease 0.5s;
    transition-delay: 1s; }
    @media (max-width: 622px) {
      .flexTextImageWrap .flexTextImage figure {
        width: 100%;
        margin-bottom: 1rem;
        transition-delay: 0s; } }
    .flexTextImageWrap .flexTextImage figure img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .flexTextImageWrap .flexTextImage figure.animated {
      clip-path: polygon(30% 0, 100% 0%, 70% 100%, 0 100%); }

.trainingFeature {
  background-color: #F48D00; }
  .trainingFeature .trainingFeatureFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    @media (max-width: 622px) {
      .trainingFeature .trainingFeatureFlex {
        display: block;
        padding-bottom: 40vw;
        margin-top: 2rem; } }
    .trainingFeature .trainingFeatureFlex figure {
      margin-top: 2rem;
      width: 50%;
      overflow: hidden;
      clip-path: polygon(100% 0, 100% 0%, 70% 100%, 70% 100%);
      transition: all ease 0.5s;
      transition-delay: 1s; }
      @media (max-width: 622px) {
        .trainingFeature .trainingFeatureFlex figure {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 75%;
          right: -10%;
          transition-delay: 0s; } }
      .trainingFeature .trainingFeatureFlex figure img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .trainingFeature .trainingFeatureFlex figure.animated {
        clip-path: polygon(30% 0, 100% 0%, 70% 100%, 0 100%); }
    .trainingFeature .trainingFeatureFlex .bigCopy {
      width: 50%;
      color: white;
      font-family: "Gothic MB101 DemiBold", sans-serif;
      font-size: 3vw;
      color: white;
      line-height: 1.5; }
      @media (min-width: 1280px) {
        .trainingFeature .trainingFeatureFlex .bigCopy {
          font-size: 2.5rem; } }
      @media (max-width: 622px) {
        .trainingFeature .trainingFeatureFlex .bigCopy {
          width: 100%;
          font-size: 5vw; } }
      .trainingFeature .trainingFeatureFlex .bigCopy span {
        display: block;
        font-size: 125%; }
        .trainingFeature .trainingFeatureFlex .bigCopy span b {
          font-size: 150%;
          color: #F48D00; }
  .trainingFeature .equal {
    transform: rotate(90deg);
    font-family: "Gothic MB101 DemiBold", sans-serif;
    color: #F48D00;
    font-size: 3.5rem;
    line-height: 1;
    width: fit-content;
    height: fit-content;
    margin: 2rem auto; }
    @media (max-width: 622px) {
      .trainingFeature .equal {
        margin: 0 auto; } }
  .trainingFeature .trainingFeatureImage {
    width: 100%;
    margin: 2rem auto; }
  .trainingFeature .trainingFeatureCopy {
    text-align: center;
    font-family: "Gothic MB101 DemiBold", sans-serif;
    color: white;
    line-height: 1.35;
    font-size: 2.5rem; }
    @media (max-width: 622px) {
      .trainingFeature .trainingFeatureCopy {
        font-size: 5vw; } }
    .trainingFeature .trainingFeatureCopy span {
      font-size: 125%;
      color: #F48D00; }
      @media (max-width: 622px) {
        .trainingFeature .trainingFeatureCopy span {
          font-size: 7vw; } }
      .trainingFeature .trainingFeatureCopy span b {
        font-size: 200%; }
        @media (max-width: 622px) {
          .trainingFeature .trainingFeatureCopy span b {
            font-size: 14vw; } }

.onlineWrap {
  background-image: url(../image/service/onlineBackground.jpg);
  background-position: center;
  background-size: cover; }
  .onlineWrap .sectionInner {
    position: relative;
    z-index: 1;
    color: white; }
  .onlineWrap:after {
    background-color: rgba(0, 0, 0, 0.65);
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }

.pointDetailFlex {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  flex-wrap: wrap; }
  .pointDetailFlex .detail {
    width: calc(100% / 3 - 1rem);
    background-color: white;
    padding: 1rem; }
    @media (max-width: 622px) {
      .pointDetailFlex .detail {
        width: 100%;
        margin-bottom: 2rem; }
        .pointDetailFlex .detail:last-of-type {
          margin-bottom: 0; } }
    .pointDetailFlex .detail h4 {
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1rem; }
    .pointDetailFlex .detail img {
      margin-bottom: 1rem;
      width: 100%;
      height: auto; }
    .pointDetailFlex .detail p {
      font-size: 0.75rem;
      line-height: 1.86; }

.serviceCTA {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 622px) {
    .serviceCTA {
      display: block; } }
  .serviceCTA figure {
    width: 35%;
    height: auto; }
    @media (max-width: 622px) {
      .serviceCTA figure {
        width: 100%;
        max-height: 80vw;
        overflow: hidden; } }
    .serviceCTA figure img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .serviceCTA .block {
    width: 63%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.65); }
    @media (max-width: 622px) {
      .serviceCTA .block {
        width: 100%;
        padding: 2rem 1rem; } }
    .serviceCTA .block:before {
      width: 0;
      height: 0;
      border-style: solid;
      border-color: #F48D00 transparent transparent transparent;
      border-width: 64px 64px 0px 0px;
      content: "";
      display: block;
      left: 0;
      top: 0;
      position: absolute;
      transition: all ease 0.5s; }
    .serviceCTA .block:after {
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent #F48D00 transparent;
      border-width: 0px 0px 64px 64px;
      content: "";
      display: block;
      right: 0;
      bottom: 0;
      position: absolute;
      transition: all ease 0.5s; }
    .serviceCTA .block H2 {
      text-align: center;
      color: white; }
    .serviceCTA .block .titleEn {
      color: white;
      text-align: center; }
    .serviceCTA .block .titleJp {
      text-align: center;
      color: white; }

.faqBlock {
  max-width: 50rem;
  margin: auto;
  margin-top: 3rem; }
  .faqBlock .faq .que .inner, .faqBlock .faq .ans .inner {
    display: grid;
    /* グリッドレイアウト */
    grid-template-columns: 3rem 1fr;
    background-color: white;
    margin-bottom: 1rem;
    padding-left: 0; }
    .faqBlock .faq .que .inner .icon, .faqBlock .faq .ans .inner .icon {
      width: 3rem;
      height: auto;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.5rem; }
    .faqBlock .faq .que .inner p, .faqBlock .faq .ans .inner p {
      margin-left: 1rem;
      line-height: 1.85;
      padding: 0.7rem 0; }
  .faqBlock .faq .que {
    cursor: pointer; }
    .faqBlock .faq .que .icon {
      background-color: black;
      color: #F48D00; }
  .faqBlock .faq .ans {
    display: none; }
    .faqBlock .faq .ans .icon {
      background-color: #F48D00;
      color: black; }

.servicePrice {
  background-color: #F8F5EA; }
  .servicePrice .priceTable {
    width: 100%; }
    .servicePrice .priceTable dl {
      display: flex; }
      .servicePrice .priceTable dl.header dt, .servicePrice .priceTable dl.header dd {
        padding: 0.5rem;
        background-color: #F48D00;
        font-weight: bold; }
      .servicePrice .priceTable dl dt {
        width: calc(100% - 66%);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        padding: 2rem 1rem;
        margin: 0.5rem;
        text-align: center; }
      .servicePrice .priceTable dl dd {
        text-align: center;
        width: calc((66%) / 3);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        padding: 2rem 1rem;
        margin: 0.5rem; }

.serviceFlow p {
  color: white; }
.serviceFlow .serviceFlowFlex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .serviceFlow .serviceFlowFlex .detail {
    width: calc(100% / 3 - 1rem); }
    @media (max-width: 622px) {
      .serviceFlow .serviceFlowFlex .detail {
        width: 100%;
        margin-bottom: 4rem; } }
    .serviceFlow .serviceFlowFlex .detail figure img {
      width: 100%;
      height: auto; }
    .serviceFlow .serviceFlowFlex .detail h3 {
      font-family: "Gothic MB101 DemiBold", sans-serif;
      font-size: 1.25rem;
      margin-top: 1rem;
      color: white; }
    .serviceFlow .serviceFlowFlex .detail p {
      margin-top: 1rem;
      font-size: 0.875rem;
      color: white; }

.narrow {
  width: 100%;
  max-width: 40rem;
  margin: 2rem auto; }
  .narrow p.copy {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-family: "Gothic MB101 DemiBold", sans-serif; }
    @media (max-width: 622px) {
      .narrow p.copy {
        line-height: 1.65;
        font-size: 1.25rem; } }
  .narrow p.small {
    margin-top: 1.5rem;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    font-family: "Gothic MB101 DemiBold", sans-serif; }
    @media (max-width: 622px) {
      .narrow p.small {
        line-height: 1.65;
        font-size: 1rem; } }
  .narrow p.big {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-family: "Gothic MB101 DemiBold", sans-serif; }
    @media (max-width: 622px) {
      .narrow p.big {
        line-height: 1.65;
        font-size: 1.5rem; } }
  .narrow figure {
    margin: 2rem 0;
    width: 100%;
    height: auto; }
    .narrow figure img {
      width: 100%;
      height: auto; }

.servicePointWrap .point {
  background-color: #F8F5EA;
  padding: 2rem;
  margin-bottom: 2.5rem; }
  @media (max-width: 622px) {
    .servicePointWrap .point {
      padding: 1rem; } }
  .servicePointWrap .point.point4 figure {
    margin: 2rem 0; }
  .servicePointWrap .point figure img {
    width: 100%;
    height: auto; }
  .servicePointWrap .point #spSwiper .swiper-button-prev, .servicePointWrap .point #spSwiper .swiper-button-next {
    display: none; }
    @media (max-width: 622px) {
      .servicePointWrap .point #spSwiper .swiper-button-prev, .servicePointWrap .point #spSwiper .swiper-button-next {
        display: block; } }
  .servicePointWrap .point .imageFlex {
    display: flex;
    justify-content: space-between; }
    .servicePointWrap .point .imageFlex figure {
      width: calc(100% / 3); }
  .servicePointWrap .point .mapCountDiv {
    position: relative;
    display: flex;
    justify-content: end;
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    justify-content: center;
    margin: auto;
    width: fit-content;
    width: 50rem;
    max-width: 100%; }
    @media (max-width: 622px) {
      .servicePointWrap .point .mapCountDiv {
        display: block;
        padding-bottom: 60vw;
        background-position: bottom center; } }
    .servicePointWrap .point .mapCountDiv:after {
      width: 200px;
      height: 400px;
      content: "";
      display: block; }
      @media (max-width: 622px) {
        .servicePointWrap .point .mapCountDiv:after {
          display: none; } }
    .servicePointWrap .point .mapCountDiv .detail {
      max-width: 50rem;
      width: fit-content;
      top: 0;
      bottom: 0;
      margin: auto 0;
      left: 0;
      height: fit-content; }
      .servicePointWrap .point .mapCountDiv .detail p {
        font-size: 2.5rem;
        font-family: "Gothic MB101 DemiBold", sans-serif;
        line-height: 1.5; }
        @media (max-width: 622px) {
          .servicePointWrap .point .mapCountDiv .detail p {
            font-size: 5vw; } }
      .servicePointWrap .point .mapCountDiv .detail .count {
        color: #F48D00;
        font-size: 2rem;
        font-family: "Gothic MB101 DemiBold", sans-serif;
        line-height: 1; }
        @media (max-width: 622px) {
          .servicePointWrap .point .mapCountDiv .detail .count {
            font-size: 5vw; } }
        .servicePointWrap .point .mapCountDiv .detail .count span {
          font-weight: bold;
          font-size: 5.5rem; }
          @media (max-width: 622px) {
            .servicePointWrap .point .mapCountDiv .detail .count span {
              font-size: 10vw; } }
    .servicePointWrap .point .mapCountDiv figure img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  @media (max-width: 622px) {
    .servicePointWrap .point .pointTableWrap {
      overflow-x: scroll; } }
  .servicePointWrap .point .pointTableWrap .pointTable {
    width: 100%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 1rem; }
    @media (max-width: 622px) {
      .servicePointWrap .point .pointTableWrap .pointTable {
        border-spacing: 0.5rem;
        width: 600px; } }
    .servicePointWrap .point .pointTableWrap .pointTable thead {
      /*@include sp(){
          display: none;
      }*/ }
    .servicePointWrap .point .pointTableWrap .pointTable tr td, .servicePointWrap .point .pointTableWrap .pointTable tr th {
      width: 22%;
      background-color: white;
      padding: 1.5rem;
      text-align: center;
      vertical-align: middle; }
      .servicePointWrap .point .pointTableWrap .pointTable tr td span, .servicePointWrap .point .pointTableWrap .pointTable tr th span {
        display: block;
        font-family: "Gothic MB101 DemiBold", sans-serif; }
        .servicePointWrap .point .pointTableWrap .pointTable tr td span img, .servicePointWrap .point .pointTableWrap .pointTable tr th span img {
          width: 2.25rem;
          height: auto; }
      .servicePointWrap .point .pointTableWrap .pointTable tr td p, .servicePointWrap .point .pointTableWrap .pointTable tr th p {
        margin-top: 1rem;
        font-size: 0.75rem;
        line-height: 1.35; }
      .servicePointWrap .point .pointTableWrap .pointTable tr td:nth-of-type(1), .servicePointWrap .point .pointTableWrap .pointTable tr th:nth-of-type(1) {
        width: 34%;
        font-weight: bold; }
        @media (max-width: 622px) {
          .servicePointWrap .point .pointTableWrap .pointTable tr td:nth-of-type(1), .servicePointWrap .point .pointTableWrap .pointTable tr th:nth-of-type(1) {
            width: 10rem; } }
      .servicePointWrap .point .pointTableWrap .pointTable tr td:nth-of-type(2), .servicePointWrap .point .pointTableWrap .pointTable tr th:nth-of-type(2) {
        background-color: #F48D00;
        color: white; }
    .servicePointWrap .point .pointTableWrap .pointTable tr th {
      padding: 1rem;
      background-color: #E3E3E3; }
    .servicePointWrap .point .pointTableWrap .pointTable tr td {
                /*
                    @include sp(){
                        display: block;
                        width: 100%;
                        &:before{
                            content: attr(data-label);

                        }
                    }
                    */ }
      @media (max-width: 622px) {
        .servicePointWrap .point .pointTableWrap .pointTable tr td {
          width: 25%; } }
  .servicePointWrap .point .pointTitle {
    text-align: center;
    background-color: white;
    position: relative;
    padding: 1rem; }
    .servicePointWrap .point .pointTitle .index {
      position: absolute;
      left: 1rem;
      top: 0;
      bottom: 0;
      font-family: "Gothic MB101 DemiBold", sans-serif;
      color: #F48D00;
      font-size: 2.5rem;
      line-height: 1;
      width: fit-content;
      margin: auto;
      height: fit-content; }
    .servicePointWrap .point .pointTitle h3 {
      font-family: "Gothic MB101 DemiBold", sans-serif;
      font-size: 1.6rem;
      padding-left: 3rem; }
      @media (max-width: 622px) {
        .servicePointWrap .point .pointTitle h3 {
          font-size: 1.3rem; } }

.sectionTitle {
  text-align: center;
  margin-bottom: 3rem; }
  .sectionTitle small {
    text-align: center; }
  .sectionTitle h2 {
    font-family: "Gothic MB101 DemiBold", sans-serif;
    font-size: 2rem;
    line-height: 1.5; }
    .sectionTitle h2:after {
      content: "";
      height: 4px;
      width: 4rem;
      background-color: #F48D00;
      display: block;
      margin: auto;
      margin-top: 1.5rem !important; }
    .sectionTitle h2 span {
      display: block;
      font-weight: 100;
      font-size: 1rem;
      font-family: sans-serif;
      padding-bottom: 0.75rem; }
    .sectionTitle h2 b {
      color: #F48D00;
      font-size: 200%; }
    @media (max-width: 622px) {
      .sectionTitle h2 {
        font-size: 1.5rem; } }

section {
  padding: 2rem;
  position: relative;
  overflow: hidden;
  height: 100%; }
  section.minHeight {
    min-height: 100vh; }
    @media (max-width: 622px) {
      section.minHeight {
        min-height: 180vw; } }
  @media (max-width: 622px) {
    section {
      min-height: fit-content; } }
  section.nonePadding {
    padding: 0; }
  section.half {
    min-height: 75vh; }
    @media (max-width: 622px) {
      section.half {
        min-height: auto; } }
  section.topGrayTri:before {
    width: 150px;
    height: 50px;
    background-color: #5A5A5A;
    clip-path: polygon(50% 50px, 0% 0%, 150px 0%);
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    right: 0;
    left: 0;
    margin: auto; }
  section.dark {
    background-color: #5A5A5A;
    position: relative; }
    section.dark .copy {
      color: #F48D00; }
    section.dark .sectionTitle h2 {
      color: white; }
    @media (max-width: 622px) {
      section.dark.topWhiteTri {
        padding-top: 5rem; } }
    section.dark.topWhiteTri:before {
      width: 150px;
      height: 50px;
      background-color: white;
      clip-path: polygon(50% 50px, 0% 0%, 150px 0%);
      content: "";
      display: block;
      position: absolute;
      top: -2px;
      right: 0;
      left: 0;
      margin: auto; }
  section.gray {
    background-color: #F0F0F0; }
  section.youtubeSection {
    background-image: url(../image/youtubeBack.png);
    padding-bottom: 4rem; }
  section .youtubeWrap {
    display: block;
    padding: 2rem;
    margin-top: 2rem; }
    @media (max-width: 622px) {
      section .youtubeWrap {
        padding: 2rem 1rem; } }
    section .youtubeWrap .youtubeSwiper .swiper {
      padding: 2rem 0; }
      section .youtubeWrap .youtubeSwiper .swiper .swiper-wrapper .swiper-slide {
        padding: 1rem; }
        @media (max-width: 780px) {
          section .youtubeWrap .youtubeSwiper .swiper .swiper-wrapper .swiper-slide.first, section .youtubeWrap .youtubeSwiper .swiper .swiper-wrapper .swiper-slide .end {
            display: none; } }
        section .youtubeWrap .youtubeSwiper .swiper .swiper-wrapper .swiper-slide a {
          display: block;
          padding-top: 56.5%;
          position: relative;
          overflow: hidden; }
          section .youtubeWrap .youtubeSwiper .swiper .swiper-wrapper .swiper-slide a img.icon {
            width: 20%;
            height: auto;
            object-fit: initial;
            z-index: 1; }
          section .youtubeWrap .youtubeSwiper .swiper .swiper-wrapper .swiper-slide a img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transform: scale(1.01);
            width: 100%;
            height: 100%;
            object-fit: cover; }
    section .youtubeWrap .title {
      text-align: center; }
      section .youtubeWrap .title h2 {
        font-size: 2.5rem;
        font-weight: bold;
        letter-spacing: 0.2em;
        font-family: "Gothic MB101 DemiBold", sans-serif; }
        @media (max-width: 622px) {
          section .youtubeWrap .title h2 {
            letter-spacing: 0;
            font-size: 1.8rem; } }
      section .youtubeWrap .title p.subline {
        font-size: 1.15rem;
        font-family: "Montserrat", sans-serif;
        font-size: 1.15rem; }
        @media (max-width: 622px) {
          section .youtubeWrap .title p.subline {
            font-size: 1rem; } }
      section .youtubeWrap .title p {
        margin-top: 2rem;
        line-height: 1.8; }
  section .fivePointSection {
    height: 100%;
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
    @media (max-width: 622px) {
      section .fivePointSection {
        min-height: 100vw; } }
    section .fivePointSection h2 {
      text-align: center;
      color: white;
      font-weight: bold;
      font-size: 2.5rem;
      letter-spacing: 0.2em;
      opacity: 0;
      transform: translateY(100%);
      transition: all ease 0.5s;
      font-family: "Gothic MB101 DemiBold", sans-serif; }
      @media (max-width: 622px) {
        section .fivePointSection h2 {
          font-size: 1.8rem;
          letter-spacing: 0; } }
      section .fivePointSection h2.animated {
        opacity: 1;
        transform: translateY(0%); }
    section .fivePointSection p {
      text-align: center;
      color: white;
      font-weight: bold;
      font-size: 1.15rem;
      font-family: "Montserrat", sans-serif;
      opacity: 0;
      transform: translateY(100%);
      transition: all ease 0.5s;
      transition-delay: 0.25s; }
      @media (max-width: 622px) {
        section .fivePointSection p {
          font-size: 1rem;
          transition-delay: 0s; } }
      section .fivePointSection p.animated {
        opacity: 1;
        transform: translateY(0%); }
  section .sectionInner {
    max-width: 80rem;
    margin: auto;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 0 2rem; }
    @media (max-width: 622px) {
      section .sectionInner {
        padding: 0 1rem; } }
    section .sectionInner.notFlex {
      display: block; }
    section .sectionInner .copy.center {
      text-align: center; }
    section .sectionInner .big.center {
      text-align: center; }
    section .sectionInner .small.center {
      text-align: center; }
    section .sectionInner .flex {
      margin-top: 2rem;
      display: flex;
      justify-content: space-between; }
      section .sectionInner .flex .point {
        width: calc(100% / 3 - 1rem); }
        @media (max-width: 622px) {
          section .sectionInner .flex .point {
            width: calc(100% / 3 - 0.5rem); } }
        section .sectionInner .flex .point p {
          text-align: center;
          line-height: 1.65;
          font-size: 0.875rem;
          margin-top: 1rem;
          font-weight: bold; }
        section .sectionInner .flex .point figure {
          width: 100%;
          height: auto; }
          section .sectionInner .flex .point figure img {
            width: 100%;
            height: auto; }
    @media (max-width: 622px) {
      section .sectionInner {
        display: block; } }
    section .sectionInner .trainingBlock {
      width: 45%;
      margin: 2rem 0;
      height: 100%;
      min-height: 90vh;
      position: relative;
      background-size: cover;
      background-position: center;
      transition: all ease 1s;
      transform: translateY(30%);
      opacity: 0; }
      @media (max-width: 1390px) {
        section .sectionInner .trainingBlock {
          width: calc((100% - 2rem)/2);
          min-height: 80vw; } }
      @media (max-width: 780px) {
        section .sectionInner .trainingBlock {
          width: calc((100% - 1rem)/2);
          min-height: 110vw; } }
      @media (max-width: 622px) {
        section .sectionInner .trainingBlock {
          min-height: 180vw;
          width: 100%;
          display: block;
          min-height: fit-content;
          padding: 2rem; } }
      section .sectionInner .trainingBlock:hover .trainingBlockInner {
        background-color: rgba(0, 0, 0, 0.75); }
        section .sectionInner .trainingBlock:hover .trainingBlockInner:after {
          bottom: 1rem;
          right: 1rem; }
        section .sectionInner .trainingBlock:hover .trainingBlockInner:before {
          left: 1rem;
          top: 1rem; }
      section .sectionInner .trainingBlock.animated {
        transform: translateY(0%);
        opacity: 1; }
      section .sectionInner .trainingBlock:nth-of-type(2) {
        transition-delay: 0.25s; }
      section .sectionInner .trainingBlock.online {
        background-image: url(../image//online.png); }
      section .sectionInner .trainingBlock.personal {
        background-image: url(../image//personal.png); }
      section .sectionInner .trainingBlock .trainingBlockInner {
        width: 80%;
        max-height: 80%;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.65);
        transition: all ease 0.5s;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; }
        @media (max-width: 622px) {
          section .sectionInner .trainingBlock .trainingBlockInner {
            min-height: 100vw;
            position: relative;
            margin-bottom: 1rem;
            width: 100%; } }
        section .sectionInner .trainingBlock .trainingBlockInner .copy {
          text-align: center;
          font-weight: bold;
          color: white;
          font-size: 1.5rem;
          margin-bottom: 2rem;
          letter-spacing: 0.2em;
          font-family: "Gothic MB101 DemiBold", sans-serif; }
          @media (max-width: 622px) {
            section .sectionInner .trainingBlock .trainingBlockInner .copy {
              font-size: 1.25rem;
              letter-spacing: 0; } }
        section .sectionInner .trainingBlock .trainingBlockInner h2 {
          text-align: center;
          font-weight: normal;
          color: white;
          font-size: 1.25rem; }
        section .sectionInner .trainingBlock .trainingBlockInner .en {
          text-align: center;
          font-size: 1.25rem;
          font-weight: normal;
          font-family: "Montserrat", sans-serif;
          color: white; }
        section .sectionInner .trainingBlock .trainingBlockInner:before {
          width: 0;
          height: 0;
          border-style: solid;
          border-color: #F48D00 transparent transparent transparent;
          border-width: 64px 64px 0px 0px;
          content: "";
          display: block;
          left: 0;
          top: 0;
          position: absolute;
          transition: all ease 0.5s; }
        section .sectionInner .trainingBlock .trainingBlockInner:after {
          width: 0;
          height: 0;
          border-style: solid;
          border-color: transparent transparent #F48D00 transparent;
          border-width: 0px 0px 64px 64px;
          content: "";
          display: block;
          right: 0;
          bottom: 0;
          position: absolute;
          transition: all ease 0.5s; }
    section .sectionInner.vCenter {
      align-items: center; }
    section .sectionInner .leftBox {
      width: 40%; }
      @media (max-width: 622px) {
        section .sectionInner .leftBox {
          width: 100%; } }
      section .sectionInner .leftBox h2 {
        font-size: 2.5rem;
        font-weight: bold;
        line-height: 1.65;
        margin-bottom: 2rem;
        font-family: "Gothic MB101 DemiBold", sans-serif; }
        @media (max-width: 622px) {
          section .sectionInner .leftBox h2 {
            font-size: 1.8rem; } }
      section .sectionInner .leftBox p {
        font-weight: bold;
        line-height: 1.8; }
    section .sectionInner .rightBox {
      width: 50%; }
      @media (max-width: 622px) {
        section .sectionInner .rightBox {
          width: 100%; } }
      section .sectionInner .rightBox figure {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative; }
        section .sectionInner .rightBox figure:after {
          padding-top: 100%;
          display: block;
          content: ""; }
        section .sectionInner .rightBox figure img {
          inset: 0;
          margin: auto;
          position: absolute;
          object-fit: contain; }

@keyframes spfirstLoop {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes spfirstLoop2 {
  from {
    transform: translateX(0%); }
  to {
    transform: translateX(-200%); } }
@keyframes firstLoop {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(-100%); } }
@keyframes firstLoop2 {
  from {
    transform: translateY(0%); }
  to {
    transform: translateY(-200%); } }
@keyframes firstLoop3 {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(-300%); } }
@keyframes h2SpanAnimation {
  from {
    right: 0; }
  to {
    width: 0; } }
@keyframes magicAction {
  0% {
    /*アニメーションを開始するときのCSSを記述*/
    opacity: 0;
    left: -60%;
    transform: scale(1); }
  15% {
    /*アニメーションの中間のCSSを記述*/
    opacity: 1; }
  66% {
    /*アニメーションの中間のCSSを記述*/
    opacity: 1; }
  100% {
    /*アニメーションを終了するときのCSSを記述*/
    opacity: 0;
    left: 0%;
    transform: scale(1.4); } }
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
.unlimitedScrollWrap {
  display: flex;
  overflow: hidden;
  padding: 2rem 0 3rem 0; }

.unlimitedScrollList {
  display: flex;
  list-style: none;
  padding: 0; }

.unlimitedScrollLeft {
  animation: infinity-scroll-left 80s infinite linear 0.5s both; }

.infinity__item {
  margin: 0 0.5rem;
  width: calc(100vw / 8);
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  padding-top: 30%; }
  @media (max-width: 1390px) {
    .infinity__item {
      width: calc(100vw / 6); } }
  @media (max-width: 622px) {
    .infinity__item {
      width: calc(100vw / 4); } }

.infinity__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

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