@charset "UTF-8";
/* Scss Document */
/* Scss Document */
.companyIntro {
  position: relative;
  margin-top: 80px;
  padding-bottom: 90px;
  border-bottom: 1px solid #000;
  overflow: hidden;
  isolation: isolate; }
  .companyIntro::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(50% + 130px);
    z-index: 0;
    width: 1300px;
    height: 100%;
    max-height: 594px;
    transform: translateX(-50%);
    background-image: url("../img/company/intro.jpg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 1300px auto;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 140px, #000 calc(100% - 140px), rgba(0, 0, 0, 0)), linear-gradient(180deg, rgba(0, 0, 0, 0), #000 100px);
    mask-composite: intersect;
    pointer-events: none; }
  .companyIntro::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.65) 40%, rgba(255, 255, 255, 0) 75%);
    pointer-events: none; }
  .companyIntro__inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 80px);
    max-width: 1440px;
    margin: 0 auto; }
  .companyIntro__title {
    font-size: 5rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 900;
    line-height: 1.5; }
  .companyIntro__text {
    max-width: 840px;
    margin-top: 40px;
    font-size: 1.125rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 500;
    line-height: 2; }

@media (max-width: 1200px) {
  .companyIntro__title {
    font-size: 4rem; } }

@media (max-width: 1000px) {
  .companyIntro__title {
    font-size: 3rem; }
  .companyIntro__text br {
    display: none; } }

@media (max-width: 700px) {
  .companyIntro {
    margin-top: 60px;
    padding-bottom: 60px; }
    .companyIntro::before {
      left: 50%;
      width: calc(500px * 1300 / 594);
      max-height: 500px;
      background-size: auto 500px; }
    .companyIntro::after {
      background-color: rgba(255, 255, 255, 0.78); }
    .companyIntro__inner {
      width: calc(100% - 40px); }
    .companyIntro__title {
      font-size: 2rem; }
    .companyIntro__text {
      margin-top: 30px;
      font-size: 1rem; } }

