@charset "UTF-8";
/* ==============================================================================
# mobileFont
============================================================================== */
@font-face {
  font-family: "TsukuOldGothicStd";
  src: url("../font/TsukuOldGothicStdFont.woff2") format("woff2"), url("../font/TsukuOldGothicStdFont.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TsukuGoPro";
  src: url("../font/FOT-TsukuGoPro-L.woff2") format("woff2"), url("../font/FOT-TsukuGoPro-L.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TsukuGoPro";
  src: url("../font/FOT-TsukuGoPro-R.woff2") format("woff2"), url("../font/FOT-TsukuGoPro-R.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TsukuGoPro";
  src: url("../font/FOT-TsukuGoPro-M.woff2") format("woff2"), url("../font/FOT-TsukuGoPro-M.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TsukuGoPro";
  src: url("../font/FOT-TsukuGoPro-D.woff2") format("woff2"), url("../font/FOT-TsukuGoPro-D.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TsukuGoPro";
  src: url("../font/FOT-TsukuGoPro-B.woff2") format("woff2"), url("../font/FOT-TsukuGoPro-B.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TsukuGoPro";
  src: url("../font/FOT-TsukuGoPro-H.woff2") format("woff2"), url("../font/FOT-TsukuGoPro-H.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TsukuGoPro";
  src: url("../font/FOT-TsukuGoPro-E.woff2") format("woff2"), url("../font/FOT-TsukuGoPro-E.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeueLTStd";
  src: url("../font/HelveticaNeueLTStd-LtCn.woff2") format("woff2"), url("../font/HelveticaNeueLTStd-LtCn.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeueLTStd";
  src: url("../font/HelveticaNeueLTStd-MdCn.woff2") format("woff2"), url("../font/HelveticaNeueLTStd-MdCn.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeueLTStd";
  src: url("../font/HelveticaNeueLTStd-Bd.woff2") format("woff2"), url("../font/HelveticaNeueLTStd-Bd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeueLTStd";
  src: url("../font/HelveticaNeueLTStd-BdCn.woff2") format("woff2"), url("../font/HelveticaNeueLTStd-BdCn.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* ========================================
   Fixed Buttons Component
   ======================================== */
:root {
  --btn-start: 80;
  --btn-dir: 1;
  --btn-dur: 1.7s;
  --btn-loop-dur: 10s;
  --btn-ease: ease-in-out;
  --btn-bg: #333;
}

/* ========================================
   Container Styles
   ======================================== */
.fixed-buttons {
  position: fixed;
  bottom: 40px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  right: calc((100vw - 1000px) / 2 - 83px);
}
@media screen and (max-width: 1200px) {
  .fixed-buttons {
    right: 40px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .fixed-buttons {
    right: auto;
  }
}

/* ========================================
   Button Item Base Styles
   ======================================== */
.fixed-buttons__item {
  display: inline-block;
  text-align: center;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  --start: var(--btn-start);
  --dir: var(--btn-dir);
  --dur: var(--btn-dur);
  --loop-dur: var(--btn-loop-dur);
  --ease: var(--btn-ease);
  --bg: var(--btn-bg);
  background-color: transparent;
  width: -moz-fit-content;
  width: fit-content;
  transition: all 0.3s var(--ease);
  /* ========================================
     Text Content
     ======================================== */
  /* ========================================
     Border Animation Container
     ======================================== */
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .fixed-buttons__item {
    width: 220px;
  }
}
.fixed-buttons__item .fixed-buttons__content {
  position: relative;
  color: #fff;
  opacity: 0;
  bottom: -12px;
  transition: all 0.6s var(--ease);
}
.fixed-buttons__item span {
  color: #fff;
}
.fixed-buttons__item .-border {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}
.fixed-buttons__item .-border rect {
  transition: stroke-dasharray var(--dur) var(--ease), stroke-dashoffset var(--dur) var(--ease), stroke 0.6s var(--ease);
  stroke: transparent;
  stroke-dasharray: 0 100;
  stroke-dashoffset: var(--start);
}
.fixed-buttons__item .-border rect.pink-border {
  stroke: transparent;
}
.fixed-buttons__item .-border rect.black-border {
  stroke: transparent;
}

/* ========================================
   Button States
   ======================================== */
.fixed-buttons__item.is-border-in .-border rect.pink-border {
  stroke: url(#btn-border-gradient);
  stroke-dasharray: 100 0;
  stroke-dashoffset: calc(var(--start) + 100 * var(--dir));
}
.fixed-buttons__item.is-border-in .-border rect.black-border {
  stroke: transparent;
  stroke-dasharray: 0 100;
  stroke-dashoffset: var(--start);
}

.fixed-buttons__item.is-content-in {
  background-color: var(--bg);
  box-shadow: 0 0 6px 0 rgba(29, 32, 49, 0.3);
}
.fixed-buttons__item.is-content-in .fixed-buttons__content {
  opacity: 1;
  bottom: 0;
}
.fixed-buttons__item.is-content-in .-border rect.pink-border,
.fixed-buttons__item.is-content-in .-border rect.black-border {
  stroke: transparent;
}

.fixed-buttons__item.is-loop .-border rect,
.fixed-buttons__item.is-content-in.is-loop .-border rect {
  transition: none;
  will-change: stroke-dasharray, stroke-dashoffset;
}
.fixed-buttons__item.is-loop .-border rect.pink-border,
.fixed-buttons__item.is-content-in.is-loop .-border rect.pink-border {
  stroke: url(#btn-border-gradient);
  animation: btnBorderLoopPink var(--loop-dur) var(--ease) infinite;
}
.fixed-buttons__item.is-loop .-border rect.black-border,
.fixed-buttons__item.is-content-in.is-loop .-border rect.black-border {
  stroke: #333;
  animation: btnBorderLoopBlack var(--loop-dur) var(--ease) infinite;
}

/* ========================================
   Hover Interactions
   ======================================== */
@media screen and (min-width: 601px) {
  .fixed-buttons:has(.fixed-buttons__item:hover) .fixed-buttons__item.is-loop .-border rect.pink-border,
  .fixed-buttons:has(.fixed-buttons__item:hover) .fixed-buttons__item.is-loop .-border rect.black-border,
  .fixed-buttons:has(.fixed-buttons__item:hover) .fixed-buttons__item.is-content-in.is-loop .-border rect.pink-border,
  .fixed-buttons:has(.fixed-buttons__item:hover) .fixed-buttons__item.is-content-in.is-loop .-border rect.black-border {
    animation-play-state: paused;
    stroke: transparent;
  }
  .fixed-buttons__item.is-loop .-border:hover rect,
  .fixed-buttons__item.is-content-in.is-loop .-border:hover rect {
    animation-play-state: paused;
    stroke: transparent;
  }
}
/* ========================================
   Keyframe Animations
   ======================================== */
@keyframes btnBorderLoopPink {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: var(--start);
  }
  25% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: var(--start);
  }
  50% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: var(--start);
  }
  100% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: var(--start);
  }
}
@keyframes btnBorderLoopBlack {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: var(--start);
  }
  50% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: var(--start);
  }
  75% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: var(--start);
  }
  100% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: var(--start);
  }
}
/* ========================================
   double button
   ======================================== */
.fixed-buttons__item-double {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fixed-buttons__item-double .fixed-buttons__item {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
@media (min-width: 769px) {
  .fixed-buttons__item-double .fixed-buttons__item:hover {
    background: #e83c5c;
  }
}
@media (max-width: 768px) {
  .fixed-buttons__item-double .fixed-buttons__item:active {
    background: #e83c5c;
  }
}

.front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(1) {
  padding: 0 38px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(1) {
    padding: 0;
  }
}
.front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(1):hover {
  padding: 0 42px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(1):hover {
    padding: 0;
  }
}
.front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(2) {
  padding: 0 20px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(2) {
    padding: 0;
  }
}
.front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(2):hover {
  padding: 0 24px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .front-page .fixed-buttons__item-double .fixed-buttons__item:nth-of-type(2):hover {
    padding: 0;
  }
}
.front-page .fixed-buttons__item-double:has(.fixed-buttons__item:hover) .fixed-buttons__item:not(:hover):nth-of-type(1) {
  padding: 0 34px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .front-page .fixed-buttons__item-double:has(.fixed-buttons__item:hover) .fixed-buttons__item:not(:hover):nth-of-type(1) {
    padding: 0;
  }
}
.front-page .fixed-buttons__item-double:has(.fixed-buttons__item:hover) .fixed-buttons__item:not(:hover):nth-of-type(2) {
  padding: 0 16px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .front-page .fixed-buttons__item-double:has(.fixed-buttons__item:hover) .fixed-buttons__item:not(:hover):nth-of-type(2) {
    padding: 0;
  }
}

/* ====================
# TOP
==================== */
.front-page .fixed-buttons {
  max-width: 452px;
  gap: 8px 12px;
}

@media screen and (max-width: 600px) and (min-width:360px) {
  .fixed-buttons-fv {
    position: relative;
    width: 220px;
    max-width: 220px;
    margin: 50px auto 0;
    bottom: auto;
    right: auto;
    gap: 16px;
    display: grid !important;
  }
  .fixed-buttons-fv .fixed-buttons__item {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) and (min-width:360px) {
  .fixed-buttons-fv-scroll {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    bottom: 20px;
    z-index: 1000;
    max-width: 100%;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
  }
  .fixed-buttons-fv-scroll .fixed-buttons__item {
    font-size: 16px;
    padding: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* ====================
# PROJECT
==================== */
.project-page .fixed-buttons {
  right: 48px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .project-page .fixed-buttons {
    right: auto;
  }
}
.project-page .fixed-buttons__item {
  padding: 16px 20px 20px;
  --start: 88;
  --loop-dur: 14s;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .project-page .fixed-buttons__item {
    width: 308px;
    padding: 8px 0 12px;
    --start: 80;
  }
}
@media screen and (min-width: 601px) {
  .project-page .fixed-buttons__item:hover {
    background: #333;
    padding: 16px 20px 20px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .project-page .project-fixed-buttons {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 105;
  }
}
.project-page .fixed-buttons__wrapper {
  position: relative;
  display: inline-block;
}
.project-page span {
  display: block;
}
.project-page .fixed-buttons__content {
  margin-bottom: 4px;
}
.project-page .fixed-buttons__label {
  position: relative;
  margin-bottom: 8px;
}
.project-page .fixed-buttons__label img {
  position: absolute;
  top: calc(50% + 4px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 122px;
}
.project-page .fixed-buttons__image {
  max-width: 252px;
  margin-bottom: 16px;
}
.project-page .fixed-buttons__action {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 4px 12px 4px 20px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  border-radius: 26px;
  background: #e83c5c;
  box-shadow: 0 0 6px 0 rgba(29, 32, 49, 0.3);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .project-page .fixed-buttons__action {
    padding: 0 12px 0 20px;
    margin-top: 2px;
  }
}
.project-page .fixed-buttons__action img {
  position: relative;
  width: 8px;
}
.project-page .fixed-buttons__action .fixed-buttons__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
  border: 1px solid #fafafa;
  width: 23px;
  height: 23px;
  position: relative;
}
.project-page .fixed-buttons__action .fixed-buttons__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fafafa;
  border-radius: 50%;
  transition: all 0.5s;
}
.project-page .fixed-buttons__item:hover .fixed-buttons__arrow::before {
  width: 23px;
  height: 23px;
}

/* ========================================
   Pivot Button
   ======================================== */
.pivot {
  width: 100%;
  display: flex;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .pivot {
    height: auto !important;
  }
}
@media (min-width: 769px) {
  .pivot:hover {
    background: #e83c5c;
  }
  .pivot:hover .pivot-button__icon {
    background: #333;
  }
}
@media (max-width: 768px) {
  .pivot:active {
    background: #e83c5c;
  }
  .pivot:active .pivot-button__icon {
    background: #333;
  }
}

.pivot-button {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: all 0.3s ease;
  padding: 8px;
}
.pivot-button .fixed-buttons__content {
  padding: 0;
  gap: 12px;
}
.pivot-button__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  margin: 0 auto;
  background: #e83c5c;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}
.pivot-button__label {
  color: #fff;
  font-weight: bold;
  font-family: "TsukuGoPro";
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .pivot-button__label {
    font-size: 14px;
  }
}
.pivot-button__content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.pivot-button__thumbnail {
  width: 200px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .pivot-button__thumbnail {
    width: 160px;
  }
}
.pivot-button__thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pivot-button__text {
  display: grid;
}
.pivot-button__title {
  margin: 4px 0;
  transition: all 0.3s ease;
  text-align: left;
  color: #fafafa;
  font-family: "TsukuGoPro";
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .pivot-button__title {
    font-size: 14px;
  }
}
.pivot-button__action {
  transition: all 0.3s ease;
  color: #fafafa;
  text-align: center;
  font-family: "M+ 1p";
  font-size: 12px;
  font-weight: 500;
  line-height: 1.67;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ========================================
   Close Button
   ======================================== */
.fixed-buttons__wrapper {
  transition: all 0.3s ease;
}
@media (min-width: 769px) {
  .fixed-buttons__wrapper:hover {
    transform: translateY(-10px);
  }
}
@media (max-width: 768px) {
  .fixed-buttons__wrapper:active {
    transform: translateY(-10px);
  }
}
.fixed-buttons__wrapper.is-closing {
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  transition: all 0.5s ease;
  pointer-events: none;
}
.fixed-buttons__wrapper.is-hidden {
  display: none;
}

@media (min-width: 769px) {
  .fixed-buttons__wrapper--no-raise:hover {
    transform: none;
  }
}
@media (max-width: 768px) {
  .fixed-buttons__wrapper--no-raise:active {
    transform: none;
  }
}

.fixed-buttons__close {
  position: absolute;
  top: -4px;
  right: 8px;
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px 0 rgba(29, 32, 49, 0.3);
  transition: all 0.3s ease;
}
.fixed-buttons__close .-border {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.fixed-buttons__close .-border path {
  transition: all 0.3s ease;
}
.fixed-buttons__close:active {
  transform: translate(0, -100%) scale(1.1);
}
.fixed-buttons__close.is-visible {
  opacity: 1;
  transform: translate(0, -100%) scale(1);
}

/* ====================
# Scroll Indicator
==================== */
.scroll-indicator {
  position: absolute;
  bottom: 140px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 112px;
  right: calc((100vw - 1000px) / 2 - 145px);
}
@media screen and (max-width: 1400px) {
  .scroll-indicator {
    right: 40px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .scroll-indicator {
    right: 30px;
    bottom: 132px;
  }
}
.scroll-indicator .scroll-line {
  width: 2px;
  height: 112px;
  background-color: #d6d6d6;
  position: relative;
}
.scroll-indicator .scroll-dot {
  width: 12px;
  height: 12px;
  background-color: #e83c5c;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: scrollDotOneWay 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  transform-origin: center;
  will-change: transform, opacity;
  box-shadow: 0 0 10px rgba(232, 60, 92, 0.3);
}
.scroll-indicator .scroll-indicator__label {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.05em;
  white-space: pre-line;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  color: #d6d6d6;
  font-size: 12px;
  font-weight: 500;
  font-family: "futura-pt", sans-serif;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .scroll-indicator .scroll-indicator__label {
    font-size: 12px;
  }
}

@keyframes scrollDotOneWay {
  0% {
    transform: translate(-50%, -56px) scale(0.7);
    opacity: 0;
  }
  12% {
    transform: translate(-50%, -48px) scale(1);
    opacity: 1;
  }
  88% {
    transform: translate(-50%, 48px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 56px) scale(0.7);
    opacity: 0;
  }
}
.scroll-indicator.is-center-hold-linear .scroll-dot {
  animation: scrollDotOneWay 2.4s linear infinite;
  background: transparent;
}
.scroll-indicator.is-center-hold-linear .scroll-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #e83c5c;
  box-shadow: 0 0 10px rgba(232, 60, 92, 0.3);
  animation: scrollDotPulseHold_30_70 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  transform-origin: center;
}

@keyframes scrollDotPulseHold_20_80 {
  0% {
    transform: scale(0.85);
  }
  20% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes scrollDotPulseHold_25_75 {
  0% {
    transform: scale(0.85);
  }
  25% {
    transform: scale(1);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes scrollDotPulseHold_30_70 {
  0% {
    transform: scale(0.85);
  }
  30% {
    transform: scale(1);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes scrollDotPulseHold_35_65 {
  0% {
    transform: scale(0.85);
  }
  35% {
    transform: scale(1);
  }
  65% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes scrollDotPulseHold_40_60 {
  0% {
    transform: scale(0.85);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes scrollDotPulseHold_15_55 {
  0% {
    transform: scale(0.85);
  }
  15% {
    transform: scale(1);
  }
  55% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
.scroll-indicator.is-center-hold-linear--20-80 .scroll-dot::before {
  animation-name: scrollDotPulseHold_20_80;
}

.scroll-indicator.is-center-hold-linear--25-75 .scroll-dot::before {
  animation-name: scrollDotPulseHold_25_75;
}

.scroll-indicator.is-center-hold-linear--30-70 .scroll-dot::before {
  animation-name: scrollDotPulseHold_30_70;
}

.scroll-indicator.is-center-hold-linear--35-65 .scroll-dot::before {
  animation-name: scrollDotPulseHold_35_65;
}

.scroll-indicator.is-center-hold-linear--40-60 .scroll-dot::before {
  animation-name: scrollDotPulseHold_40_60;
}

.scroll-indicator.is-center-hold-linear--15-55 .scroll-dot::before {
  animation-name: scrollDotPulseHold_15_55;
}

.scroll-indicator.is-center-hold-linear.is-fast .scroll-dot {
  animation-duration: 1.6s;
}
.scroll-indicator.is-center-hold-linear.is-fast .scroll-dot::before {
  animation-duration: 1.6s;
}

.scroll-indicator.is-center-hold-linear--20-80.is-fast .scroll-dot {
  animation-duration: 1.6s;
}
.scroll-indicator.is-center-hold-linear--20-80.is-fast .scroll-dot::before {
  animation-duration: 1.6s;
}

.scroll-indicator.is-center-hold-linear--25-75.is-fast .scroll-dot {
  animation-duration: 1.6s;
}
.scroll-indicator.is-center-hold-linear--25-75.is-fast .scroll-dot::before {
  animation-duration: 1.6s;
}

.scroll-indicator.is-center-hold-linear--30-70.is-fast .scroll-dot {
  animation-duration: 1.6s;
}
.scroll-indicator.is-center-hold-linear--30-70.is-fast .scroll-dot::before {
  animation-duration: 1.6s;
}

.scroll-indicator.is-center-hold-linear--35-65.is-fast .scroll-dot {
  animation-duration: 1.6s;
}
.scroll-indicator.is-center-hold-linear--35-65.is-fast .scroll-dot::before {
  animation-duration: 1.6s;
}

.scroll-indicator.is-center-hold-linear--40-60.is-fast .scroll-dot {
  animation-duration: 1.6s;
}
.scroll-indicator.is-center-hold-linear--40-60.is-fast .scroll-dot::before {
  animation-duration: 1.6s;
}

.scroll-indicator.is-center-hold-linear.is-ease .scroll-dot {
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scroll-indicator.is-center-hold-linear.is-ease .scroll-dot::before {
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media screen and (max-width: 600px) and (min-width:360px) {
  .scroll-indicator .scroll-dot {
    width: 10px;
    height: 10px;
  }
  @keyframes scrollDotOneWay {
    0% {
      transform: translate(-50%, -64px) scale(0.7);
      opacity: 0;
    }
    12% {
      transform: translate(-50%, -48px) scale(1);
      opacity: 1;
    }
    88% {
      transform: translate(-50%, 48px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, 56px) scale(0.7);
      opacity: 0;
    }
  }
  .scroll-indicator.is-center-hold-linear .scroll-dot {
    animation: scrollDotOneWay 2.4s linear infinite;
    background: transparent;
  }
  .scroll-indicator.is-center-hold-linear .scroll-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #e83c5c;
    box-shadow: 0 0 10px rgba(232, 60, 92, 0.3);
    animation: scrollDotPulseHold_30_70 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    transform-origin: center;
  }
  @keyframes scrollDotPulseHold_20_80 {
    0% {
      transform: scale(0.85);
    }
    20% {
      transform: scale(1);
    }
    80% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes scrollDotPulseHold_25_75 {
    0% {
      transform: scale(0.85);
    }
    25% {
      transform: scale(1);
    }
    75% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes scrollDotPulseHold_30_70 {
    0% {
      transform: scale(0.85);
    }
    30% {
      transform: scale(1);
    }
    70% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes scrollDotPulseHold_35_65 {
    0% {
      transform: scale(0.85);
    }
    35% {
      transform: scale(1);
    }
    65% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes scrollDotPulseHold_40_60 {
    0% {
      transform: scale(0.85);
    }
    40% {
      transform: scale(1);
    }
    60% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes scrollDotPulseHold_15_55 {
    0% {
      transform: scale(0.85);
    }
    15% {
      transform: scale(1);
    }
    55% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  .scroll-indicator.is-center-hold-linear.is-fast .scroll-dot {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear.is-fast .scroll-dot::before {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--20-80.is-fast .scroll-dot {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--20-80.is-fast .scroll-dot::before {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--25-75.is-fast .scroll-dot {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--25-75.is-fast .scroll-dot::before {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--30-70.is-fast .scroll-dot {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--30-70.is-fast .scroll-dot::before {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--35-65.is-fast .scroll-dot {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--35-65.is-fast .scroll-dot::before {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--40-60.is-fast .scroll-dot {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear--40-60.is-fast .scroll-dot::before {
    animation-duration: 1.6s;
  }
  .scroll-indicator.is-center-hold-linear.is-ease .scroll-dot {
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .scroll-indicator.is-center-hold-linear.is-ease .scroll-dot::before {
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
body,
html {
  height: 100%;
  margin: 0;
  background-color: #FAFAFA;
  color: #333333;
  font-family: "TsukuGoPro", sans-serif;
}
@media screen and (max-width: 1267px) and (min-width: 601px) {
  body body,
  html body {
    width: auto;
    overflow: auto;
  }
}

.section-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.section-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .section-fade {
    transition: none;
    transform: none;
  }
}
@media screen and (max-width: 1267px) and (min-width: 601px) {
  body {
    width: auto;
    overflow: auto;
  }
}
.main img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ====================
# Inner
==================== */
.inner {
  max-width: 1040px;
  margin: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

/* ====================
# top-title
==================== */
.top-title {
  color: #333;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 44px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 2.2px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .top-title {
    font-size: 28px;
    gap: 8px;
  }
}
.top-title::after {
  content: "";
  width: 72px;
  height: 3px;
  background: #e83c5c;
}

/* ====================
# Fixed Title
==================== */
.top-fixed-title {
  position: absolute;
  top: -40px;
  width: -moz-max-content;
  width: max-content;
  color: #fafafa;
  font-style: italic;
  font-family: "HelveticaNeueLTStd", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: top 1.5s ease, opacity 1.5s ease;
  will-change: top, opacity;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .top-fixed-title {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    font-size: 60px;
  }
}

.top-fixed-title.is-visible {
  top: 0;
  opacity: 1;
}

.top-fixed-title--left {
  color: #fafafa;
}

.top-fixed-title--right {
  color: #eef0f4;
  right: 0;
}

.pmo .top-fixed-title {
  font-size: clamp(48px, 48px + (100vw - 390px) * 72 / 610, 120px);
}

.product .top-fixed-title {
  font-size: clamp(80px, 80px + (100vw - 390px) * 72 / 610, 120px);
}

.projects .top-fixed-title {
  font-size: clamp(74px, 74px + (100vw - 390px) * 72 / 610, 120px);
}

.clients .top-fixed-title {
  font-size: clamp(92px, 92px + (100vw - 390px) * 72 / 610, 120px);
}

.pmo,
.product,
.projects,
.clients {
  overflow: hidden;
}

/* ====================
# FV
==================== */
.fv {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .fv {
    height: 785px;
  }
}
.fv picture {
  max-width: 845px;
  display: block;
  margin: auto;
}
.fv img {
  width: 100%;
}

/* ====================
# FV Gradient
==================== */
.bg-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: auto;
  z-index: -1;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .bg-svg {
    top: 38%;
  }
}

.bg-svg--gradient {
  opacity: 1;
  -webkit-clip-path: none;
          clip-path: none;
}

/* ====================
# Creative
==================== */
.creative {
  position: relative;
  min-height: 220vh;
  line-height: 1;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .creative {
    min-height: 200vh;
  }
}
.creative .inner {
  text-align: center;
}
.creative .creative__inner {
  position: relative;
  width: 100%;
}
.creative .creative__body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creative .creative__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creative .creative__sticky-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}
.creative__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(280px, 55vw, 628px);
  height: clamp(280px, 55vw, 628px);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  perspective: none;
  isolation: isolate;
}
.creative__bg .creative__bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  will-change: transform, filter, opacity;
  mix-blend-mode: screen;
  opacity: 0.94;
}
.creative__bg .creative__bg-layer--1 {
  --start: 225deg;
  --radius: clamp(60px, 11vw, 120px);
  animation: creativeOrbit1 14s linear infinite;
}
.creative__bg .creative__bg-layer--2 {
  --start: 350deg;
  --radius: clamp(48px, 9vw, 100px);
  animation: creativeOrbit2 14s linear infinite;
}
.creative__bg .creative__bg-layer--3 {
  --start: 260deg;
  --radius: clamp(52px, 10vw, 110px);
  animation: creativeOrbit3 14s linear infinite;
}
@keyframes creativeOrbit1 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) translate(50px, 50px) rotate(120deg);
  }
  50% {
    transform: translate(-50%, -50%) translate(-60px, 10px) rotate(240deg);
  }
  75% {
    transform: translate(-50%, -50%) translate(20px, -40px) rotate(300deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(360deg);
  }
}
@keyframes creativeOrbit2 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) translate(-50px, 0px) rotate(120deg);
  }
  50% {
    transform: translate(-50%, -50%) translate(40px, -45px) rotate(240deg);
  }
  75% {
    transform: translate(-50%, -50%) translate(-30px, 45px) rotate(300deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(360deg);
  }
}
@keyframes creativeOrbit3 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) translate(50px, -50px) rotate(120deg);
  }
  50% {
    transform: translate(-50%, -50%) translate(-45px, -20px) rotate(240deg);
  }
  75% {
    transform: translate(-50%, -50%) translate(25px, 55px) rotate(300deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .creative__bg, .creative__bg .creative__bg-layer {
    animation: none !important;
  }
}
@media screen and (max-width: 767px) {
  @keyframes creativeOrbit1 {
    0% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(-50%, -50%) translate(25px, 25px) rotate(120deg);
    }
    50% {
      transform: translate(-50%, -50%) translate(-30px, 5px) rotate(240deg);
    }
    75% {
      transform: translate(-50%, -50%) translate(10px, -20px) rotate(300deg);
    }
    100% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(360deg);
    }
  }
  @keyframes creativeOrbit2 {
    0% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(-50%, -50%) translate(-25px, 0px) rotate(120deg);
    }
    50% {
      transform: translate(-50%, -50%) translate(20px, -22px) rotate(240deg);
    }
    75% {
      transform: translate(-50%, -50%) translate(-15px, 22px) rotate(300deg);
    }
    100% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(360deg);
    }
  }
  @keyframes creativeOrbit3 {
    0% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(-50%, -50%) translate(25px, -25px) rotate(120deg);
    }
    50% {
      transform: translate(-50%, -50%) translate(-22px, -10px) rotate(240deg);
    }
    75% {
      transform: translate(-50%, -50%) translate(12px, 28px) rotate(300deg);
    }
    100% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(360deg);
    }
  }
}
.creative .creative__text {
  --from-color: #b0b0b0;
  --to-color: #2f2f2f;
  display: inline;
  color: var(--from-color);
  background-image: linear-gradient(to right, var(--to-color) 0, var(--to-color) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(var(--from-color), var(--from-color));
  background-size: 200% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: background-position;
  transition: background-position 0.1s linear;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (max-width: 1000px) {
  .creative .creative__text {
    font-size: min(16px, 16 / 390 * 100vw);
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .creative .creative__text {
    line-height: 1.3;
  }
}
.creative .creative__large {
  --to-color: #e83c5c;
  --from-color: #fff;
  font-size: 68px;
  letter-spacing: 0.12em;
  display: inline-block;
  line-height: 1;
}
.creative .creative__large .creative__char {
  display: inline-block;
  letter-spacing: 0;
}
.creative .creative__large .creative__char--su {
  margin-right: 0;
}
.creative .creative__large .creative__char--po {
  margin-right: -6.4px;
}
.creative .creative__large .creative__char--small-tsu {
  margin-right: -16px;
}
.creative .creative__large .creative__char--to {
  margin-right: -3px;
}
.creative .creative__large .creative__char--pm {
  letter-spacing: 0.07em;
}
@media screen and (max-width: 1000px) {
  .creative .creative__large {
    font-size: min(40px, 40 / 390 * 100vw);
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .creative .creative__large {
    display: inline-block;
    margin: 10px 0 0;
    --from-color: #f8f8f8;
  }
}
.creative .creative__accent {
  --from-color: #b0b0b0;
  --to-color: #e83c5c;
  font-size: 24px;
}
@media screen and (max-width: 1000px) {
  .creative .creative__accent {
    font-size: min(20px, 20 / 390 * 100vw);
  }
}
.creative .creative__note {
  position: absolute;
  right: 0;
  bottom: 90px;
  color: #333;
  font-family: "FOT-TsukuGo Pro";
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  text-align: left;
  pointer-events: none;
}

@keyframes textColorSweep {
  to {
    background-size: 100% 100%, 100% 100%;
  }
}
@keyframes creativeRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ====================
# PMO
==================== */
.pmo {
  background: #eef0f4;
  padding: 145px 0 156px;
  position: relative;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .pmo {
    padding: 90px 0 120px;
  }
}
.pmo__title {
  margin-bottom: 16px;
}
.pmo__text {
  text-align: center;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.pmo .pmo-grid {
  margin-top: 75px;
  display: grid;
  grid-template-columns: calc((100% - 16px) / 3) calc((100% - 16px) / 3) calc((100% - 16px) / 3);
  grid-template-rows: calc((100% - 8px) / 2) calc((100% - 8px) / 2);
  gap: 8px;
  /* 子要素がabsoluteで高さを持たないため、トラック高さを安定させる */
  height: calc(120px * 2 + 8px);
  transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1), grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: grid-template-columns, grid-template-rows;
}
.pmo .pmo-card {
  position: relative;
  min-height: 0;
}
.pmo .pmo-grid:has(.pmo-card:nth-child(1):hover) {
  grid-template-columns: calc((100% - 16px) * 2 / 4) calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 1 / 4);
  grid-template-rows: calc((100% - 8px) * 1.25 / 2) calc((100% - 8px) * 0.75 / 2);
}
.pmo .pmo-grid:has(.pmo-card:nth-child(2):hover) {
  grid-template-columns: calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 2 / 4) calc((100% - 16px) * 1 / 4);
  grid-template-rows: calc((100% - 8px) * 1.25 / 2) calc((100% - 8px) * 0.75 / 2);
}
.pmo .pmo-grid:has(.pmo-card:nth-child(3):hover) {
  grid-template-columns: calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 2 / 4);
  grid-template-rows: calc((100% - 8px) * 1.25 / 2) calc((100% - 8px) * 0.75 / 2);
}
.pmo .pmo-grid:has(.pmo-card:nth-child(4):hover) {
  grid-template-columns: calc((100% - 16px) * 2 / 4) calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 1 / 4);
  grid-template-rows: calc((100% - 8px) * 0.75 / 2) calc((100% - 8px) * 1.25 / 2);
}
.pmo .pmo-grid:has(.pmo-card:nth-child(5):hover) {
  grid-template-columns: calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 2 / 4) calc((100% - 16px) * 1 / 4);
  grid-template-rows: calc((100% - 8px) * 0.75 / 2) calc((100% - 8px) * 1.25 / 2);
}
.pmo .pmo-grid:has(.pmo-card:nth-child(6):hover) {
  grid-template-columns: calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 1 / 4) calc((100% - 16px) * 2 / 4);
  grid-template-rows: calc((100% - 8px) * 0.75 / 2) calc((100% - 8px) * 1.25 / 2);
}
@media screen and (max-width: 1200px) {
  .pmo .pmo-grid {
    grid-template-columns: calc((100% - 8px) / 2) calc((100% - 8px) / 2);
    grid-template-rows: calc((100% - 8px * 2) / 3) calc((100% - 8px * 2) / 3) calc((100% - 8px * 2) / 3);
    height: calc(120px * 3 + 8px * 2);
  }
  .pmo .pmo-grid:has(.pmo-card:nth-child(odd):hover) {
    grid-template-columns: calc((100% - 8px) * 1.25 / 2) calc((100% - 8px) * 0.75 / 2);
  }
  .pmo .pmo-grid:has(.pmo-card:nth-child(even):hover) {
    grid-template-columns: calc((100% - 8px) * 0.75 / 2) calc((100% - 8px) * 1.25 / 2);
  }
  .pmo .pmo-grid:has(.pmo-card:nth-child(1):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(2):hover) {
    grid-template-rows: calc((100% - 8px * 2) * 1.25 / 3) calc((100% - 8px * 2) * 0.875 / 3) calc((100% - 8px * 2) * 0.875 / 3);
  }
  .pmo .pmo-grid:has(.pmo-card:nth-child(3):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(4):hover) {
    grid-template-rows: calc((100% - 8px * 2) * 0.875 / 3) calc((100% - 8px * 2) * 1.25 / 3) calc((100% - 8px * 2) * 0.875 / 3);
  }
  .pmo .pmo-grid:has(.pmo-card:nth-child(5):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(6):hover) {
    grid-template-rows: calc((100% - 8px * 2) * 0.875 / 3) calc((100% - 8px * 2) * 0.875 / 3) calc((100% - 8px * 2) * 1.25 / 3);
  }
}
.pmo .pmo-card__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.pmo .pmo-card__front,
.pmo .pmo-card__hover {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.pmo .pmo-card__front {
  background: #2f2f2f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "TsukuGoPro", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
}
.pmo .pmo-card__front-title {
  color: #fff;
  margin: 0;
}
.pmo .pmo-card__hover {
  border-radius: 8px;
  background: var(--CI, #e83c5c);
  box-shadow: 0 0 2px 0 rgba(29, 32, 49, 0.08);
  display: grid;
  grid-template-columns: 1fr auto 208px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.pmo .pmo-card__hover-left {
  padding-left: 24px;
  padding-top: 16px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .pmo .pmo-card__hover-left {
    padding-left: 0;
    padding-top: 0;
  }
}
.pmo .pmo-card__hover-left h3 {
  margin: 0 0 6px;
  font-family: "TsukuGoPro", sans-serif;
  color: #fafafa;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.4px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}
.pmo .pmo-card__hover-left p {
  color: #fafafa;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.25s, transform 0.3s ease 0.25s;
}
.pmo .pmo-card__hover-divider {
  width: 1px;
  height: 100%;
  height: 118px;
  margin: auto;
  background: #fafafa;
  justify-self: center;
  margin-left: 16px;
}
.pmo .pmo-card__hover-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.pmo .pmo-card__hover-right .pkg {
  color: #fafafa;
  text-align: center;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
}
.pmo .pmo-card__hover-right .thumb {
  background: #b9b9b9;
  width: 115px;
  height: 70px;
  margin: 0 auto;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.35s, transform 0.3s ease 0.35s;
}
.pmo .pmo-card__hover-right .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pmo .pmo-card__hover-right .more {
  text-align: center;
  font-family: "M+ 1p";
  font-size: 12px;
  font-weight: 500;
  line-height: 1.67;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
}
.pmo .pmo-card__hover-right .more span {
  color: #fafafa;
}
.pmo .pmo-card:hover .pmo-card__front {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}
.pmo .pmo-card:hover .pmo-card__hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.pmo .pmo-card:hover .pmo-card__hover-left h3 {
  opacity: 1;
  transform: translateY(0);
}
.pmo .pmo-card:hover .pmo-card__hover-left p {
  opacity: 1;
  transform: translateY(0);
}
.pmo .pmo-card:hover .pmo-card__hover-right .pkg {
  opacity: 1;
  transform: translateY(0);
}
.pmo .pmo-card:hover .pmo-card__hover-right .thumb {
  opacity: 1;
  transform: translateY(0);
}
.pmo .pmo-card:hover .pmo-card__hover-right .more {
  opacity: 1;
  transform: translateY(0);
}
.pmo .pmo-card.is-open .pmo-card__front {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}
.pmo .pmo-card.is-open .pmo-card__hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.pmo .pmo-card.is-open .pmo-card__hover-left h3,
.pmo .pmo-card.is-open .pmo-card__hover-left p,
.pmo .pmo-card.is-open .pmo-card__hover-right .pkg,
.pmo .pmo-card.is-open .pmo-card__hover-right .thumb,
.pmo .pmo-card.is-open .pmo-card__hover-right .more {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .pmo .pmo-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    max-width: 310px;
    margin: 50px auto 0;
  }
  .pmo .pmo-grid:has(.pmo-card:hover) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .pmo .pmo-grid:has(.pmo-card:nth-child(1):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(2):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(3):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(4):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(5):hover),
  .pmo .pmo-grid:has(.pmo-card:nth-child(6):hover) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .pmo .pmo-card {
    min-height: 58px;
    transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .pmo .pmo-card.is-open {
    min-height: 240px;
  }
  .pmo .pmo-card:not(.is-open):hover .pmo-card__front {
    opacity: 1;
    transform: none;
  }
  .pmo .pmo-card:not(.is-open):hover .pmo-card__hover {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
  }
  .pmo .pmo-card.is-open:hover .pmo-card__front {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  .pmo .pmo-card.is-open:hover .pmo-card__hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .pmo .pmo-card__hover {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px 8px;
    height: -moz-max-content;
    height: max-content;
  }
  .pmo .pmo .pmo-card__hover-left {
    padding: 0;
    padding-top: 14px;
  }
  .pmo .pmo-card__hover-divider {
    width: 100%;
    height: 1.5px;
  }
  .pmo .pmo-card__hover-left h3 {
    font-size: 22px;
    letter-spacing: 2.2px;
  }
  .pmo .pmo-card__hover-right .thumb {
    width: 134px;
    height: 82px;
  }
  .pmo .pmo-card__link {
    cursor: pointer;
  }
}

/* ====================
# PM LAB
==================== */
.projects.pmlab {
  background: #EEF0F4;
}
.projects.pmlab .top-title {
  margin-bottom: 30px;
}
.projects.pmlab .pmlab-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .projects.pmlab .pmlab-more-btn:hover .arrow::before {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 768px) {
  .projects.pmlab .pmlab-more-btn:active .arrow::before {
    width: 100%;
    height: 100%;
  }
}
.projects.pmlab .pmlab-more-btn p {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.75px;
}
.projects.pmlab .pmlab-more-btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  box-sizing: border-box;
  border-radius: 50%;
  position: relative;
  transition: all 0.2s;
}
.projects.pmlab .pmlab-more-btn .arrow::before {
  transition: all 0.2s;
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.projects.pmlab .pmlab-more-btn .arrow img {
  width: 16px !important;
  position: relative;
}
.projects.pmlab .pmlab-more-btn .arrow {
  border: 1px solid #de244a;
}
.projects.pmlab .pmlab-more-btn .arrow::before {
  background-color: #de244a;
}
.projects.pmlab .pmlab-more-btn p {
  font-weight: 400;
  line-height: 1;
}
.projects.pmlab .pmlab-more-btn .arrow {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.projects.pmlab .pmlab-more-btn .arrow::before {
  width: 40px;
  height: 40px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects.pmlab .pmlab-more-btn {
    gap: 10px;
  }
  .projects.pmlab .pmlab-more-btn p {
    font-size: 14px;
  }
  .projects.pmlab .pmlab-more-btn .arrow {
    width: 48px;
    height: 48px;
  }
  .projects.pmlab .pmlab-more-btn .arrow::before {
    width: 40px;
    height: 40px;
  }
}

/* ====================
# Service Lineup
==================== */
.service-lineup {
  padding: 150px 0 110px;
  position: relative;
  /* ----------- CHECKBACK -------------- */
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup {
    padding: 92px 0 100px;
    overflow: hidden;
  }
}
.service-lineup .top-fixed-title {
  color: #EEF0F4;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup .top-fixed-title {
    font-size: min(48px, 48 / 390 * 100vw);
  }
}
.service-lineup .service-lineup__items {
  display: flex;
  gap: 40px;
  align-items: stretch;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup .service-lineup__items {
    flex-direction: column;
    gap: 52px;
  }
}
.service-lineup .service-lineup__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  transition: flex 0.45s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup .service-lineup__item {
    min-height: auto;
  }
}
@media (min-width: 769px) {
  .service-lineup .service-lineup__item:hover {
    flex: 1.5;
  }
}
@media (max-width: 768px) {
  .service-lineup .service-lineup__item:active {
    flex: 1.5;
  }
}
.service-lineup .service-lineup__itemHead {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.03em;
}
.service-lineup .service-lineup__name {
  position: relative;
  padding-left: 18px;
  margin-left: 12px;
  color: #333;
  font-size: 32px;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup .service-lineup__name {
    font-size: 24px;
    line-height: 150%;
  }
}
.service-lineup .service-lineup__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 100%;
  background: #E83C5C;
}
.service-lineup .service-lineup__thumb {
  height: clamp(200px, 28vw, 300px);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup .service-lineup__thumb {
    height: auto;
    display: flex;
  }
}
.service-lineup .service-lineup__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup .service-lineup__thumb img {
    height: auto;
  }
}
.service-lineup .service-lineup__desc {
  font-size: 16px;
  font-weight: 700;
  line-height: 175%;
  padding: 0 20px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .service-lineup .service-lineup__desc {
    text-align: left;
  }
}
.service-lineup .more__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
}
@media (min-width: 769px) {
  .service-lineup .more__btn:hover .arrow::before {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 768px) {
  .service-lineup .more__btn:active .arrow::before {
    width: 100%;
    height: 100%;
  }
}
.service-lineup .more__btn p {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.75px;
}
.service-lineup .more__btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  box-sizing: border-box;
  border-radius: 50%;
  position: relative;
  transition: all 0.2s;
}
.service-lineup .more__btn .arrow::before {
  transition: all 0.2s;
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.service-lineup .more__btn .arrow img {
  width: 16px !important;
  position: relative;
}
.service-lineup .more__btn .arrow {
  border: 1px solid #e83c5c;
}
.service-lineup .more__btn .arrow::before {
  background-color: #e83c5c;
}
.service-lineup .more__btn p {
  font-size: 16px;
}
.service-lineup .more__btn .arrow {
  width: 48px;
  height: 48px;
}
.service-lineup .more__btn .arrow::before {
  width: 40px;
  height: 40px;
}
.service-lineup .more__btn--checkback .arrow {
  border: 1px solid #0283FF;
}
.service-lineup .more__btn--checkback .arrow::before {
  background-color: #0283FF;
}
.service-lineup .service-lineup__item--checkback .service-lineup__name::before {
  background: #0283FF;
}

/* ====================
# Product
==================== */
.product {
  padding: 145px 0 156px;
  position: relative;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .product {
    padding: 100px 0 88px;
  }
}
.product .product__title {
  max-width: 465px;
  margin: 0 auto 84px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .product .product__title {
    max-width: 269px;
    margin-bottom: 15px;
  }
}
.product .product__col {
  display: grid;
  grid-template-columns: 484fr 462fr;
  gap: 53px;
  align-items: center;
  text-align: left;
}
@media screen and (max-width: 1200px) {
  .product .product__col {
    gap: 36px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .product .product__col {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .product img {
    width: calc(100% - 24px);
    margin: 0 auto;
  }
}
.product .product__text {
  font-family: "TsukuGoPro", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  margin-bottom: 40px;
}
.product .product__text span {
  white-space: nowrap;
}
.product .more__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
@media (min-width: 769px) {
  .product .more__btn:hover .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
@media (max-width: 768px) {
  .product .more__btn:active .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
.product .more__btn p {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.75px;
}
.product .more__btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #0283ff;
  position: relative;
  transition: all 0.2s;
}
.product .more__btn .arrow::before {
  transition: all 0.2s;
  background-color: #0283ff;
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  box-sizing: border-box;
}
.product .more__btn .arrow img {
  width: 16px !important;
  position: relative;
}

/* ====================
# Projects
==================== */
.projects {
  background: #FAFAFA;
  padding: 146px 0 80px;
  position: relative;
  /* Project tabs */
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects {
    padding: 112px 0 70px;
  }
}
.projects .top-title {
  margin-bottom: 58px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects .top-title {
    margin-bottom: 32px;
  }
}
.projects .pmlab__text {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
}
.projects .project-tabs {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin: 0;
  position: relative;
  align-items: center;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects .project-tabs {
    gap: 16px;
  }
}
.projects .project-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: transparent;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s;
  color: #bcc9e2;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.2s;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 769px) {
  .projects .project-tab:hover {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .projects .project-tab:active {
    font-size: 16px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects .project-tab {
    height: 28px;
    font-size: 16px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) and (min-width: 769px) {
  .projects .project-tab:hover {
    font-size: 14px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) and (max-width: 768px) {
  .projects .project-tab:active {
    font-size: 14px;
  }
}
.projects .project-tab:nth-of-type(1) {
  width: 170px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects .project-tab:nth-of-type(1) {
    width: 154px;
  }
}
.projects .project-tab:nth-of-type(2) {
  width: 223px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects .project-tab:nth-of-type(2) {
    width: 184px;
  }
}
.projects .project-tab.is-active {
  background: #de244a;
  color: #fff;
  border: none;
  box-shadow: 0 0 6px 0 rgba(29, 32, 49, 0.3);
}
.projects .project-tab.is-active:nth-of-type(2) {
  background: #0283ff;
}
.projects .project-tab-divider {
  width: 2px;
  height: 44px;
  background: #cfd7e6;
  align-self: center;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .projects .project-tab-divider {
    height: 32px;
  }
}
.projects .is-hidden {
  display: none;
}
.projects .projects-slider {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.36s ease, transform 0.36s ease;
  will-change: opacity, transform;
}
.projects .projects-slider.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.projects .splide__track {
  padding-top: 64px;
  padding-bottom: 56px;
}
.projects .splide__slide {
  transition: all 0.2s;
}
@media (min-width: 769px) {
  .projects .splide__slide:hover {
    transform: translateY(-15px);
  }
}
@media (max-width: 768px) {
  .projects .splide__slide:active {
    transform: translateY(-15px);
  }
}
.projects .project-slide {
  border-radius: 8px;
  background: #fbfbfb;
  box-shadow: 0 0 6.234px 0.779px rgba(29, 67, 103, 0.2);
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}
.projects .project-slide__image {
  padding: 4px 4px 0 4px;
}
.projects .project-slide__image img {
  border-radius: 8px;
  aspect-ratio: 264/145;
  height: 100%;
}
.projects .project-slide__content {
  padding: 12px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.projects .project-slide__occupation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.projects .project-slide__occupation .occupation-tag {
  padding: 2px 12px;
  border-radius: 10px;
  border: 1px solid #d2d6dd;
  background: #fafafa;
  color: #333;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.34;
}
.projects .project-slide__title {
  font-family: "TsukuGoPro", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
}
.projects .projects-pmo .project-slide__company {
  margin-top: 6px;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #e83c5c;
  line-height: 1.4;
}
.projects .projects-checkback .project-slide__company {
  color: #0283ff;
  font-family: "TsukuGoPro", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.projects .project-slide__details .detail-tag {
  font-family: "TsukuGoPro", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.67;
}
.projects .project-slide__details .detail-date {
  font-family: "TsukuGoPro", sans-serif;
  color: #d2d6dd;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 18px;
}
.projects .splide__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.projects .splide__arrow {
  position: relative;
  top: auto;
  transform: none;
  right: auto;
  left: auto;
  opacity: 1;
  width: 52px;
  height: 52px;
  z-index: 1;
  padding: 0;
  border: 1px solid #de244a;
  background: none;
  align-items: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
}
@media (min-width: 769px) {
  .projects .splide__arrow:hover::before {
    width: 52px;
    height: 52px;
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .projects .splide__arrow:active::before {
    width: 52px;
    height: 52px;
    opacity: 1;
  }
}
.projects .splide__arrow::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  background: #de244a;
  border: 1px solid #de244a;
  border-radius: 50%;
  transition: all 0.2s;
}
.projects .splide__arrow img {
  width: 16px;
  flex-shrink: 0;
  position: relative;
}

/* ====================
# Clients
==================== */
.clients {
  background: #EEF0F4;
  position: relative;
  padding: 163px 0 132px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .clients {
    padding: 115px 0;
  }
}
.clients .clients__list {
  padding: 40px 0;
  border-radius: 12px;
  background: #fefefe;
  box-shadow: 0 0 10px 0 rgba(29, 32, 49, 0.08);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .clients .clients__list {
    padding: 24px 15px;
  }
}
.clients .clients__list img {
  margin: 0 auto;
  max-width: 820px;
  display: block;
}

/* ==============================================================================
# 過去CSS
============================================================================== */
#loading-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #333333;
  z-index: 0;
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
}

.loading__scene {
  position: relative;
  width: 100%;
  height: 100%;
}

.loading__white-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
  z-index: 1;
}

.loading__burst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.loading__floaters {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.loading__burst-dot {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* opacity はJSで制御 */
}

.loading__floater {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.loading__floater {
  filter: blur(0.2px);
}

body.loading-active {
  overflow: hidden;
}

body.loading-active .header {
  opacity: 0;
  pointer-events: none;
}

body.loading-active #loading-container {
  z-index: 300;
}

body.loading-ready #loading-container {
  z-index: 1;
  background-color: transparent;
}

body.loading-active .after-loading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

body.loading-ready .after-loading {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.6s ease;
}

body.loading-active .creative,
body.loading-exited .creative {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

body.loading-active .creative {
  opacity: 0;
  transform: translateY(20px);
}

body.loading-exited .creative {
  opacity: 1;
  transform: translateY(0);
}

#main-section {
  color: #000;
  font-size: 2em;
  z-index: 30;
  position: relative;
}

.after-loading {
  width: 100%;
  z-index: 0;
  position: relative;
  background-color: rgb(250, 250, 250);
}

body.loading-ready .after-loading {
  z-index: 2;
  background-color: transparent;
}

main .fv__text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .fv__text {
    flex-direction: column;
    padding: 0 22px;
    box-sizing: border-box;
    gap: 23px;
  }
}
main .fv__text p {
  font-size: 18px;
  letter-spacing: 0.9px;
  line-height: 42px;
  font-weight: 400;
  color: #6e6e6e;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .fv__text p {
    font-size: 16px;
    line-height: 35px;
    letter-spacing: 0.75px;
    text-align: center;
  }
}
main .horizons {
  height: 130px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .horizons {
    height: 150px;
    gap: 10px;
  }
}
main .anime-horizon {
  overflow: hidden;
  height: 55px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .anime-horizon {
    height: 41.5px;
  }
  main .anime-horizon.sp {
    margin-top: -10px;
  }
}
main .title {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 3px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .title {
    width: 100%;
    font-size: 28px;
  }
}
main .title span {
  font-size: 40px;
  color: #e83c5c;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .title span {
    width: 100%;
    font-size: 28px;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main {
    text-align: center;
  }
}
main .anime-horizon .horizon-txt {
  display: inline-block;
  transform: translateY(3em);
  transition-property: all;
  transition-duration: 0.7s;
  transition-timing-function: var(--bezier);
}
main .anime-horizon .horizon-wrap:nth-of-type(2) .horizon-txt {
  transition-delay: 0.2s;
}
main .active .anime-horizon,
main .anime-horizon.active .horizon-txt {
  transform: translateY(0px);
}
main .project {
  margin-top: 125px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project {
    margin-top: 60px;
  }
}
main .project .project__inner {
  max-width: 1000px;
  margin: auto;
  width: 100%;
}
main .project .project__inner h2 {
  font-family: "Jost", sans-serif;
  font-size: 30px;
  font-weight: 500;
  position: relative;
  z-index: 100;
  width: -moz-max-content;
  width: max-content;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project__inner h2 {
    padding: 60px 15px 0 15px;
    text-align: left;
  }
}
main .project .project-slider {
  padding-top: 73px;
  margin-top: 20px;
}
main .project .project-slider .splide__slide {
  width: 38% !important;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__slide {
    width: 265px !important;
    height: 148px;
    background-color: #fff;
  }
}
main .project .project-slider .splide__slide a {
  display: block;
}
main .project .project-slider .splide__slide .img__cover {
  overflow: hidden;
  aspect-ratio: 16/9;
  margin: auto;
}
@media (min-width: 769px) {
  main .project .project-slider .splide__slide .img__cover:hover img {
    transform: scale(1.1);
  }
}
@media (max-width: 768px) {
  main .project .project-slider .splide__slide .img__cover:active img {
    transform: scale(1.1);
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__slide .img__cover {
    height: auto;
  }
}
main .project .project-slider .splide__slide img {
  width: 100%;
  transition: all 0.3s;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 16/9;
}
main .project .project-slider .splide__slide h3 {
  color: #333;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 35px;
  margin-top: 34px;
  height: 70px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__slide h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 32px;
    margin-top: 14px;
    height: 70px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
main .project .project-slider .splide__slide p {
  color: #888;
  font-size: 15px;
  letter-spacing: 0.75px;
  margin-top: 10px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__slide p {
    text-align: left;
  }
}
main .project .project-slider .splide__pagination {
  bottom: auto;
  left: auto;
  padding: 0 1em;
  position: absolute;
  right: 0px;
  z-index: 1;
  top: -50px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__pagination {
    top: 20px;
    left: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
  }
}
main .project .project-slider .splide__pagination .splide__pagination__page {
  width: 81px;
  height: 4px;
  border-radius: 0;
  background-color: #ededed;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__pagination .splide__pagination__page {
    width: 62px;
  }
}
main .project .project-slider .splide__pagination .splide__pagination__page.is-active {
  background-color: #888888;
  transform: scale(1);
}
main .project .project-slider .splide__arrows {
  width: calc(38% + 75px);
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__arrows {
    width: 310px;
    display: none;
  }
}
main .project .project-slider .splide__arrow {
  position: absolute;
  top: 30px;
  background-color: transparent;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__arrow {
    top: 65px;
  }
}
main .project .project-slider .splide__arrow svg {
  display: none;
}
main .project .project-slider .splide__arrow--prev {
  left: 10px;
  width: 1em;
  height: 1em;
  border-right: 1.5px solid #333;
  border-bottom: 1.5px solid #333;
  border-radius: 0;
  transform: rotate(135deg);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__arrow--prev {
    width: 12px;
    height: 12px;
  }
}
main .project .project-slider .splide__arrow--next {
  right: 10px;
  width: 1em;
  height: 1em;
  border-right: 1.5px solid #333;
  border-bottom: 1.5px solid #333;
  border-radius: 0;
  transform: rotate(-45deg);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .project-slider .splide__arrow--next {
    width: 12px;
    height: 12px;
  }
}
main .project .splide__track {
  height: inherit;
}
main .project .splide__list {
  align-items: flex-start;
  min-height: 420px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .project .splide__list {
    height: 270px;
    min-height: 270px;
  }
}
main .project .more__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 50px;
}
@media (min-width: 769px) {
  main .project .more__btn:hover .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
@media (max-width: 768px) {
  main .project .more__btn:active .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
main .project .more__btn p {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.75px;
}
main .project .more__btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgb(222, 36, 74);
  position: relative;
  transition: all 0.2s;
}
main .project .more__btn .arrow::before {
  transition: all 0.2s;
  background-color: rgb(222, 36, 74);
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  box-sizing: border-box;
}
main .project .more__btn .arrow img {
  width: 16px !important;
  position: relative;
}
main .business {
  margin-top: 70px;
  padding-bottom: 379px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business {
    padding-bottom: 0px;
  }
}
main .business .business__inner {
  max-width: 1000px;
  margin: auto;
  width: 100%;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner {
    padding: 0 15px;
    box-sizing: border-box;
  }
}
main .business .business__inner h2 {
  font-family: "Jost", sans-serif;
  font-size: 30px;
  font-weight: 500;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner h2 {
    text-align: left;
    padding: 0 15px;
  }
}
main .business .business__inner .business__contents {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 80px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents {
    flex-direction: column;
  }
}
main .business .business__inner .business__contents::before {
  content: "";
  position: absolute;
  width: 346px;
  height: 346px;
  border: 3px solid #ededed;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents::before {
    display: none;
  }
}
main .business .business__inner .business__contents .business__item {
  position: relative;
  display: flex;
  align-items: center;
  width: 492px;
  justify-content: flex-end;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item {
    width: 100%;
    flex-direction: column;
  }
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item:nth-child(2) .link {
    width: 208px;
    height: 208px;
    margin-right: auto !important;
    margin-left: 0;
    margin-top: 90px;
  }
}
main .business .business__inner .business__contents .business__item .content__detail {
  position: absolute;
  bottom: -423px;
  width: 380px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .content__detail {
    position: static;
    width: 100%;
    transform: translateX(0);
    margin-top: 70px;
  }
}
main .business .business__inner .business__contents .business__item .content__detail .title {
  letter-spacing: 0.9px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  width: 100%;
  margin: auto;
}
main .business .business__inner .business__contents .business__item .content__detail .title img {
  width: 195px;
}
main .business .business__inner .business__contents .business__item .content__detail .text {
  font-size: 15px;
  letter-spacing: 0.75px;
  line-height: 35px;
  margin-top: 20px;
}
main .business .business__inner .business__contents .business__item .content__detail .more__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
@media (min-width: 769px) {
  main .business .business__inner .business__contents .business__item .content__detail .more__btn:hover .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
@media (max-width: 768px) {
  main .business .business__inner .business__contents .business__item .content__detail .more__btn:active .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
main .business .business__inner .business__contents .business__item .content__detail .more__btn p {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.75px;
}
main .business .business__inner .business__contents .business__item .content__detail .more__btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgb(222, 36, 74);
  position: relative;
  transition: all 0.2s;
}
main .business .business__inner .business__contents .business__item .content__detail .more__btn .arrow::before {
  transition: all 0.2s;
  background-color: rgb(222, 36, 74);
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  box-sizing: border-box;
}
main .business .business__inner .business__contents .business__item .content__detail .more__btn .arrow img {
  width: 16px !important;
  position: relative;
}
main .business .business__inner .business__contents .business__item .img__cover {
  width: 350px;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  left: 0;
  background-color: #fff;
  height: 350px;
  border-radius: 50%;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .img__cover {
    width: 255px;
    height: 255px;
    top: -20px;
  }
}
main .business .business__inner .business__contents .business__item .img__cover img {
  width: inherit;
  transition: all 0.3s;
}
main .business .business__inner .business__contents .business__item .link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 285px;
  height: 285px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link {
    width: 208px;
    height: 208px;
    margin-left: auto;
  }
}
main .business .business__inner .business__contents .business__item .link .circles {
  position: relative;
  width: inherit;
  height: inherit;
}
main .business .business__inner .business__contents .business__item .link .circles .circle {
  border-radius: 50%;
  position: absolute;
}
main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(1) {
  transition: all 0.4s;
  top: 0;
  left: 0;
  width: 286px;
  height: 286px;
  background-color: #ebb5c0;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(1) {
    width: 208px;
    height: 208px;
  }
}
main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(2) {
  transition: all 0.2s;
  top: 23px;
  left: 23px;
  width: 240px;
  height: 240px;
  background-color: #e38094;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(2) {
    width: 174px;
    height: 174px;
    top: 18px;
    left: 18px;
  }
}
main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) {
  top: 44px;
  left: 44px;
  background-color: #e83c5c;
  width: 198px;
  height: 198px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) {
    width: 144px;
    height: 144px;
    top: 33px;
    left: 33px;
    gap: 0;
  }
}
main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) h3 {
  font-size: 25px;
  color: #fff;
  font-weight: 400;
  font-family: "Jost";
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) h3 {
    font-size: 17px;
  }
}
main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) p {
  color: #fff;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.75px;
  line-height: 25px;
  text-align: center;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) p {
    font-size: 10px;
    line-height: 17px;
    letter-spacing: 0.5px;
  }
}
main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) img {
  width: 16px !important;
  transition: all 0.3s;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link .circles .circle:nth-child(3) img {
    margin-top: 10px;
  }
}
@media (min-width: 769px) {
  main .business .business__inner .business__contents .business__item .link:hover .circles .circle:nth-child(1) {
    width: 303px;
    height: 303px;
    top: -10px;
    left: -10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link:hover .circles .circle:nth-child(1) {
    width: 223px;
    height: 223px;
    top: -10px;
    left: -10px;
  }
}
@media (min-width: 769px) {
  main .business .business__inner .business__contents .business__item .link:hover .circles .circle:nth-child(2) {
    width: 248px;
    height: 248px;
    top: 17px;
    left: 17px;
  }
}
@media screen and (min-width: 769px) and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link:hover .circles .circle:nth-child(2) {
    width: 188px;
    height: 188px;
    top: 10px;
    left: 10px;
  }
}
@media (min-width: 769px) {
  main .business .business__inner .business__contents .business__item .link:hover .circles .circle:nth-child(3) img {
    transform: translateY(-10px);
  }
}
@media (max-width: 768px) {
  main .business .business__inner .business__contents .business__item .link:active .circles .circle:nth-child(1) {
    width: 303px;
    height: 303px;
    top: -10px;
    left: -10px;
  }
}
@media screen and (max-width: 768px) and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link:active .circles .circle:nth-child(1) {
    width: 223px;
    height: 223px;
    top: -10px;
    left: -10px;
  }
}
@media (max-width: 768px) {
  main .business .business__inner .business__contents .business__item .link:active .circles .circle:nth-child(2) {
    width: 248px;
    height: 248px;
    top: 17px;
    left: 17px;
  }
}
@media screen and (max-width: 768px) and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item .link:active .circles .circle:nth-child(2) {
    width: 188px;
    height: 188px;
    top: 10px;
    left: 10px;
  }
}
@media (max-width: 768px) {
  main .business .business__inner .business__contents .business__item .link:active .circles .circle:nth-child(3) img {
    transform: translateY(-10px);
  }
}
main .business .business__inner .business__contents .business__item .link ~ .img__cover img {
  width: 500px;
}
main .business .business__inner .business__contents .business__item:nth-child(2) {
  justify-content: flex-start;
}
main .business .business__inner .business__contents .business__item:nth-child(2) .img__cover {
  width: 350px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 50%;
  height: 350px;
  right: 0;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item:nth-child(2) .img__cover {
    width: 266px;
    height: 266px;
    top: 60px;
  }
}
main .business .business__inner .business__contents .business__item:nth-child(2) .img__cover img {
  width: 352px !important;
  transition: all 0.3s;
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles {
  position: relative;
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle {
  border-radius: 50%;
  position: absolute;
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(1) {
  top: 0;
  left: 0;
  width: 286px;
  height: 286px;
  background-color: #c0d5e9;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(1) {
    width: 208px;
    height: 208px;
  }
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(2) {
  top: 23px;
  left: 23px;
  width: 240px;
  height: 240px;
  background-color: #6ca5de;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(2) {
    width: 174px;
    height: 174px;
    top: 18px;
    left: 18px;
  }
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(3) {
  top: 44px;
  left: 44px;
  background-color: #4181d4;
  width: 198px;
  height: 198px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(3) {
    width: 144px;
    height: 144px;
    top: 33px;
    left: 33px;
    gap: 0;
  }
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(3) h3 {
  font-size: 25px;
  color: #fff;
  font-weight: 400;
  margin-top: 23px;
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(3) p {
  color: #fff;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.75px;
  line-height: 25px;
  text-align: center;
  margin-top: 17px;
}
main .business .business__inner .business__contents .business__item:nth-child(2) .circles .circle:nth-child(3) img {
  width: 16px !important;
  margin-top: 8px;
}
main .news {
  background-color: #ededed;
  padding: 49px 0;
}
main .news .news__inner {
  max-width: 1000px;
  width: 100%;
  margin: auto;
}
main .news .news__inner h2 {
  font-family: "Jost", sans-serif;
  font-size: 30px;
  font-weight: 500;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .news .news__inner h2 {
    padding-left: 15px;
    box-sizing: border-box;
    text-align: left;
  }
}
main .news .splide__list {
  margin-top: 40px !important;
}
main .news .splide__slide {
  width: 307px !important;
  transition: all 0.3s;
}
@media (min-width: 769px) {
  main .news .splide__slide:hover {
    transform: translateY(-15px);
  }
}
@media screen and (min-width: 769px) and (max-width: 600px) and (min-width:360px) {
  main .news .splide__slide:hover {
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  main .news .splide__slide:active {
    transform: translateY(-15px);
  }
}
@media screen and (max-width: 768px) and (max-width: 600px) and (min-width:360px) {
  main .news .splide__slide:active {
    transform: translateY(0);
  }
}
main .news .splide__slide img {
  width: 307px;
  vertical-align: bottom;
  height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
}
main .news .splide__slide .text__content {
  background-color: #fff;
  padding: 0 16px 24px 16px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .news .splide__slide .text__content {
    text-align: left;
  }
}
main .news .splide__slide .text__content time {
  font-size: 15px;
  letter-spacing: 0.75px;
  color: #888;
}
main .news .splide__slide .text__content p {
  margin-top: 10px;
  font-size: 15px;
  letter-spacing: 0.75px;
  line-height: 25px;
  color: #000;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  font-family: "M PLUS 1p", sans-serif;
}
main .news .splide__pagination {
  display: none;
}
main .news .splide__arrows {
  max-width: 70px;
  width: 100%;
  position: absolute;
  right: 183px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .news .splide__arrows {
    right: 20px;
    display: none;
  }
}
main .news .splide__arrows .splide__arrow {
  background-color: transparent;
}
main .news .splide__arrows .splide__arrow--prev {
  left: 0;
  width: 1em;
  height: 1em;
  border-right: 1.5px solid #333;
  border-bottom: 1.5px solid #333;
  border-radius: 0;
  transform: rotate(135deg);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .news .splide__arrows .splide__arrow--prev {
    left: 5px;
  }
}
main .news .splide__arrows .splide__arrow--prev svg {
  display: none;
}
main .news .splide__arrows .splide__arrow--next {
  right: 0;
  width: 1em;
  height: 1em;
  border-right: 1.5px solid #333;
  border-bottom: 1.5px solid #333;
  border-radius: 0;
  transform: rotate(-45deg);
}
@media screen and (max-width: 600px) and (min-width:360px) {
  main .news .splide__arrows .splide__arrow--next {
    right: 5px;
  }
}
main .news .splide__arrows .splide__arrow--next svg {
  display: none;
}
main .news .more__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 60px;
}
@media (min-width: 769px) {
  main .news .more__btn:hover .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
@media (max-width: 768px) {
  main .news .more__btn:active .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
main .news .more__btn p {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.75px;
}
main .news .more__btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgb(222, 36, 74);
  position: relative;
  transition: all 0.2s;
}
main .news .more__btn .arrow::before {
  transition: all 0.2s;
  background-color: rgb(222, 36, 74);
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  box-sizing: border-box;
}
main .news .more__btn .arrow img {
  width: 16px !important;
  position: relative;
}

.splide__bg {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 70%;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  filter: blur(2px);
  z-index: 0;
  box-shadow: inset 0px 0 40px 55px #fff;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.3;
  }
}
.media {
  padding-top: 64px;
  padding-bottom: 64px;
}
.media .media__inner {
  max-width: 1000px;
  margin: auto;
  width: 100%;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .media .media__inner {
    box-sizing: border-box;
    padding: 0 15px;
  }
}
.media .media__inner h2 {
  font-family: "Jost", sans-serif;
  font-size: 30px;
  font-weight: 500;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .media .media__inner h2 {
    padding-left: 15px;
    box-sizing: border-box;
    text-align: left;
  }
}
.media .media__inner .media__contents {
  display: flex;
  gap: 43px;
  align-items: center;
  margin-top: 64px;
  justify-content: center;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .media .media__inner .media__contents {
    flex-direction: column;
  }
}
.media .media__inner .media__contents .media__left img {
  width: 372px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .media .media__inner .media__contents .media__left img {
    width: 100%;
  }
}
.media .media__inner .media__contents .media__right {
  width: 488px;
}
@media screen and (max-width: 600px) and (min-width:360px) {
  .media .media__inner .media__contents .media__right {
    width: 100%;
  }
}
.media .media__inner .media__contents .media__right h3 {
  color: #1a1a1a;
  font-size: 25px;
  font-weight: 600;
}
.media .media__inner .media__contents .media__right p {
  color: #000000;
  font-size: 15px;
  font-weight: 400;
  line-height: 30px;
  margin-top: 10px;
}
.media .more__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 50px;
}
@media (min-width: 769px) {
  .media .more__btn:hover .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
@media (max-width: 768px) {
  .media .more__btn:active .arrow::before {
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
  }
}
.media .more__btn p {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.75px;
}
.media .more__btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgb(222, 36, 74);
  position: relative;
  transition: all 0.2s;
}
.media .more__btn .arrow::before {
  transition: all 0.2s;
  background-color: rgb(222, 36, 74);
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  box-sizing: border-box;
}
.media .more__btn .arrow img {
  width: 16px !important;
  position: relative;
}/*# sourceMappingURL=page-front.css.map */