.companyFive {
  display: grid;
  grid-template-columns: 574px minmax(0, 1fr);
  align-items: center;
  gap: 38px; }
  .companyFive__image {
    margin: 0; }
    .companyFive__image img {
      display: block;
      width: 100%;
      height: auto; }
  .companyFive__graphic {
    position: relative;
    width: 100%;
    aspect-ratio: 574 / 562;
    overflow: hidden;
    isolation: isolate; }
    .companyFive__graphic.is-running .companyFive__orbit,
    .companyFive__graphic.is-running .companyFive__node,
    .companyFive__graphic.is-running .companyFive__nodeFace {
      animation-play-state: running; }
  .companyFive__center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 40%;
    transform: translate(-50%, -50%);
    text-align: center; }
    .companyFive__center .companyFive__watermark {
      position: absolute;
      top: 45%;
      left: 50%;
      width: 44%;
      aspect-ratio: 102.5 / 117.3;
      opacity: 0.12;
      height: auto;
      transform: translate(-50%, -50%); }
  .companyFive__message {
    position: relative;
    margin: 0; }
    .companyFive__message img:first-child {
      width: 91%;
      margin: 0 auto; }
    .companyFive__message img + img {
      margin-top: 6%; }
  .companyFive__brand {
    position: relative;
    margin-top: 14px;
    color: #004ca1;
    font-size: 1rem;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    line-height: 1.3; }
  .companyFive__orbit {
    position: absolute;
    inset: 0;
    z-index: 1;
    animation: companyFiveOrbit 32s linear infinite;
    animation-play-state: paused; }
  .companyFive__connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #e7e9ef;
    stroke-width: 7;
    stroke-linejoin: round;
    pointer-events: none; }
  .companyFive__nodes {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none; }
  .companyFive__arm {
    position: absolute;
    inset: 0;
    transform: rotate(var(--node-angle));
    pointer-events: none; }
    .companyFive__arm:nth-of-type(1) {
      --node-angle: 0deg;
      --node-counter-angle: 0deg;
      --node-delay: 0s; }
    .companyFive__arm:nth-of-type(2) {
      --node-angle: 72deg;
      --node-counter-angle: -72deg;
      --node-delay: 6.4s; }
    .companyFive__arm:nth-of-type(3) {
      --node-angle: 144deg;
      --node-counter-angle: -144deg;
      --node-delay: 12.8s; }
    .companyFive__arm:nth-of-type(4) {
      --node-angle: 216deg;
      --node-counter-angle: -216deg;
      --node-delay: 19.2s; }
    .companyFive__arm:nth-of-type(5) {
      --node-angle: 288deg;
      --node-counter-angle: -288deg;
      --node-delay: 25.6s; }
    .companyFive__arm--seeing {
      --node-color: #ded44d; }
    .companyFive__arm--skill {
      --node-color: #9d5279; }
    .companyFive__arm--value {
      --node-color: #173e43; }
    .companyFive__arm--curiosity {
      --node-color: #5c551f; }
    .companyFive__arm--team {
      --node-color: #3d858f; }
  .companyFive__upright {
    position: absolute;
    top: 0;
    left: 37.75%;
    width: 24.5%;
    aspect-ratio: 1;
    transform: rotate(var(--node-counter-angle)); }
  .companyFive__node {
    width: 100%;
    height: 100%;
    animation: companyFiveCounterOrbit 32s linear infinite;
    animation-play-state: paused; }
  .companyFive__nodeFace {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 6%;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: #FFF;
    background-color: var(--node-color);
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    animation: companyFiveGlow 32s linear infinite;
    animation-delay: var(--node-delay);
    animation-play-state: paused;
    pointer-events: auto; }
  .companyFive__node--jp {
    display: block;
    font-size: 2rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap; }
  .companyFive__node--eng {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap; }
  .companyFive__title {
    margin-bottom: 40px;
    font-size: 2.5rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 500;
    line-height: 1.5; }
  .companyFive__text {
    font-size: 1.125rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 500;
    line-height: 2; }

@keyframes companyFiveOrbit {
  to {
    transform: rotate(360deg); } }

@keyframes companyFiveCounterOrbit {
  to {
    transform: rotate(-360deg); } }

@keyframes companyFiveGlow {
  0%,
  20%,
  100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); }
  8% {
    box-shadow: 0 0 0 8px rgba(0, 76, 161, 0.1), 0 8px 24px rgba(0, 76, 161, 0.15); } }

@media (max-width: 1200px) {
  .companyFive {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .companyFive__title {
      font-size: 2rem; } }

@media (max-width: 1000px) {
  .companyFive {
    grid-template-columns: 1fr;
    gap: 35px; }
    .companyFive__image {
      width: 100%;
      max-width: 574px;
      margin: 0 auto; } }

@media (max-width: 700px) {
  .companyFive__title {
    margin-bottom: 25px;
    font-size: 1.625rem; }
  .companyFive__text {
    font-size: 1rem; } }

@media (max-width: 600px) {
  .companyFive__node--jp {
    font-size: 1.5rem; }
  .companyFive__node--eng {
    font-size: 0.75rem; }
  .companyFive__brand {
    margin-top: 8px;
    font-size: 0.75rem; } }

@media (max-width: 480px) {
  .companyFive__node--jp {
    font-size: 1.25rem; }
  .companyFive__node--eng {
    font-size: 0.5625rem; } }

@media (max-width: 380px) {
  .companyFive__node--jp {
    font-size: 1rem; }
  .companyFive__node--eng {
    font-size: 0.5rem; }
  .companyFive__brand {
    font-size: 0.625rem; } }

.companyForces {
  margin-top: 60px; }
  .companyForces__list {
    margin: 0;
    padding: 0;
    list-style: none; }
  .companyForces__item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 364px;
    background-color: #fbfaf5; }
    .companyForces__item + .companyForces__item {
      margin-top: 18px; }
    .companyForces__item:nth-of-type(even) .companyForces__body {
      order: 2; }
    .companyForces__item:nth-of-type(even) .companyForces__image {
      order: 1; }
    .companyForces__item--seeing {
      --forceColor: #ded44d; }
    .companyForces__item--skill {
      --forceColor: #9d5279; }
    .companyForces__item--value {
      --forceColor: #173e43; }
    .companyForces__item--curiosity {
      --forceColor: #5c551f; }
    .companyForces__item--team {
      --forceColor: #3d858f; }
  .companyForces__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 40px 50px; }
  .companyForces__heading {
    display: grid;
    grid-template-columns: 100px 94px minmax(0, 1fr);
    align-items: center;
    gap: 25px; }
  .companyForces__number {
    color: var(--forceColor);
    font-size: 6.25rem;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    line-height: 1; }
  .companyForces__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 94px;
    box-sizing: border-box;
    border: 1px solid var(--forceColor);
    border-radius: 50%;
    color: var(--forceColor);
    font-size: 1rem;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    line-height: 1.25;
    text-align: center; }
  .companyForces__title {
    font-size: 2.625rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 900;
    line-height: 1.4; }
  .companyForces__subtitle {
    margin-top: 5px;
    color: var(--forceColor);
    font-size: 1.5rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 900;
    line-height: 1.35; }
  .companyForces__text {
    margin-top: 30px;
    font-size: 1.125rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 500;
    line-height: 1.5; }
  .companyForces__image {
    margin: 0; }
    .companyForces__image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain; }

@media (max-width: 1200px) {
  .companyForces__body {
    padding: 30px; }
  .companyForces__heading {
    grid-template-columns: 80px 72px minmax(0, 1fr);
    gap: 15px; }
  .companyForces__number {
    font-size: 5rem; }
  .companyForces__circle {
    width: 72px;
    height: 72px;
    font-size: 0.8125rem; }
  .companyForces__title {
    font-size: 2.125rem; }
  .companyForces__subtitle {
    font-size: 1.25rem; } }

@media (max-width: 900px) {
  .companyForces__item {
    display: flex;
    flex-direction: column; }
    .companyForces__item:nth-of-type(even) .companyForces__body {
      order: 0; }
    .companyForces__item:nth-of-type(even) .companyForces__image {
      order: 1; } }

@media (max-width: 700px) {
  .companyForces__body {
    padding: 28px 20px; }
  .companyForces__heading {
    grid-template-columns: 60px 60px minmax(0, 1fr);
    gap: 12px; }
  .companyForces__number {
    font-size: 3.75rem; }
  .companyForces__circle {
    width: 60px;
    height: 60px;
    font-size: 0.6875rem; }
  .companyForces__title {
    font-size: 1.625rem; }
  .companyForces__subtitle {
    font-size: 1rem; }
  .companyForces__text {
    margin-top: 24px;
    font-size: 1rem;
    line-height: 1.8; } }

@media (max-width: 380px) {
  .companyForces__heading {
    grid-template-columns: 60px minmax(0, 1fr); }
    .companyForces__heading .companyForces__circle {
      display: none; } }

@media (prefers-reduced-motion: reduce) {
  .innerPage {
    animation: none; }
    .innerPage *,
    .innerPage *::before,
    .innerPage *::after {
      animation: none;
      transition: none;
      scroll-behavior: auto; } }