[data-sonner-toaster][dir="ltr"],
html[dir="ltr"] {
  --toast-icon-margin-start: -3px;
  --toast-icon-margin-end: 4px;
  --toast-svg-margin-start: -1px;
  --toast-svg-margin-end: 0px;
  --toast-button-margin-start: auto;
  --toast-button-margin-end: 0;
  --toast-close-button-start: 0;
  --toast-close-button-end: unset;
  --toast-close-button-transform: translate(-35%, -35%);
}
[data-sonner-toaster][dir="rtl"],
html[dir="rtl"] {
  --toast-icon-margin-start: 4px;
  --toast-icon-margin-end: -3px;
  --toast-svg-margin-start: 0px;
  --toast-svg-margin-end: -1px;
  --toast-button-margin-start: 0;
  --toast-button-margin-end: auto;
  --toast-close-button-start: unset;
  --toast-close-button-end: 0;
  --toast-close-button-transform: translate(35%, -35%);
}
[data-sonner-toaster] {
  position: fixed;
  width: var(--width);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  --gray1: hsl(0, 0%, 99%);
  --gray2: hsl(0, 0%, 97.3%);
  --gray3: hsl(0, 0%, 95.1%);
  --gray4: hsl(0, 0%, 93%);
  --gray5: hsl(0, 0%, 90.9%);
  --gray6: hsl(0, 0%, 88.7%);
  --gray7: hsl(0, 0%, 85.8%);
  --gray8: hsl(0, 0%, 78%);
  --gray9: hsl(0, 0%, 56.1%);
  --gray10: hsl(0, 0%, 52.3%);
  --gray11: hsl(0, 0%, 43.5%);
  --gray12: hsl(0, 0%, 9%);
  --border-radius: 8px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  outline: 0;
  z-index: 999999999;
  transition: transform 0.4s ease;
}
@media (hover: none) and (pointer: coarse) {
  [data-sonner-toaster][data-lifted="true"] {
    transform: none;
  }
}
[data-sonner-toaster][data-x-position="right"] {
  right: var(--offset-right);
}
[data-sonner-toaster][data-x-position="left"] {
  left: var(--offset-left);
}
[data-sonner-toaster][data-x-position="center"] {
  left: 50%;
  transform: translateX(-50%);
}
[data-sonner-toaster][data-y-position="top"] {
  top: var(--offset-top);
}
[data-sonner-toaster][data-y-position="bottom"] {
  bottom: var(--offset-bottom);
}
[data-sonner-toast] {
  --y: translateY(100%);
  --lift-amount: calc(var(--lift) * var(--gap));
  z-index: var(--z-index);
  position: absolute;
  opacity: 0;
  transform: var(--y);
  touch-action: none;
  transition:
    transform 0.4s,
    opacity 0.4s,
    height 0.4s,
    box-shadow 0.2s;
  box-sizing: border-box;
  outline: 0;
  overflow-wrap: anywhere;
}
[data-sonner-toast][data-styled="true"] {
  padding: 16px;
  background: var(--normal-bg);
  border: 1px solid var(--normal-border);
  color: var(--normal-text);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: var(--width);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-sonner-toast]:focus-visible {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(0, 0, 0, 0.2);
}
[data-sonner-toast][data-y-position="top"] {
  top: 0;
  --y: translateY(-100%);
  --lift: 1;
  --lift-amount: calc(1 * var(--gap));
}
[data-sonner-toast][data-y-position="bottom"] {
  bottom: 0;
  --y: translateY(100%);
  --lift: -1;
  --lift-amount: calc(var(--lift) * var(--gap));
}
[data-sonner-toast][data-styled="true"] [data-description] {
  font-weight: 400;
  line-height: 1.4;
  color: #3f3f3f;
}
[data-rich-colors="true"][data-sonner-toast][data-styled="true"]
  [data-description] {
  color: inherit;
}
[data-sonner-toaster][data-sonner-theme="dark"] [data-description] {
  color: #e8e8e8;
}
[data-sonner-toast][data-styled="true"] [data-title] {
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
}
[data-sonner-toast][data-styled="true"] [data-icon] {
  display: flex;
  height: 16px;
  width: 16px;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  margin-left: var(--toast-icon-margin-start);
  margin-right: var(--toast-icon-margin-end);
}
[data-sonner-toast][data-promise="true"] [data-icon] > svg {
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  animation: sonner-fade-in 0.3s ease forwards;
}
[data-sonner-toast][data-styled="true"] [data-icon] > * {
  flex-shrink: 0;
}
[data-sonner-toast][data-styled="true"] [data-icon] svg {
  margin-left: var(--toast-svg-margin-start);
  margin-right: var(--toast-svg-margin-end);
}
[data-sonner-toast][data-styled="true"] [data-content] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-sonner-toast][data-styled="true"] [data-button] {
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  height: 24px;
  font-size: 12px;
  color: var(--normal-bg);
  background: var(--normal-text);
  margin-left: var(--toast-button-margin-start);
  margin-right: var(--toast-button-margin-end);
  border: none;
  font-weight: 500;
  cursor: pointer;
  outline: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition:
    opacity 0.4s,
    box-shadow 0.2s;
}
[data-sonner-toast][data-styled="true"] [data-button]:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
[data-sonner-toast][data-styled="true"] [data-button]:first-of-type {
  margin-left: var(--toast-button-margin-start);
  margin-right: var(--toast-button-margin-end);
}
[data-sonner-toast][data-styled="true"] [data-cancel] {
  color: var(--normal-text);
  background: rgba(0, 0, 0, 0.08);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast][data-styled="true"]
  [data-cancel] {
  background: rgba(255, 255, 255, 0.3);
}
[data-sonner-toast][data-styled="true"] [data-close-button] {
  position: absolute;
  left: var(--toast-close-button-start);
  right: var(--toast-close-button-end);
  top: 0;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  color: var(--gray12);
  background: var(--normal-bg);
  border: 1px solid var(--gray4);
  transform: var(--toast-close-button-transform);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition:
    opacity 0.1s,
    background 0.2s,
    border-color 0.2s;
}
[data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(0, 0, 0, 0.2);
}
[data-sonner-toast][data-styled="true"] [data-disabled="true"] {
  cursor: not-allowed;
}
[data-sonner-toast][data-styled="true"]:hover [data-close-button]:hover {
  background: var(--gray2);
  border-color: var(--gray5);
}
[data-sonner-toast][data-swiping="true"]::before {
  content: "";
  position: absolute;
  left: -100%;
  right: -100%;
  height: 100%;
  z-index: -1;
}
[data-sonner-toast][data-y-position="top"][data-swiping="true"]::before {
  bottom: 50%;
  transform: scaleY(3) translateY(50%);
}
[data-sonner-toast][data-y-position="bottom"][data-swiping="true"]::before {
  top: 50%;
  transform: scaleY(3) translateY(-50%);
}
[data-sonner-toast][data-swiping="false"][data-removed="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleY(2);
}
[data-sonner-toast][data-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  height: calc(var(--gap) + 1px);
  bottom: 100%;
  width: 100%;
}
[data-sonner-toast][data-mounted="true"] {
  --y: translateY(0);
  opacity: 1;
}
[data-sonner-toast][data-expanded="false"][data-front="false"] {
  --scale: var(--toasts-before) * 0.05 + 1;
  --y: translateY(calc(var(--lift-amount) * var(--toasts-before)))
    scale(calc(-1 * var(--scale)));
  height: var(--front-toast-height);
}
[data-sonner-toast] > * {
  transition: opacity 0.4s;
}
[data-sonner-toast][data-x-position="right"] {
  right: 0;
}
[data-sonner-toast][data-x-position="left"] {
  left: 0;
}
[data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"]
  > * {
  opacity: 0;
}
[data-sonner-toast][data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}
[data-sonner-toast][data-mounted="true"][data-expanded="true"] {
  --y: translateY(calc(var(--lift) * var(--offset)));
  height: var(--initial-height);
}
[data-sonner-toast][data-removed="true"][data-front="true"][data-swipe-out="false"] {
  --y: translateY(calc(var(--lift) * -100%));
  opacity: 0;
}
[data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"] {
  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
  opacity: 0;
}
[data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"] {
  --y: translateY(40%);
  opacity: 0;
  transition:
    transform 0.5s,
    opacity 0.2s;
}
[data-sonner-toast][data-removed="true"][data-front="false"]::before {
  height: calc(var(--initial-height) + 20%);
}
[data-sonner-toast][data-swiping="true"] {
  transform: var(--y) translateY(var(--swipe-amount-y, 0))
    translateX(var(--swipe-amount-x, 0));
  transition: none;
}
[data-sonner-toast][data-swiped="true"] {
  user-select: none;
}
[data-sonner-toast][data-swipe-out="true"][data-y-position="bottom"],
[data-sonner-toast][data-swipe-out="true"][data-y-position="top"] {
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="left"] {
  animation-name: swipe-out-left;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="right"] {
  animation-name: swipe-out-right;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="up"] {
  animation-name: swipe-out-up;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="down"] {
  animation-name: swipe-out-down;
}
@keyframes swipe-out-left {
  from {
    transform: var(--y) translateX(var(--swipe-amount-x));
    opacity: 1;
  }
  to {
    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
    opacity: 0;
  }
}
@keyframes swipe-out-right {
  from {
    transform: var(--y) translateX(var(--swipe-amount-x));
    opacity: 1;
  }
  to {
    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
    opacity: 0;
  }
}
@keyframes swipe-out-up {
  from {
    transform: var(--y) translateY(var(--swipe-amount-y));
    opacity: 1;
  }
  to {
    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
    opacity: 0;
  }
}
@keyframes swipe-out-down {
  from {
    transform: var(--y) translateY(var(--swipe-amount-y));
    opacity: 1;
  }
  to {
    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
    opacity: 0;
  }
}
@media (max-width: 600px) {
  [data-sonner-toaster] {
    position: fixed;
    right: var(--mobile-offset-right);
    left: var(--mobile-offset-left);
    width: 100%;
  }
  [data-sonner-toaster][dir="rtl"] {
    left: calc(var(--mobile-offset-left) * -1);
  }
  [data-sonner-toaster] [data-sonner-toast] {
    left: 0;
    right: 0;
    width: calc(100% - var(--mobile-offset-left) * 2);
  }
  [data-sonner-toaster][data-x-position="left"] {
    left: var(--mobile-offset-left);
  }
  [data-sonner-toaster][data-y-position="bottom"] {
    bottom: var(--mobile-offset-bottom);
  }
  [data-sonner-toaster][data-y-position="top"] {
    top: var(--mobile-offset-top);
  }
  [data-sonner-toaster][data-x-position="center"] {
    left: var(--mobile-offset-left);
    right: var(--mobile-offset-right);
    transform: none;
  }
}
[data-sonner-toaster][data-sonner-theme="light"] {
  --normal-bg: #fff;
  --normal-border: var(--gray4);
  --normal-text: var(--gray12);
  --success-bg: hsl(143, 85%, 96%);
  --success-border: hsl(145, 92%, 87%);
  --success-text: hsl(140, 100%, 27%);
  --info-bg: hsl(208, 100%, 97%);
  --info-border: hsl(221, 91%, 93%);
  --info-text: hsl(210, 92%, 45%);
  --warning-bg: hsl(49, 100%, 97%);
  --warning-border: hsl(49, 91%, 84%);
  --warning-text: hsl(31, 92%, 45%);
  --error-bg: hsl(359, 100%, 97%);
  --error-border: hsl(359, 100%, 94%);
  --error-text: hsl(360, 100%, 45%);
}
[data-sonner-toaster][data-sonner-theme="light"]
  [data-sonner-toast][data-invert="true"] {
  --normal-bg: #000;
  --normal-border: hsl(0, 0%, 20%);
  --normal-text: var(--gray1);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast][data-invert="true"] {
  --normal-bg: #fff;
  --normal-border: var(--gray3);
  --normal-text: var(--gray12);
}
[data-sonner-toaster][data-sonner-theme="dark"] {
  --normal-bg: #000;
  --normal-bg-hover: hsl(0, 0%, 12%);
  --normal-border: hsl(0, 0%, 20%);
  --normal-border-hover: hsl(0, 0%, 25%);
  --normal-text: var(--gray1);
  --success-bg: hsl(150, 100%, 6%);
  --success-border: hsl(147, 100%, 12%);
  --success-text: hsl(150, 86%, 65%);
  --info-bg: hsl(215, 100%, 6%);
  --info-border: hsl(223, 43%, 17%);
  --info-text: hsl(216, 87%, 65%);
  --warning-bg: hsl(64, 100%, 6%);
  --warning-border: hsl(60, 100%, 9%);
  --warning-text: hsl(46, 87%, 65%);
  --error-bg: hsl(358, 76%, 10%);
  --error-border: hsl(357, 89%, 16%);
  --error-text: hsl(358, 100%, 81%);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast]
  [data-close-button] {
  background: var(--normal-bg);
  border-color: var(--normal-border);
  color: var(--normal-text);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast]
  [data-close-button]:hover {
  background: var(--normal-bg-hover);
  border-color: var(--normal-border-hover);
}
[data-rich-colors="true"][data-sonner-toast][data-type="success"] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="success"]
  [data-close-button] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="info"] {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="info"]
  [data-close-button] {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="warning"] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="warning"]
  [data-close-button] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="error"] {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="error"]
  [data-close-button] {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
.sonner-loading-wrapper {
  --size: 16px;
  height: var(--size);
  width: var(--size);
  position: absolute;
  inset: 0;
  z-index: 10;
}
.sonner-loading-wrapper[data-visible="false"] {
  transform-origin: center;
  animation: sonner-fade-out 0.2s ease forwards;
}
.sonner-spinner {
  position: relative;
  top: 50%;
  left: 50%;
  height: var(--size);
  width: var(--size);
}
.sonner-loading-bar {
  animation: sonner-spin 1.2s linear infinite;
  background: var(--gray11);
  border-radius: 6px;
  height: 8%;
  left: -10%;
  position: absolute;
  top: -3.9%;
  width: 24%;
}
.sonner-loading-bar:first-child {
  animation-delay: -1.2s;
  transform: rotate(0.0001deg) translate(146%);
}
.sonner-loading-bar:nth-child(2) {
  animation-delay: -1.1s;
  transform: rotate(30deg) translate(146%);
}
.sonner-loading-bar:nth-child(3) {
  animation-delay: -1s;
  transform: rotate(60deg) translate(146%);
}
.sonner-loading-bar:nth-child(4) {
  animation-delay: -0.9s;
  transform: rotate(90deg) translate(146%);
}
.sonner-loading-bar:nth-child(5) {
  animation-delay: -0.8s;
  transform: rotate(120deg) translate(146%);
}
.sonner-loading-bar:nth-child(6) {
  animation-delay: -0.7s;
  transform: rotate(150deg) translate(146%);
}
.sonner-loading-bar:nth-child(7) {
  animation-delay: -0.6s;
  transform: rotate(180deg) translate(146%);
}
.sonner-loading-bar:nth-child(8) {
  animation-delay: -0.5s;
  transform: rotate(210deg) translate(146%);
}
.sonner-loading-bar:nth-child(9) {
  animation-delay: -0.4s;
  transform: rotate(240deg) translate(146%);
}
.sonner-loading-bar:nth-child(10) {
  animation-delay: -0.3s;
  transform: rotate(270deg) translate(146%);
}
.sonner-loading-bar:nth-child(11) {
  animation-delay: -0.2s;
  transform: rotate(300deg) translate(146%);
}
.sonner-loading-bar:nth-child(12) {
  animation-delay: -0.1s;
  transform: rotate(330deg) translate(146%);
}
@keyframes sonner-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sonner-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes sonner-spin {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}
@media (prefers-reduced-motion) {
  .sonner-loading-bar,
  [data-sonner-toast],
  [data-sonner-toast] > * {
    transition: none;
    animation: none;
  }
}
.sonner-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.sonner-loader[data-visible="false"] {
  opacity: 0;
  transform: scale(0.8) translate(-50%, -50%);
}

/* ==========================================================================
   Carousel
   ========================================================================== */
.concept-carousel {
  width: 100%;
  overflow: hidden;
  padding-top: 150px;
  padding-bottom: 0;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: carousel-scroll-right 60s linear infinite;
}

.carousel-item {
  width: 300px;
  height: 200px;
  margin-right: 40px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Custom Rhythm - Pattern of 6 */
.carousel-item:nth-child(6n + 1) {
  width: 340px;
  height: 240px;
  margin-top: 0;
}

.carousel-item:nth-child(6n + 2) {
  width: 240px;
  height: 240px;
  margin-top: 80px;
}

.carousel-item:nth-child(6n + 3) {
  width: 420px;
  height: 280px;
  margin-top: -40px;
}

.carousel-item:nth-child(6n + 4) {
  width: 260px;
  height: 340px; /* Portrait */
  margin-top: 20px;
}

.carousel-item:nth-child(6n + 5) {
  width: 300px;
  height: 200px;
  margin-top: 60px;
}

.carousel-item:nth-child(6n + 6) {
  width: 280px;
  height: 280px;
  margin-top: 10px;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes carousel-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.logo-stroke {
  fill: none;
  stroke: #000000;
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
  animation: drawLogo 3s 0.4s forwards;
}

@keyframes drawLogo {
  0% {
    stroke-dashoffset: 3000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */
:root {
  --color-black: #333333;
  --color-black-pure: #000000;
  --color-white: #ffffff;
  --color-off-white: #fafafa;
  --color-gray: #e6e6e6;
  --color-gray-dark: #333333;
  --color-red: #e9464d; /* Changed from #E12D28 */

  --font-en: "Montserrat", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;

  --easing: cubic-bezier(0.25, 1, 0.5, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  color: var(--color-black);
  background-color: var(--color-white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s var(--easing);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.sp-br {
  display: none;
}

.section-padding {
  padding: 100px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  position: relative;
}

.container-fluid {
  width: 100%;
  padding: 0;
  position: relative;
}

.section-title-sm {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 15px;
}

.section-title-sm::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: var(--color-red);
}

.section-label-red {
  display: inline-block;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Header (Updated)
   ========================================================================== */
.header {
  position: fixed; /* Changed to fixed/absolute layering as requested */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 75px; /* Reverted to 80px -> 75px */
  background-color: transparent; /* Default transparent */
  transition:
    background-color 0.3s var(--easing),
    box-shadow 0.3s var(--easing);
}

/* When scrolled: White bg, Black text（トップ用） */
.header.is-scrolled {
  background-color: #ffffff;
  height: 75px; /* Reverted to 80px -> 75px */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 下層ページ: 初期表示から白背景・黒文字 */
body.theme-youi-is-subpage .header.is-subpage {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-inner {
  display: flex;
  justify-content: space-between; /* Adjusted for Logo Left / Menu Right */
  align-items: center;
  height: 100%;
  padding: 0 48px; /* PC padding as requested */
  width: 100%;
}

/* Logo */
.header-logo {
  margin-right: auto;
  flex-shrink: 0;
  z-index: 1001;
}

.header-logo img {
  height: auto; /* Changed from 40px to 55px -> auto */
  width: 165px;
}

@media screen and (max-width: 767px) {
  .header-logo img {
    width: 125px;
  }
}

/* Navigation (Right) */
.header-nav {
  display: none; /* Mobile hidden */
  margin: 0; /* Reset margin */
  margin-left: auto; /* Push to right */
}

@media (min-width: 1024px) {
  .header-nav {
    display: block;
  }
}

.nav-list {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-list a {
  color: var(--color-white); /* Default white */
  font-family: var(--font-jp); /* Changed to Japanese font */
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 1;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 5px;
}

/* Scrolled state: Black text */
.header.is-scrolled .nav-list a {
  color: var(--color-black);
}

/* Sub-page state: Black text from the start */
.header.is-subpage .nav-list a {
  color: var(--color-black);
}

.nav-list a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* Active underline */
.nav-list a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #e9464d; /* Red underline */
}

/* Buttons (Right) */
.header-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 30px; /* Space between nav and cta */
}

/* Button Styles */
.btn-header-sub {
  display: none;
  background-color: #222; /* Dark button */
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 40px; /* Rounded pill shape */
  transition: background-color 0.3s;
}

.btn-header-sub:hover {
  background-color: #444;
}

.btn-header-main {
  display: none;
  background-color: var(--color-red); /* Red button */
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 50px; /* Changed from 40px */
  transition: opacity 0.3s;
}

.btn-header-main:hover {
  opacity: 0.8;
}

@media (min-width: 1024px) {
  .btn-header-sub,
  .btn-header-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/* Hamburger */
.hamburger-menu {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  display: block;
  margin-left: 20px;
  z-index: 1002;
}

@media (min-width: 1024px) {
  .hamburger-menu {
    display: none;
  }
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  position: absolute;
  left: 0;
  transition: all 0.3s;
}

.hamburger-menu span:nth-child(1) {
  top: 0;
}
.hamburger-menu span:nth-child(2) {
  top: 9px;
}
.hamburger-menu span:nth-child(3) {
  bottom: 0;
}

/* Scrolled state for hamburger */
.header.is-scrolled .hamburger-menu span {
  background-color: var(--color-black);
}

/* Sub-page state for hamburger */
.header.is-subpage .hamburger-menu span {
  background-color: var(--color-black);
}
.hamburger-menu.is-active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.is-active span:nth-child(3) {
  bottom: 9px;
  transform: rotate(-45deg);
}

/* ==========================================================================
   Hero (Completely Redesigned)
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* PC guideline 80-90vh -> changed to 100vh */
  min-height: 600px;
  overflow: hidden;
  color: var(--color-white);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* Ensure full viewport width */
  height: 100vh; /* Ensure full viewport height */
  z-index: 0;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Animation starts only when .is-active class is added to parent or specific class */
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Ensure centered */
}

.hero-slide-mobile {
  display: none; /* Hide mobile image by default (PC) */
}

.hero-slide-pc {
  display: block; /* Show PC image by default */
}

/* Activated state */
.hero.is-loaded .hero-slide {
  animation: slideZoomFade 9s infinite; /* Revert to 9s cycle */
}

.hero.is-loaded .slide-1 {
  animation-delay: 0s;
}
.hero.is-loaded .slide-2 {
  animation-delay: 3s;
}
.hero.is-loaded .slide-3 {
  animation-delay: 6s;
}

@keyframes slideZoomFade {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  15% {
    /* Fade in over ~1.35s */
    opacity: 1;
  }
  33.33% {
    /* Maintain visibility until next slide starts */
    opacity: 1;
  }
  48.33% {
    /* Crossfade out over ~1.35s while next slide fades in */
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.15); /* Slow zoom */
  }
}

/* Thin dark overlay as requested */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* 0.25 - 0.40 range */
  z-index: 1;
}

.hero-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Left Content */
.hero-content {
  position: absolute;
  /* top: 50%; */
  top: 70%;
  transform: translateY(-50%);
  left: 8vw;
  max-width: 800px;
  text-align: left;
}

/* Removed hero-label and hero-desc styles as elements are deleted */

.hero-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 5rem; /* Increased PC size */
  line-height: 1.4; /* Increased line-height */
  margin-bottom: 10px; /* Changed to 10px */
  letter-spacing: 0.1em; /* Increased letter-spacing */
  feature-settings: "palt";
}

/* Subtitle Group */
.hero-subtitle-group {
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0; /* Initially hidden for animation */
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 2.2s; /* Slightly after title */
}

.subtitle-line {
  width: 60px;
  height: 1px;
  background-color: var(--color-white);
  display: block;
}

.subtitle-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-style: normal; /* Changed from italic to normal */
  font-size: 1rem;
  letter-spacing: 0.1em;
}

/* Hero Title Animation */
.hero-title {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 2s; /* Loading (1.5s) + fadeout (0.5s) = 2.0s start */
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Right Pager */
.hero-pager {
  position: absolute;
  right: 4vw; /* 3-5vw from right */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
}

.pager-item {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.pager-item:hover,
.pager-item.active {
  opacity: 1;
}

.pager-num {
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
  position: relative;
  z-index: 2;
}

/* Active red circle outline */
.pager-item.active .pager-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-red);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Giant Outline Text Decoration */
.hero-giant-text {
  display: none;
  position: absolute;
  top: 76%; /* Changed from 72% to 76% */
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.scrolling-wrapper {
  display: flex;
  width: max-content;
  animation: scroll-text 40s linear infinite;
}

.scrolling-item {
  font-family: var(--font-en);
  font-weight: 600; /* Changed from 900 to 600 */
  font-size: clamp(
    5rem,
    12vw,
    9.375rem
  ); /* Increased size again slightly as per image ref, but outline style */
  line-height: 0.8;
  white-space: nowrap;

  /* Outline effect */
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  text-stroke: 1px rgba(255, 255, 255, 0.35);

  padding-right: 0.5em;
}

@keyframes scroll-text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  } /* 4 items -> move 25% for seamless loop */
}

/* Hero News Widget */
.hero-news {
  position: absolute;
  bottom: 20px; /* Changed to 20px */
  right: 4vw; /* Moved further right */
  width: 380px;
  color: var(--color-white); /* Reverted to white text */
  z-index: 10;
  text-align: left;
}

.news-border {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 15px;
}

.news-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  opacity: 0.9;
}

.news-label {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.news-date {
  font-family: var(--font-en);
  font-weight: 500; /* Added font-weight 500 */
}

.news-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.news-title {
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-triangle {
  width: 0;
  height: 0;
  border-left: 6px solid var(--color-white); /* White triangle */
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.hero-news:hover {
  opacity: 0.8;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 8px; /* Changed to 8px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* Changed to 4px */
  z-index: 10;
  color: var(--color-white);
}

.scroll-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.6rem; /* Changed to 0.6rem */
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  margin-bottom: 10px;
}

.scroll-arrows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-white); /* Downward triangle */
  opacity: 0.6;
  animation: scroll-fade 1.5s infinite;
}

.arrow:nth-child(1) {
  animation-delay: 0s;
}
.arrow:nth-child(2) {
  animation-delay: 0.15s;
}
.arrow:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes scroll-fade {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================================================
   Mobile Menu Overlay
   ========================================================================== */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-black);
  z-index: 999;
  padding: 100px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--easing);
}

.mobile-menu-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}

.mobile-nav-list a {
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-block;
}

.mobile-nav-list .mobile-cta-link {
  color: var(--color-red);
  margin-top: 20px;
}

/* ==========================================================================
   Restored Sections (Strength, Partners, etc.)
   ========================================================================== */

.information {
  background-color: #ffffff;
  padding: 150px 0;
}

/* Info Section New Layout */
.info-layout-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.info-left-col {
  width: 25%;
  flex-shrink: 0;
}

.info-header-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.info-sub-title {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
}

.info-sub-title::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--color-red);
  border-radius: 50%;
}

.info-main-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-black);
  margin-bottom: 15px;
  font-family: var(--font-jp);
}

.info-btn-area {
  margin-top: 60px; /* Space between title and button */
}

/* Right Column */
.info-right-col {
  width: 70%;
  flex: 1;
}

/* Info List New Style */
.info-list {
  border-top: 1px solid #e6e6e6; /* Light gray border */
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
  transition: background-color 0.3s var(--easing);
  text-decoration: none;
}

.info-item:hover {
  background-color: #f9f9f9;
}

.info-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Gap between meta row and title */
}

.info-meta-row {
  display: flex;
  align-items: center;
  gap: 20px; /* Space between NEW, Date, Category */
  flex-wrap: wrap;
}

.info-label {
  background-color: #000000; /* Black */
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px; /* Rounded pill shape as per usual modern design, or adjust to rect */
  letter-spacing: 0.05em;
  line-height: 1;
}

.info-date {
  font-family: var(--font-en);
  font-weight: 500;
  color: #999;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.info-category {
  background-color: #e5e5e5; /* Changed from #F5F5F5 */
  color: #333;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 4px; /* Slightly rounded rect */
  white-space: nowrap;
}

.info-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-black);
  margin: 0;
  padding-right: 20px; /* Ensure text doesn't hit arrow area too close */
}

/* Arrow Icon (Right Center) */
.info-arrow-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px; /* Right pointing triangle */
  border-color: transparent transparent transparent #000000; /* Black */
  margin-left: 20px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .info-layout-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .info-left-col {
    width: 100%;
  }

  .info-right-col {
    width: 100%;
  }

  .info-btn-area {
    margin-top: 30px;
    width: 100%;
  }

  .info-btn-area .btn-read-more {
    width: 100%;
  }

  .info-meta-row {
    gap: 15px;
  }
}

/* Concept (Redesigned) */
.concept {
  background-color: var(--color-white);
  padding: 100px 0;
  position: relative; /* For watermark positioning */
  overflow: hidden;
}

.concept-watermark {
  position: absolute;
  top: 15%; /* Position behind the header */
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14vw; /* Changed from 15vw */
  color: #f5f5f5; /* Very light gray */
  opacity: 0.7; /* Added opacity 0.7 */
  z-index: 0;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
}

.concept-content {
  position: relative;
  width: 100%;
  min-height: 500px;
  z-index: 1; /* Ensure content is above watermark */
}

.concept-header {
  margin-bottom: 30px;
}

.concept-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 15px; /* Added margin */
}

@media (min-width: 1024px) {
  .concept-watermark {
    font-size: 12.5rem;
  }

  .concept-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .concept-header {
    width: 50%;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .concept-body-text {
    width: 70%;
    margin: 0 auto;
    padding-top: 27px;
    max-width: 600px;
  }
}

/* Reveal Animation Style */
.reveal-cover {
  position: relative;
  color: transparent; /* Hide text initially */
  width: fit-content; /* Match width to text */
  overflow: hidden;
}

.reveal-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-black);
  transform: skewX(
    -15deg
  ); /* Optional: Slanted edge for style, or remove for straight */
  transform-origin: left;
  z-index: 2;
}

/* Animation when visible */
.reveal-cover.is-visible {
  animation: revealTextDelay 0.1s linear 0.8s forwards; /* Reveal text slightly later */
}

.reveal-cover.is-visible::after {
  animation: coverSlide 1.6s linear forwards; /* Changed back to 1.6s */
}

@keyframes coverSlide {
  0% {
    width: 0;
    left: 0;
    animation-timing-function: cubic-bezier(
      0.55,
      0.055,
      0.675,
      0.19
    ); /* ease-in: Accelerate into full width */
  }
  50% {
    width: 120%;
    left: -10%;
    animation-timing-function: cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    ); /* ease-out: Decelerate out of full width */
  }
  100% {
    width: 0;
    left: 110%;
  }
}

@keyframes revealTextDelay {
  to {
    color: var(--color-black);
  }
}

.concept-main-copy {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 2.5rem; /* Changed from 3rem */
  line-height: 1.7; /* Changed from 1.4 */
  margin-bottom: 20px;
  letter-spacing: 0.08em; /* Changed from 0.05em */
  feature-settings: "palt";
}

.concept-sub-copy {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700; /* Bold */
  letter-spacing: 0.05em;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 15px;
}

.concept-sub-copy::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: #e9464d; /* Red dot */
  border-radius: 50%;
}

.concept-body-text {
  max-width: 700px;
  margin-left: auto; /* Push to right */
  text-align: left;
  font-size: 1rem;
  line-height: 2.2;
  color: var(--color-black);
  padding-top: 27px;
}

.concept-body-text p:not(.concept-main-copy) {
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
  font-weight: 500;
}

.block-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-black);
  letter-spacing: 0.02em;
}

.card-desc {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}

.recruit-desc-text {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
  color: var(--color-black);
  letter-spacing: 0.02em;
  font-weight: 500;
}

.info-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-black);
  margin: 0;
  padding-right: 20px; /* Ensure text doesn't hit arrow area too close */
  letter-spacing: 0.02em;
}

.btn-read-more {
  display: inline-flex; /* Changed to flex for icon alignment */
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 40px; /* Adjusted padding */
  border: 1px solid var(--color-red);
  color: var(--color-white);
  background-color: var(--color-red);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 20px;
  width: 240px; /* Fixed width for consistent look */
  transition: all 0.3s var(--easing);
  border-radius: 50px; /* Added border-radius */
}

.btn-icon {
  display: flex;
  align-items: center;
  height: 100%;
}

.btn-line {
  display: block;
  width: 1px;
  height: 20px;
  background-color: currentColor; /* Matches text color */
  margin: 0 15px;
}

.btn-triangle {
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor; /* Matches text color */
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.btn-read-more:hover {
  background-color: var(--color-white); /* Changed to Red */
  color: var(--color-red);
  border-color: var(--color-red);
}

/* Strength (Restored) */
.strength {
  position: relative;
  overflow: hidden;
}

.watermark-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 15vw;
  color: #f0f0f0;
  z-index: -1;
  white-space: nowrap;
  opacity: 0.5;
}

.strength-visual {
  position: relative;
  margin-top: 50px;
}

.strength-visual img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}

.strength-card {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 50px;
  max-width: 500px;
  position: relative;
  margin-top: -100px;
  margin-left: auto;
  margin-right: 5%;
  z-index: 2;
}

@media (min-width: 768px) {
  .strength-card {
    position: absolute;
    bottom: -50px;
    right: 50px;
    margin: 0;
  }
}

.strength-title {
  font-size: 2rem;
  margin: 20px 0;
  font-weight: 700;
}

.strength-desc {
  margin-bottom: 30px;
  color: #ccc;
}

/* ==========================================================================
   Service Section (Circle Nav Redesign)
   ========================================================================== */
.service-scroll-section {
  padding: 100px 0;
  background-color: #ffffff;
  position: relative;
}

.service-scroll-container {
  display: flex;
  flex-direction: column; /* SP: Column */
  gap: 60px;
}

/* Sidebar (Common/SP) */
.service-sticky-sidebar {
  width: 100%;
}

.service-titles {
  margin-bottom: 20px;
}

.service-title-jp {
  font-size: 1.75rem; /* SP size */
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-black);
}

.service-title-sub-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-title-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  border-radius: 50%;
  display: inline-block;
}

.service-title-sub {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--color-black);
}

.service-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-black);
}

/* Circle Navigation (PC/SP) */
.service-circle-nav {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.nav-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s;
}

.nav-item:hover {
  transform: scale(1.05);
}

.nav-item .circle {
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fff;
  transition: all 0.3s;
}

.nav-item .circle span {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: #999;
}

.nav-item.is-active .circle {
  border-color: var(--color-black);
  background-color: var(--color-black);
}

.nav-item.is-active .circle span {
  color: #fff;
}

/* Main Content (Common/SP) */
.service-main-content {
  width: 100%;
}

.service-contents-wrapper {
  /* Container for blocks */
}

/* Content Block */
.service-content-block {
  margin-bottom: 80px;
  padding-top: 20px; /* Space for anchor */
}

.block-header {
  margin-bottom: 20px;
}

.block-sub-title {
  font-family: var(--font-en);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-red);
  display: block;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
}

.block-main-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-black);
  feature-settings: "palt";
}

.block-divider {
  width: 100%;
  height: 1px;
  background-color: #e6e6e6;
  margin-bottom: 30px;
}

.block-body {
  display: flex;
  flex-direction: column; /* SP: Stack */
  gap: 30px;
}

.block-text-col {
  order: 2;
}

.block-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-black);
}

.block-img-col {
  order: 1;
  width: 100%;
}

.block-img-col img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Button View More */
.btn-view-more {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 40px;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  background-color: var(--color-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  width: 240px;
  border-radius: 0;
  transition: all 0.3s var(--easing);
}

.btn-view-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

.btn-view-more .btn-line {
  background-color: currentColor;
}

.btn-view-more .btn-triangle {
  border-left-color: currentColor;
}

/* ==========================================================================
   Recruit Section (Redesigned with Vertical Scroll)
   ========================================================================== */
.recruit-new-section {
  background-color: #ffffff; /* Changed to White */
  padding: 0;
  overflow: hidden;
}

.recruit-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  display: flex;
  align-items: stretch; /* Center vertically -> stretch for full height */
  gap: 60px; /* Space between visual and text */
}

/* Left: Visual (Scrolling Columns) */
.recruit-visual {
  width: 50%;
  height: 120vh;
  display: flex;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.scroll-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.recruit-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.recruit-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* Animation for left column: scroll up */
.col-left {
  animation: scrollUp 30s linear infinite;
}

/* Animation for right column: scroll down */
.col-right {
  animation: scrollDown 30s linear infinite;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Right: Text Content */
.recruit-text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-black); /* Text black */
}

.recruit-main-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 15px;
  color: var(--color-black);
}

.recruit-catch-copy {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--color-black);
}

.recruit-sub-title {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 30px;
  text-transform: uppercase;
}

.recruit-sub-title::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--color-red);
  border-radius: 50%;
}

.recruit-desc-text {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
  color: var(--color-black);
}

.btn-recruit-main {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white); /* Default White */
  color: var(--color-red); /* Red Text */
  border: 1px solid var(--color-gray); /* Subtle border */
  padding: 15px 30px;
  border-radius: 50px; /* Capsule */
  font-weight: 700;
  min-width: 280px;
  transition: all 0.3s var(--easing);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Instruction says: "Button uses main red color" */
/* Design image shows white button on orange bg. */
/* User instruction: "Background white, Text black base. (Button uses main red)" */
/* So Button should be RED background, WHITE text? Or RED text? */
/* "ボタンは使っているメインの赤色" usually implies Red Background. */
/* Let's go with Red Background, White Text. */

.btn-recruit-main {
  background-color: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-red);
}

.btn-recruit-main:hover {
  background-color: var(--color-white);
  color: var(--color-red);
  border-color: var(--color-red);
}

.btn-recruit-main span {
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.btn-recruit-main i {
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .recruit-container {
    flex-direction: column-reverse; /* Visual on bottom? Or Top? */
    /* Design usually has Visual first or Stacked. */
    /* Let's put text on top for mobile readability, or visual first to grab attention. */
    /* User's prev recruit section had stacked. */
    flex-direction: column;
    gap: 40px;
  }

  .recruit-text-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .recruit-main-title {
    font-size: 3rem;
  }

  .recruit-desc-text {
    text-align: left; /* Keep body text left aligned for readability or center? */
    /* Let's align center for consistency with titles if centered */
    text-align: center;
  }
}

/* ==========================================================================
   Split CTA Section (New Design)
   ========================================================================== */
.split-cta-section {
  display: flex;
  width: 100%;
  height: 450px; /* Adjust height as needed */
  overflow: hidden;
}

.cta-col {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  color: #ffffff;
}

.cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--easing);
  z-index: 0;
}

.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Darken overlay */
  transition: background-color 0.3s;
  z-index: 1;
}

.cta-col:hover .cta-bg {
  transform: scale(1.05);
}

.cta-col:hover .cta-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Slightly darker on hover */
}

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-sub {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.cta-main {
  font-family: var(--font-en);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* Ghost Button (Left) */
.btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px; /* Changed from 200px */
  padding: 0 0 10px 0; /* Changed padding */
  border: none;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
  color: #ffffff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.2rem;
  transition: opacity 0.3s var(--easing);
  gap: 10px;
}

.btn-cta-ghost .btn-line {
  display: none;
}

.cta-col:hover .btn-cta-ghost {
  background-color: transparent;
  color: #ffffff;
  opacity: 0.7;
}

/* Solid Button (Right) */
.btn-cta-solid {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 240px; /* Changed from 200px */
  padding: 12px 20px 12px 40px; /* Changed padding */
  background-color: #ffffff;
  color: var(--color-black);
  border: 1px solid #ffffff; /* Match bg */
  border-radius: 50px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s var(--easing);
}

.cta-col:hover .btn-cta-solid {
  background-color: var(--color-black); /* Dark on hover? Or inverse? */
  color: #ffffff;
  border-color: var(--color-black);
}

/* Responsive */
.btn-cta-ghost .btn-line,
.btn-cta-solid .btn-line {
  background-color: currentColor;
}

.btn-cta-ghost .btn-triangle,
.btn-cta-solid .btn-triangle {
  background-color: transparent;
  border-left-color: currentColor;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  border-right: 0;
}

@media (max-width: 768px) {
  .split-cta-section {
    flex-direction: column;
    height: auto;
  }

  .cta-col {
    width: 100%;
    height: 300px; /* Stacked height */
  }
}

/* Footer */
.footer {
  background-color: #ffffff;
  color: var(--color-black);
  padding: 80px 0 30px;
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-info {
  width: 100%;
  max-width: 300px;
}

.footer-logo img {
  height: 40px;
  width: auto;
  margin-bottom: 20px;
}

.footer-company-name {
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-address {
  margin-bottom: 15px;
  line-height: 1.6;
}

.footer-map-link {
  display: inline-block;
  color: var(--color-black);
  text-decoration: underline;
  font-size: 0.85rem;
}

.footer-sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.sitemap-col {
  min-width: 140px;
}

.sitemap-head {
  display: block;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 15px;
  text-decoration: none;
}

.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 15px;
}

.sitemap-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; /* Adjust based on font size */
  width: 6px;
  height: 6px;
  background-color: var(--color-red);
  border-radius: 50%;
}

.sitemap-list li a {
  color: var(--color-black);
  text-decoration: none;
  font-size: 0.85rem;
  transition: opacity 0.3s;
}

.sitemap-list li a:hover {
  opacity: 0.7;
}

.footer-bottom-row {
  border-top: 1px solid #e6e6e6;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright {
  font-size: 0.75rem;
  color: #999;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom-links li a {
  font-size: 0.75rem;
  color: var(--color-black);
  text-decoration: none;
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 60px;
  }

  .footer-sitemap {
    flex-direction: column;
    gap: 30px;
  }

  .footer-bottom-row {
    flex-direction: column-reverse;
    text-align: center;
    gap: 15px;
  }

  .footer-bottom-links {
    justify-content: center;
  }
}

/* Animation Utils */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s var(--easing);
}
.fade-left {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s var(--easing);
}
.is-visible {
  opacity: 1;
  transform: translateY(0);
  transform: translateX(0);
}
.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}

/* ==========================================================================
   Concept Section Line Height Adjustment
   ========================================================================== */
#concept p {
  line-height: 1.8;
}

/* Exclude p tags inside .concept-body-text (Maintain existing styles) */
#concept .concept-body-text p {
  line-height: inherit;
}

/* ==========================================================================
   Button Style Updates (Red Text / White Bg)
   ========================================================================== */

/* Common base for About, Service, Recruit, News buttons */
.btn-read-more,
.btn-service-all,
.btn-recruit-main {
  background-color: var(--color-white);
  color: var(--color-red);
  border: 1px solid var(--color-red);
  transition: all 0.3s var(--easing);
}

/* News section View All button - transparent background */
.info-btn-area .btn-read-more {
  background-color: transparent;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  transition: all 0.3s var(--easing);
}

/* Hover state for all target buttons */
.btn-read-more:hover,
.btn-service-all:hover,
.btn-recruit-main:hover,
.info-btn-area .btn-read-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

/* Specific icon adjustments if needed (SVG/Icon colors usually inherit 'color') */
/* Lines (Need background color) */
.btn-read-more .btn-line,
.btn-service-all .btn-line,
.info-btn-area .btn-read-more .btn-line,
.btn-view-more .btn-line {
  background-color: currentColor; /* Matches text color */
}

/* Triangles (Need border color, no background to stay triangle) */
.btn-read-more .btn-triangle,
.btn-service-all .btn-triangle,
.info-btn-area .btn-read-more .btn-triangle,
.btn-view-more .btn-triangle {
  background-color: transparent;
  border-left-color: currentColor; /* For triangle borders */
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  border-right: 0;
}

/* Ensure recruit button arrow matches text color */
.btn-recruit-main i {
  color: inherit;
}

/* ==========================================================================
   Business Section (Kooge Style Redesign)
   ========================================================================== */
.business-kooge-section {
  background-color: #ffffff; /* Changed to White */
  padding: 0 0 100px 0;
  position: relative;
}

.business-container {
  position: relative;
}

.business-sticky-header {
  display: none;
}

/* Left: Sticky Visual Area (PC: Sticky, SP: Hidden or Stacked) */
.business-visual-sticky {
  display: none; /* SP: Hide sticky visual */
}

/* Right: Scroll Content Area */
.business-content-scroll {
  width: 100%;
}

/* Business Card */
.business-card {
  background-color: transparent;
  padding: 60px 0;
  border-top: 1px solid #ccc;
  position: relative;
  margin-bottom: 0;
}

.business-card-image {
  display: none;
}

.business-card:first-child {
  border-top: none;
}

.business-card:nth-child(2),
.business-card:nth-child(3) {
  border-top: none;
}

.business-card:last-child {
  border-bottom: 1px solid #ccc;
}

/* Card Header */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.card-category {
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 700;
  color: #e9464d; /* Blue color -> Red */
  letter-spacing: 0.05em;
  text-transform: capitalize;
}

/* Titles & Text */
.card-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.card-lead {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

.card-desc {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
}

/* Restored Pill Button */
.btn-business-pill {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  text-decoration: none;
  color: var(--color-black);
  font-weight: 700;
  transition: opacity 0.3s var(--easing);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.btn-business-pill:hover {
  opacity: 0.7;
}

.btn-business-pill .icon-arrow {
  width: 60px;
  height: 36px;
  background-color: #333; /* Dark gray */
  border-radius: 30px; /* Fully rounded pill */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
}

/* Sub Links */
.business-sub-links {
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid #e6e6e6;
}

.sub-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
  border-bottom: 1px solid #e6e6e6;
  text-decoration: none;
  transition: background-color 0.3s var(--easing);
}

.sub-link-item:hover {
  background-color: #fafafa;
}

.sub-link-text {
  flex: 1;
}

.sub-link-title {
  font-size: 1.75rem; /* Large Title */
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--color-black);
}

.sub-link-desc {
  font-size: 1rem;
  color: var(--color-black);
  font-weight: 500;
}

.sub-link-icon {
  width: auto;
  height: auto;
  background-color: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black); /* Black arrow */
  margin-left: 30px;
  flex-shrink: 0;
  transition: transform 0.3s var(--easing);
}

.sub-link-icon img {
  width: 14px;
  height: auto;
  display: block;
}

.sub-link-item:hover .sub-link-icon {
  transform: translateX(5px);
}

/* ==========================================================================
   PC View Customization
   ========================================================================== */
@media (min-width: 1024px) {
  .container {
    max-width: 100%;
    padding-left: 8.3333333333vw;
    padding-right: 8.3333333333vw;
  }

  /* About Us Height 100vh for PC -> Removed, padding added */
  #concept {
    height: auto;
    min-height: auto;
    padding: 100px 0;
    display: block;
  }

  #concept .container {
    width: 100%;
    max-width: 100%;
    padding-left: 8.3333333333vw;
    padding-right: 8.3333333333vw;
  }

  /* Business Section Padding for PC */
  .business-kooge-section {
    padding: 0 0 100px 0;
  }

  /* Content Width 100% & Padding Override for Sections other than Hero & About Us */

  /* Business / Service Section */
  #business .container {
    max-width: 100%;
    padding-left: 8.3333333333vw;
    padding-right: 8.3333333333vw;
    display: flex;
  }

  /* Recruit Section */
  .recruit-container {
    max-width: 100%;
    padding-left: 8.3333333333vw;
    padding-right: 8.3333333333vw;
  }

  /* Information Section */
  .information {
    padding: 150px 0;
  }

  .information .container {
    max-width: 100%;
    padding-left: 8.3333333333vw;
    padding-right: 8.3333333333vw;
  }

  /* Contact / CTA Section */
  .split-cta-section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Footer */
  .footer .container {
    max-width: 100%;
    padding-left: 8.3333333333vw;
    padding-right: 8.3333333333vw;
  }

  /* Service Scroll Section PC */
  .service-scroll-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }

  /* Left Sidebar Sticky */
  .service-sticky-sidebar {
    width: 33%;
    position: sticky;
    top: 100px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding-right: 40px;
  }

  .service-sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .service-circle-nav {
    margin-top: auto;
    position: relative;
    height: 280px;
    width: 100%;
    max-width: 300px;
  }

  .nav-item {
    position: absolute;
  }

  .nav-item:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .nav-item:nth-child(1):hover {
    transform: translateX(-50%) scale(1.05);
  }

  .nav-item:nth-child(2) {
    bottom: 0;
    left: 0;
  }

  .nav-item:nth-child(3) {
    bottom: 0;
    right: 0;
  }

  .service-title-jp {
    font-size: 2.25rem;
  }

  /* Right Main Content */
  .service-main-content {
    width: 60%;
    display: block;
    margin-left: auto;
    padding-top: 0;
  }

  /* Content Block PC */
  .service-content-block {
    min-height: 80vh;
    margin-bottom: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .block-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }

  .block-text-col {
    width: 40%;
    order: 1;
    padding-top: 20px;
  }

  .block-img-col {
    width: 60%;
    order: 2;
  }

  /* ==========================================================================
       Business Section PC (Kooge Style)
       ========================================================================== */
  .business-kooge-section .business-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Restored for custom height control */
    margin-top: 50px;
  }

  /* Left Sticky Visual */
  .business-visual-sticky {
    display: block;
    width: 40%;
    height: auto;
    align-self: flex-start;
  }

  .business-sticky-header {
    display: block;
    /* position: absolute; Removed */
    /* top: 0; Removed */
    /* left: 0; Removed */
    width: 40%; /* Matches left column width ratio */
    /* z-index: 5; Removed */
    margin-bottom: 0;
    /* Note: Parent container padding handles horizontal offset */
  }

  /* .header-label moved to global */

  /* .label-dot moved to global */

  /* .label-text moved to global */

  .header-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 30px;
  }

  .header-desc {
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 700;
  }

  .business-img-group {
    position: sticky; /* Sticky */
    top: 100px; /* Sticky top */
    width: 100%;
    height: 600px; /* Increased from 400px */
    margin-top: 0; /* Changed from 280px */
  }

  .business-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .business-img-wrapper.is-active {
    opacity: 1;
    z-index: 2;
  }

  .business-img {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px;
  }

  .business-img img {
    width: 100%;
    height: 100%; /* Changed from auto */
    display: block;
    object-fit: cover;
  }

  .business-img-caption {
    text-align: left;
    width: 100%;
  }

  .caption-title {
    color: var(--color-black);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 5px;
  }

  .caption-sub {
    font-size: 0.8rem;
    color: #999;
    font-family: var(--font-en);
    letter-spacing: 0.05em;
    text-transform: capitalize;
  }

  /* Right Scroll Content */
  .business-content-scroll {
    width: 54%;
    padding-bottom: 0;
    margin-left: auto;
    padding-top: 0; /* Changed from 180px */
  }

  /* Business Section Left Image Mask */
  /* Mask Removed as requested */
  .business-img-wrapper::after {
    content: none; /* Remove content to disable mask */
  }

  .business-img {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden; /* Added overflow hidden for border-radius */
  }

  /* Card padding adjustments */
  .business-card {
    padding: 50px 0; /* Default: padding top and bottom */
  }

  .business-card:first-child {
    padding-top: 0; /* First card: no top padding */
    border-top: none;
  }

  /* Remove bottom border from last child if it exists from base styles */
  .business-card:last-child {
    border-bottom: none;
  }

  .sub-link-title {
    font-size: 1.4rem;
  }

  /* Override Header Sizes for PC */
  .concept-header h2 {
    font-size: 3rem;
    letter-spacing: 0.05em;
    line-height: 1.7;
    white-space: nowrap; /* Prevent line break */
  }

  .header-title,
  .recruit-main-title,
  .info-main-title {
    font-size: 3rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }

  .header-desc {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    white-space: nowrap; /* Prevent line break on PC */
  }

  .concept-body-text p:not(.concept-main-copy) {
    font-size: 1.4rem;
  }

  .intro-section .intro-header .intro-title {
    margin-bottom: 60px;
  }

  .intro-section .intro-header .intro-desc {
    font-size: 1.2rem;
    line-height: 2.3;
  }
}

/* Global Header Label Style */
.header-label,
.common-header-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.label-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  border-radius: 50%;
  display: inline-block;
}

.label-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--color-black); /* Ensure color is set */
  text-transform: capitalize; /* Ensure Title Case */
}

/* ==========================================================================
   Business Page Styles
   ========================================================================== */
.page-title-section {
  height: 60vh;
  min-height: 400px;
  background-image: url("../images/business_hero.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-title-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Circular Diagram Styles */
.circle-diagram-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 60px 0;
}

.circle-item {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid #e9464d;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e9464d;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.circle-item:hover {
  background-color: #e9464d;
  color: #fff;
}

.circle-item h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.circle-item p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Positioning logic for circles */
.circle-left {
  z-index: 1;
}
.circle-center {
  z-index: 2;
}
.circle-right {
  z-index: 1;
}

@media (max-width: 768px) {
  .circle-diagram-wrapper {
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
    gap: 20px;
    padding: 40px 0;
  }
  .circle-diagram-wrapper .circle-item {
    position: relative;
    width: 280px;
    height: 280px;
    left: auto;
    right: auto;
    transform: none;
  }
  .circle-item:hover {
    background-color: transparent;
    color: #e9464d;
  }
}

/* Business Block Styles matching SmartBank ref */
.biz-detail-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 24px;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.biz-detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Business Page Styles (Refined - Tailwind Replacement)
   ========================================================================== */

/* Page Title Wrapper */
.page-title-section-wrapper {
  padding-top: 130px;
  padding-bottom: 0;
  background-color: var(--color-white);
}

.page-title-header {
  margin-bottom: 30px;
  text-align: left;
}

.page-title-sub {
  display: block;
  color: var(--color-red);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
}

.page-title-main {
  color: var(--color-black);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.page-title-image-wrapper {
  width: 100%;
  margin-bottom: 0;
}

.page-title-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  aspect-ratio: 21 / 9;
}

/* Page Nav Section */
.page-nav-section {
  background-color: #ffffff;
}

/* Page Nav */
.page-nav-wrapper {
  border-bottom: none;
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

.page-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.page-nav-link {
  display: flex;
  align-items: center;
  padding: 16px 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.page-nav-link:hover {
  opacity: 0.7;
}

.page-nav-link.has-border {
  border-left: none;
  padding-left: 16px;
}

.page-nav-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 0.875rem;
  margin-right: 8px;
  color: var(--color-black);
}

.page-nav-icon {
  color: var(--color-red);
  font-size: 0.75rem;
}

/* Intro Section */
.intro-section {
  padding: 80px 0;
  background-color: var(--color-white);
}

.intro-header {
  text-align: center;
  max-width: 768px;
  margin: 0 auto 60px;
}

.intro-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  font-family: var(--font-jp);
  line-height: 1.7;
}

.intro-desc {
  font-size: 1rem;
  line-height: 2;
  font-family: var(--font-jp);
  color: #374151;
  font-weight: 500;
}

.pc-br {
  display: none;
}

/* Circle Diagram Adjustments */
.circle-sub {
  font-size: 0.875rem;
  font-family: var(--font-en);
  margin-bottom: 8px;
  opacity: 0.8;
}

.circle-desc {
  font-size: 0.75rem;
  margin-top: 8px;
  padding: 0 16px;
}

/* Business Details Section */
.business-details-section {
  padding: 80px 0;
  background-color: #f5f5f5;
}

.business-block {
  margin-bottom: 120px;
}

.business-block:last-child {
  margin-bottom: 40px;
}

.business-block-header {
  margin-bottom: 60px;
}

.business-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

/* スマホ版 - 事業見出しの英語部分のmargin調整 */
@media (max-width: 768px) {
  .business-label {
    margin-bottom: 0;
  }
}

.business-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-red);
}

.business-label-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--color-black);
}

.business-block-title {
  font-size: 2.25rem;
  font-weight: 700;
  font-family: var(--font-jp);
  margin-bottom: 40px;
  color: var(--color-black);
}

.business-block-lead {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 24px;
  line-height: 1.6;
}

.business-block-desc {
  font-size: 1rem;
  color: #374151;
  line-height: 2;
}

.business-block-body {
  padding-bottom: 48px;
}

.business-detail-row {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 80px;
}

.business-detail-col {
  width: 100%;
}

.business-detail-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.business-detail-header {
  margin-bottom: 24px;
}

.business-detail-sub {
  display: block;
  color: var(--color-red);
  font-weight: 700;
  font-family: var(--font-en);
  font-size: 0.875rem;
  margin-bottom: 0;
}

.business-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-black);
}

.business-detail-text {
  color: #4b5563;
  line-height: 2;
  text-align: justify;
  letter-spacing: 0.025em;
}

/* Strength Section */
.strength-section {
  margin-top: 80px;
}

.strength-header {
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 30px;
}

.strength-title-jp {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-black);
  font-family: var(--font-jp);
}

.strength-title-en {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-red);
  font-family: var(--font-en);
}

.strength-list {
  width: 100%;
  border-top: 1px solid #e1e1e1;
}

.strength-item {
  padding: 32px 0;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.strength-item-head {
  width: 100%;
  flex-shrink: 0;
}

.strength-item-title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 12px;
}

.strength-num {
  font-size: 1.5rem;
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--color-black);
  flex-shrink: 0;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strength-item-body {
  width: 100%;
}

.strength-item-desc {
  font-size: 1rem;
  color: var(--color-black);
  line-height: 1.8;
}

/* ==========================================================================
   Recruit Page Styles
   ========================================================================== */

/* Common Section Headers */
.section-header-center {
  text-align: center;
  margin-bottom: 60px;
}

.section-header-left {
  text-align: left;
  margin-bottom: 60px;
}

.section-title-jp {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 10px;
  font-family: var(--font-jp);
}

.section-title-en {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-red);
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.section-lead {
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 20px;
  color: #333;
}

/* Message Section */
.recruit-message-section {
  padding: 100px 0;
  background-color: var(--color-white);
}

.recruit-message-grid {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.recruit-message-item {
  text-align: center;
  padding: 0 20px;
}

.message-copy-en {
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.message-copy-jp {
  font-size: 1.125rem;
  font-weight: 700;
  color: #666;
  margin-bottom: 24px;
}

.message-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  text-align: justify;
}

/* Positions Section */
.recruit-positions-section {
  padding: 100px 0;
  background-color: #f5f5f5;
}

.positions-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.position-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.position-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.position-card-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.position-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.position-card:hover .position-card-image img {
  transform: scale(1.05);
}

.position-card-content {
  padding: 24px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.position-business-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #666;
  margin-bottom: 8px;
}

.position-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
  color: var(--color-black);
}

.position-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.position-tag {
  font-size: 0.75rem;
  background-color: #f0f0f0;
  color: #333;
  padding: 4px 10px;
  border-radius: 4px;
}

.position-arrow {
  margin-top: auto;
  align-self: flex-end;
  color: var(--color-red);
  font-size: 1rem;
}

/* Process Section */
.recruit-process-section {
  padding: 100px 0;
  background-color: var(--color-white);
}

.process-list {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}

.process-item {
  display: flex;
  gap: 30px;
  padding-bottom: 50px;
  position: relative;
}

.process-item::before {
  content: "";
  position: absolute;
  left: 30px; /* Center of circle (60px width) */
  top: 60px;
  bottom: 0;
  width: 1px;
  background-color: #e1e1e1;
  transform: translateX(-50%);
}

.process-item:last-child {
  padding-bottom: 0;
}

.process-item:last-child::before {
  display: none;
}

.process-step {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-red);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.process-step.step-final {
  background-color: var(--color-black);
}

.step-label {
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
}

.step-num {
  font-family: var(--font-en);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.process-content {
  flex: 1;
  padding-top: 10px;
}

.process-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-black);
}

.process-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
}

/* FAQ Section */
.recruit-faq-section {
  padding: 100px 0;
  background-color: #f5f5f5; /* Changed to match image */
}

.faq-list {
  max-width: 900px; /* Widened slightly */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap, use border */
}

.faq-item {
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  border-bottom: 1px solid #e0e0e0;
  padding: 30px 0;
  transition: all 0.3s;
}

.faq-item:first-child {
  border-top: 1px solid #e0e0e0; /* Optional: Top border for first item */
}

.faq-item.active .faq-answer {
  display: flex;
  border-top: none;
}

/* Remove rotation logic as toggle is hidden */
.faq-item.active .faq-toggle i {
  transform: none;
}

.faq-question {
  padding: 0;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
}

.faq-q-mark {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-right: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  box-shadow: none;
}

.faq-question h3 {
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
  margin: 0;
  line-height: 1.6;
  padding-top: 8px; /* Align with icon text */
}

.faq-toggle {
  display: none; /* Hide toggle icon */
}

.faq-answer {
  display: flex;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  background-color: transparent;
  align-items: flex-start;
  transition:
    max-height 0.4s ease-in-out,
    margin-top 0.4s ease-in-out;
  margin-top: 0;
}

.faq-a-mark {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-right: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.faq-answer p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0;
  color: #333;
  padding-top: 8px; /* Align with icon text */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FAQ is-open state - smooth height animation */
.faq-item.is-open .faq-answer {
  max-height: 500px;
  margin-top: 24px;
}

/* Recruit External Link (Blog style) */
.recruit-external-link-wrapper {
  margin-top: 80px;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.recruit-external-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
  text-decoration: none;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.recruit-external-link:hover {
  opacity: 0.7;
}

.external-link-content {
  flex: 1;
  padding-right: 20px;
}

.external-link-title {
  font-family: var(--font-jp);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 10px;
  line-height: 1.4;
}

.external-link-desc {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
}

.external-link-icon {
  width: 60px;
  height: 60px;
  background-color: var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.recruit-external-link:hover .external-link-icon {
  transform: scale(1.05);
}

/* Construction Block Full Width Background - Refined Structure */
#construction {
  background-color: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-bottom: 80px;
  position: relative;
}

/* Layout Adjustment for Full Width Backgrounds in Business Section */
.business-details-section .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Apply padding/width to block content directly since inner wrapper doesn't exist */
.business-block-header,
.business-block-body {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4%;
  padding-right: 4%;
}

@media (min-width: 1024px) {
  .business-block-header,
  .business-block-body {
    max-width: 100%;
    padding-left: 8.3333333333vw;
    padding-right: 8.3333333333vw;
  }
}

/* Adjust blocks spacing */
#telecommunication {
  padding-top: 60px;
}

/* ==========================================================================
   Typography Rules Application (Project Wide)
   ========================================================================== */

/* Global Settings */
body {
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  letter-spacing: 0.05em;
  line-height: 1.5;
}

p {
  letter-spacing: 0.02em;
}

/* Headings Overrides */
.page-title-main,
.intro-title,
.business-block-title,
.business-detail-title,
.strength-title-jp,
.strength-item-title,
.section-title-jp,
.position-title,
.process-title,
.faq-question h3,
.external-link-title {
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* Body Text / Descriptions (Allowed range 1.5~1.7) */
.intro-desc,
.business-block-desc,
.business-detail-text,
.strength-item-desc,
.section-lead,
.message-text,
.process-desc,
.faq-answer p,
.external-link-desc {
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.business-block-lead {
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.message-copy-jp {
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Recruit Page Layout Update (PC Adjustments)
   ========================================================================== */

/* Header Label Adjustments for Recruit Page */
.section-header-center .common-header-label {
  justify-content: center;
  margin-bottom: 0;
}

.section-header-left .common-header-label {
  justify-content: flex-start;
  margin-bottom: 0;
}

/* スマホ版 - セクション見出しの英語部分のmargin調整 */
@media (max-width: 768px) {
  .section-header-center .common-header-label,
  .section-header-left .common-header-label {
    margin-bottom: 0;
  }
}

/* External Link Icon Color Change (Red background) */
.recruit-external-link .external-link-icon {
  background-color: var(--color-red);
}

@media (min-width: 768px) {
  /* Match Section Title Font Size with Top Page (Service Section: 3.5rem) */
  .section-title-jp {
    font-size: 3.5rem;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  /* Increase spacing in Message Section for PC */
  .recruit-message-section .section-header-center {
    margin-bottom: 90px; /* 1.5x of original 60px */
  }

  .recruit-message-grid {
    gap: 90px; /* Assuming previous gap was around 60px or similar spacing logic */
  }

  /* External Link Wrapper Spacing & Layout */
  .recruit-external-link-wrapper {
    margin-top: 120px; /* 1.5x of original 80px */
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ensure label dot and text styles are consistent */
.label-dot {
  background-color: var(--color-red);
}
.label-text {
  color: var(--color-black);
}

/* ==========================================================================
   Company Page Styles
   ========================================================================== */

/* CEO Message Section */
.ceo-message-section {
  padding: 100px 0;
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.ceo-message-wrapper {
  position: relative;
  z-index: 1;
  max-width: 800px; /* Limit width for readability and layout matching */
  margin: 0 auto 0 0; /* Align left as per reference layout, within container */
}

/* Watermark Background Text */
.message-watermark {
  position: absolute;
  top: -60px; /* Adjust vertical position */
  left: 0; /* Adjust horizontal position */
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 15rem; /* Huge size */
  color: #f5f5f5; /* Very light gray */
  z-index: -1;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.8;
}

.ceo-message-header {
  margin-bottom: 40px;
}

.ceo-catch-copy {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 40px;
  color: var(--color-black);
  letter-spacing: 0.05em;
  font-family: var(--font-jp);
}

.ceo-body-text p {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 30px;
  color: #333;
  text-align: justify;
}

.ceo-sign {
  margin-top: 40px;
  text-align: right;
  font-size: 1rem;
  line-height: 1.6;
}

.ceo-name {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  margin-top: 5px;
}

/* Company Profile Section */
.company-profile-section {
  padding: 100px 0;
  background-color: #f5f5f5;
}

.profile-table-wrapper {
  width: 100%;
  overflow-x: auto; /* Scroll on mobile if needed */
  -webkit-overflow-scrolling: touch;
}

.profile-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e0e0e0;
  background-color: transparent;
  table-layout: fixed; /* Fixed layout for consistent widths */
}

.profile-table th,
.profile-table td {
  padding: 30px 0;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  vertical-align: top;
}

.profile-table th {
  width: 25%;
  background-color: transparent;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
}

.profile-table td {
  width: 75%;
  color: var(--color-black);
}

/* Company Map */
.company-map-wrapper {
  margin-top: 60px;
}

.company-map-wrapper iframe {
  width: 100%;
  height: 450px;
  border: none;
  background-color: #eee;
}

/* PC Adjustments for Company Page */
@media (min-width: 1024px) {
  .ceo-message-wrapper {
    margin-left: 0;
  }

  .message-watermark {
    left: 0;
    font-size: 11rem;
  }

  .ceo-catch-copy {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Contact Page Styles
   ========================================================================== */

/* Contact Container (Max Width 1000px) */
.contact-form-section .contact-container,
.contact-complete-section .contact-container {
  max-width: 1000px;
  margin: 0 auto;
}

.contact-form-section {
  padding: 100px 0;
  background-color: var(--color-white);
}

.contact-form {
  margin-top: 60px;
}

.form-group {
  margin-bottom: 30px;
}

.form-label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--color-black);
}

.form-tag {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
  font-weight: 500;
  vertical-align: middle;
}

.form-tag.required {
  background-color: var(--color-red);
  color: var(--color-white);
}

.form-tag.optional {
  background-color: #999;
  color: var(--color-white);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px; /* Minimal radius */
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s;
  background-color: #f9f9f9;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-black);
  background-color: var(--color-white);
}

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  pointer-events: none;
}

.form-select {
  appearance: none;
  cursor: pointer;
}

.form-textarea {
  height: 200px;
  resize: vertical;
}

.form-privacy {
  margin: 40px 0;
  text-align: center;
}

.privacy-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.privacy-text a {
  color: var(--color-red);
  text-decoration: underline;
}

.form-submit {
  text-align: center;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  padding: 15px 30px;
  background-color: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s var(--easing);
  letter-spacing: 0.05em;
}

.btn-submit:hover {
  background-color: var(--color-white);
  color: var(--color-red);
}

.btn-submit .btn-line {
  background-color: currentColor;
}

.btn-submit .btn-triangle {
  border-left-color: currentColor;
}

/* ==========================================================================
   Contact Thanks Page Styles
   ========================================================================== */

.contact-complete-section {
  padding: 150px 0;
  background-color: var(--color-white);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.complete-message-wrapper {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.complete-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--color-black);
}

.complete-text {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 20px;
  color: #333;
}

.complete-text-sub {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 60px;
}

.complete-btn-area {
  display: flex;
  justify-content: center;
}

.complete-btn-area .btn-read-more {
  width: 240px;
  /* Ensure button style matches top page */
  background-color: var(--color-white);
  color: var(--color-red);
  border: 1px solid var(--color-red);
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 40px;
  border-radius: 50px;
  font-weight: 700;
  transition: all 0.3s var(--easing);
}

.complete-btn-area .btn-read-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
}

.complete-btn-area .btn-read-more .btn-line {
  background-color: currentColor;
}

.complete-btn-area .btn-read-more .btn-triangle {
  border-left-color: currentColor;
}

/* ==========================================================================
   Privacy Policy Page Styles
   ========================================================================== */

.privacy-policy-section {
  padding: 100px 0;
  background-color: var(--color-white);
}

.privacy-policy-section .privacy-container {
  max-width: 1000px;
  margin: 0 auto;
}

.privacy-policy-wrapper {
  background-color: var(--color-white);
  padding: 0;
  border-radius: 8px;
}

.privacy-block {
  margin-bottom: 40px;
}

.privacy-block:last-child {
  margin-bottom: 0;
}

.privacy-heading h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  color: var(--color-black);
  line-height: 1.5;
}

.privacy-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
  text-align: justify;
}

.privacy-content p a {
  color: var(--color-red);
  text-decoration: underline;
}

.privacy-list {
  padding-left: 0;
  margin-top: 10px;
  list-style: none;
}

.privacy-list li {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 5px;
  padding-left: 1em;
  text-indent: -1em;
}

/* PC Adjustments for Privacy Policy Page */
/* (Moved to responsive.css) */

/* ==========================================================================
   News Page Styles
   ========================================================================== */

.breadcrumb-section {
  padding: 15px 0;
}

.breadcrumb-section-no-title {
  padding: 130px 0 15px;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.8rem;
  color: #666;
}

.breadcrumb-list li:not(:last-child)::after {
  content: ">";
  margin: 0 10px;
  color: #999;
}

.breadcrumb-list a:hover {
  text-decoration: underline;
}

.news-list-section {
  padding: 80px 0 120px;
  background-color: var(--color-white);
}

.news-category-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.category-tab {
  padding: 10px 30px;
  border-radius: 50px;
  border: 1px solid #ddd;
  color: #666;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s var(--easing);
  background-color: var(--color-white);
}

.category-tab:hover,
.category-tab.active {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

/* News List Styling (Specific to News Page) */
.news-page-list .info-item {
  padding: 40px 0; /* More padding for list page */
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 80px;
}

.page-number,
.page-next {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  text-decoration: none;
  color: #666;
  font-family: var(--font-en);
  font-weight: 700;
  transition: all 0.3s;
}

.page-number.current {
  background-color: var(--color-black);
  color: var(--color-white);
}

.page-number:hover:not(.current),
.page-next:hover {
  background-color: #f0f0f0;
}

/* FAQ toggle icon rotation */
.faq-item.is-open .faq-toggle i {
  transform: rotate(45deg);
  transition: transform 0.4s ease-in-out;
}

.faq-toggle i {
  transition: transform 0.4s ease-in-out;
}

/* ==========================================================================
   News Detail Page
   ========================================================================== */

/* Breadcrumb Section */
.breadcrumb-section {
  padding: 30px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: #666;
}

.breadcrumb-item {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb-item:hover {
  color: var(--color-red);
}

.breadcrumb-item.current {
  color: var(--color-black);
  font-weight: 500;
}

.breadcrumb-separator {
  color: #999;
}

/* Article Detail Section */
.article-detail-section {
  padding: 80px 0 120px;
  background-color: #fff;
}

.article-detail {
  max-width: 1000px;
  margin: 0 auto;
}

/* Article Header */
.article-header {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e6e6e6;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.article-date {
  font-family: var(--font-en);
  font-size: 0.9rem;
  color: #666;
  letter-spacing: 0.05em;
}

.article-category {
  display: inline-block;
  background-color: var(--color-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.article-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 0;
}

/* Article Content */
.article-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-black);
  letter-spacing: 0.02em;
}

.article-content p {
  margin-bottom: 1.5em;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.article-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 60px 0 30px;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--color-red);
}

.article-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 50px 0 25px;
  padding-left: 15px;
  border-left: 5px solid var(--color-red);
}

.article-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 40px 0 20px;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.article-content h5 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 35px 0 18px;
  position: relative;
  padding-left: 20px;
}

.article-content h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  border-radius: 50%;
}

.article-content ul,
.article-content ol {
  margin: 25px 0;
  padding-left: 30px;
}

.article-content li {
  margin-bottom: 12px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.article-content ul li {
  list-style-type: disc;
}

.article-content ol li {
  list-style-type: decimal;
}

.article-content table {
  width: 100%;
  margin: 40px 0;
  border-collapse: collapse;
  font-size: 0.95rem;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.article-content thead {
  background-color: var(--color-black);
  color: #fff;
}

.article-content th {
  padding: 15px 20px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid #ddd;
}

.article-content td {
  padding: 15px 20px;
  border: 1px solid #ddd;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.article-content tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.article-content tbody tr:hover {
  background-color: #f5f5f5;
}

/* Article Footer */
.article-footer {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid #e6e6e6;
  text-align: center;
}

.btn-back-to-list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  background-color: var(--color-black);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s var(--easing);
  letter-spacing: 0.05em;
}

.btn-back-to-list:hover {
  background-color: var(--color-red);
  transform: translateX(-5px);
}

.btn-back-to-list i {
  font-size: 0.9rem;
}

/* Responsive - Mobile */
@media screen and (max-width: 767px) {
  .article-detail-section {
    padding: 50px 0 80px;
  }

  .article-header {
    margin-bottom: 40px;
    padding-bottom: 25px;
  }

  .article-title {
    font-size: 1.5rem;
  }

  .article-content h2 {
    font-size: 1.4rem;
    margin: 40px 0 20px;
  }

  .article-content h3 {
    font-size: 1.25rem;
    margin: 35px 0 18px;
  }

  .article-content h4 {
    font-size: 1.1rem;
    margin: 30px 0 15px;
  }

  .article-content h5 {
    font-size: 1rem;
    margin: 25px 0 12px;
  }

  .article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 30px -4%;
    width: calc(100% + 8%);
  }

  .article-content th,
  .article-content td {
    padding: 12px 15px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .article-footer {
    margin-top: 60px;
    padding-top: 30px;
  }

  .btn-back-to-list {
    padding: 12px 30px;
    font-size: 0.9rem;
  }
}

/* ========================================
   Recruit Culture Section (Growth Career & Culture)
   ======================================== */

.recruit-culture-section {
  width: 100%;
  height: 120vh;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.recruit-culture-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  display: flex;
  align-items: center;
  gap: 60px;
  height: 100%;
}

/* Left: Visual (Scrolling Columns) */
.recruit-culture-visual {
  width: 50%;
  height: 120vh;
  display: flex;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.recruit-culture-visual .scroll-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.recruit-culture-visual .recruit-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.recruit-culture-visual .recruit-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* Animation for left column: scroll up */
.recruit-culture-visual .col-left {
  animation: scrollUpCulture 30s linear infinite;
}

/* Animation for right column: scroll down */
.recruit-culture-visual .col-right {
  animation: scrollDownCulture 30s linear infinite;
}

@keyframes scrollUpCulture {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDownCulture {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Right: Text Content */
.recruit-culture-text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-white);
}

.recruit-culture-text-content .common-header-label {
  margin-bottom: 0;
}

.recruit-culture-text-content .common-header-label .label-dot {
  background: var(--color-white);
}

.recruit-culture-text-content .common-header-label .label-text {
  color: var(--color-white);
}

.recruit-culture-main-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 30px;
  color: var(--color-white);
}

.recruit-culture-desc-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 40px;
  color: var(--color-white);
  opacity: 0.95;
}

/* 採用情報セクションのボタン＝ニュース「View All」と同じデザイン（透明背景・赤枠、ホバーで赤背景・白文字） */
.recruit-culture-text-content .btn-read-more {
  background-color: transparent;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  transition: all 0.3s var(--easing);
}

.recruit-culture-text-content .btn-read-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

.recruit-culture-text-content .btn-read-more .btn-line {
  background-color: currentColor;
}

.recruit-culture-text-content .btn-read-more .btn-triangle {
  border-left-color: currentColor;
}

/* ========================================
   Recruit Culture Section (Growth Career & Culture)
   ======================================== */

.recruit-culture-section {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.recruit-culture-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8.3333333333vw;
  display: flex;
  align-items: center;
  gap: 60px;
  width: 100%;
}

/* Left: Visual (Infinite Scroll Images) */
.recruit-culture-visual {
  width: 50%;
  display: flex;
  gap: 20px;
  position: relative;
  height: 120vh;
  overflow: hidden;
}

.scroll-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.scroll-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroll-col-left .scroll-images {
  animation-name: scrollUp;
  animation-duration: 30s;
}

.scroll-col-right .scroll-images {
  animation-name: scrollDown;
  animation-duration: 30s;
}

.scroll-images img {
  width: 100%;
  aspect-ratio: 3/4;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Right: Text Content */
.recruit-culture-text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-text);
}

.recruit-culture-main-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 30px;
  color: var(--color-text);
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .recruit-culture-main-title {
    font-size: 2rem;
  }
}

.recruit-culture-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.recruit-culture-label .label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e63946;
}

.recruit-culture-label .label-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.recruit-culture-desc-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-text);
  font-weight: 500;
}

.btn-recruit-culture {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 18px 40px;
  background: transparent;
  color: #e63946;
  text-decoration: none;
  border: 1px solid #e63946;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-recruit-culture:hover {
  background: #e63946;
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-recruit-culture .btn-divider {
  color: #e63946;
  font-size: 1rem;
}

.btn-recruit-culture:hover .btn-divider {
  color: var(--color-white);
}

.btn-recruit-culture .btn-arrow {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.btn-recruit-culture:hover .btn-arrow {
  transform: translateX(5px);
}

/* スマホ版 - 採用情報セクション */
@media (max-width: 768px) {
  .recruit-culture-section {
    min-height: auto;
    padding: 80px 0;
  }

  .recruit-culture-container {
    flex-direction: column;
    gap: 40px;
    padding: 0 4%;
  }

  .recruit-culture-text-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .recruit-culture-main-title {
    font-size: 2rem;
  }

  .recruit-culture-desc-text {
    font-size: 0.9rem;
  }

  .recruit-culture-text-content .btn-read-more {
    width: 100%;
    justify-content: center;
    position: relative;
  }

  .recruit-culture-text-content .btn-read-more .btn-icon {
    position: absolute;
    right: 20px;
  }

  .recruit-culture-visual {
    width: 100%;
    height: auto;
  }
}

/* 採用情報セクションのボタン専用スタイル */
.recruit-culture-text-content .btn-read-more .btn-line {
  background-color: currentColor;
}

.recruit-culture-text-content .btn-read-more .btn-triangle {
  border-left-color: currentColor;
}

/* スマホ版 - 事業紹介セクション */
@media (max-width: 768px) {
  /* 詳細事業セクションの各リンクアイテム */
  .sub-link-item {
    padding: 15px;
  }

  /* タイトルのフォントサイズ */
  .sub-link-title {
    font-size: 1rem;
  }

  /* 説明テキストのフォントサイズ */
  .sub-link-desc {
    font-size: 0.8rem;
  }

  /* 各事業の事業説明文 */
  .card-desc {
    margin-bottom: 20px;
  }
}

/* スマホ版 - ニュースセクション */
@media (max-width: 768px) {
  /* 各記事の日付のフォントサイズ */
  .info-date {
    font-size: 0.8rem;
  }

  /* 各記事アイテムの上下のpadding */
  .info-item {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* スマホ版 - ページタイトルセクション */
@media (max-width: 768px) {
  .page-title-section-wrapper {
    padding-bottom: 5px;
  }
}

/* スマホ版 - 会社概要ページ */
@media (max-width: 768px) {
  /* 会社概要セクションのsection-header-leftの下のmargin */
  .section-header-left {
    margin-bottom: 30px;
  }

  /* テーブル表の各trのpadding */
  .company-info-table tr {
    padding: 10px 0;
  }
}

/* スマホ版 - 事業紹介ページ */
@media (max-width: 768px) {
  /* 事業の強み・特徴の各アイテムのpadding */
  .strength-item {
    padding: 15px 0;
    gap: 10px;
  }

  /* 強みのアイテムの見出しと説明文のgap */
  .strength-item-content {
    gap: 10px;
  }

  /* 説明文のフォントサイズ */
  .strength-item-desc {
    font-size: 0.9rem;
  }

  /* 各事業のbusiness-detail-headerの下のmargin */
  .business-detail-header {
    margin-bottom: 10px;
  }
}

/* スマホ版 - セクション見出しの英語部分のmargin調整 */
@media (max-width: 768px) {
  .section-title-en,
  .business-detail-sub {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  /* Loading Screen */
  .loading-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loading-logo svg {
    width: 80%;
    height: auto;
  }

  .sp-br {
    display: block;
  }

  /* Header */
  .header-inner {
    padding: 0 20px;
    justify-content: space-between;
  }

  .header-logo img {
    width: 125px;
    height: auto;
  }

  .logo-text-en {
    font-size: 1.1rem;
  }

  .header-cta-group {
    margin-left: 0;
  }

  /* Hero Responsive */
  .hero {
    height: 100vh;
  }

  .hero-slide-pc {
    display: none;
  }

  .hero-slide-mobile {
    display: block;
  }

  .hero-content {
    top: 60%;
    transform: translateY(-50%);
    left: 20px;
    right: 20px;
    width: auto;
  }

  .hero-title {
    font-size: 42px; /* Increased for mobile too */
    margin-bottom: 20px;
  }

  .hero-subtitle-group {
    gap: 15px;
  }

  .subtitle-line {
    display: none;
  }

  .subtitle-text {
    font-size: 0.9rem;
  }

  /* Concept Redesign Mobile */
  .concept {
    padding: 70px 0;
    /* Add relative positioning if carousel needs it, but it's separate block */
  }

  /* Carousel Adjustment Mobile */
  .concept-carousel {
    padding-top: 40px;
  }

  .carousel-item {
    width: 200px;
    height: 140px;
    margin-right: 20px;
    border-radius: 8px;
  }

  /* Adjust staggered layout for mobile to be less extreme */
  .carousel-item:nth-child(6n + 1) {
    width: 260px;
    height: 180px;
    margin-top: 0;
  }
  .carousel-item:nth-child(6n + 2) {
    width: 200px;
    height: 240px;
    margin-top: 20px;
  }
  .carousel-item:nth-child(6n + 3) {
    width: 240px;
    height: 160px;
    margin-top: 40px;
  }
  .carousel-item:nth-child(6n + 4) {
    width: 220px;
    height: 150px;
    margin-top: 10px;
  }
  .carousel-item:nth-child(6n + 5) {
    width: 280px;
    height: 200px;
    margin-top: 30px;
  }
  .carousel-item:nth-child(6n + 6) {
    width: 210px;
    height: 210px;
    margin-top: 5px;
  }

  .concept-watermark {
    font-size: 60px;
    top: 5%;
  }

  .concept-content {
    min-height: auto;
  }

  .concept-main-copy {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .concept-sub-copy {
    font-size: 1rem;
    margin-bottom: 40px;
  }

  .concept-body-text {
    margin-left: 0;
    max-width: 100%;
    padding-top: 0;
  }

  .concept-header h2 {
    font-size: 2rem;
    margin-top: 15px;
  }

  #concept .concept-body-text p {
    font-size: 0.9rem;
  }

  .btn-read-more {
    width: 100%;
    padding: 15px;
    line-height: 1;
    position: relative;
    justify-content: center;
  }

  .btn-read-more .btn-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Pager */
  .hero-pager {
    display: none;
  }

  /* Giant Outline Text */
  .hero-giant-text {
    top: 72%; /* Changed to 72% */
    bottom: auto; /* Reset bottom */
  }

  .scrolling-item {
    font-size: 50px;
    opacity: 0.2;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  }

  /* News Ticker Mobile */
  /* .hero-news-ticker styles removed */

  /* Strength (Restored) */
  .strength-card {
    margin: -50px 4% 0;
    padding: 30px;
  }

  /* Infra Tech Section adjustments */
  .infra-grid {
    flex-direction: column;
  }

  .infra-bg-split {
    width: 10px;
  }

  .infra-cards-rail {
    flex: auto;
    padding: 40px 20px;
    background: var(--color-red);
    margin-top: 50px;
  }

  .infra-title {
    font-size: 2.5rem;
  }

  .service-card {
    margin-bottom: 0;
  }

  /* Hero News Mobile */
  .hero-news {
    display: none;
  }

  .news-title {
    max-width: 60%; /* Allow more shrink on mobile */
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    gap: 30px;
  }

  /* Intro Title Adjustment */
  .intro-title {
    font-size: 2rem;
  }

  /* Common Section Padding for Mobile */
  .section-padding,
  .information,
  .intro-section,
  .business-details-section {
    padding: 70px 0;
  }

  .business-kooge-section {
    padding: 0 0 70px 0;
  }

  /* Business Block Title Adjustment */
  .business-block-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  /* Business Section Adjustments */
  .business-block:first-child,
  #telecommunication {
    padding-top: 0;
  }

  .business-block {
    margin-bottom: 40px;
  }

  .business-block:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .business-detail-row {
    gap: 20px;
    margin-bottom: 40px;
  }

  .business-block-body {
    padding-bottom: 0;
  }

  .business-detail-title {
    font-size: 1.3rem;
  }

  .strength-section {
    margin-top: 40px;
    margin-bottom: 0;
  }

  .strength-item-title {
    font-size: 1.1rem;
  }

  .strength-header {
    display: flex;
    flex-direction: column-reverse;
    gap: 5px;
    margin-bottom: 15px;
  }

  .strength-title-jp {
    font-size: 1.2rem;
  }

  .strength-title-en {
    font-size: 0.9rem;
  }

  .business-sticky-header {
    display: block;
  }

  .business-container {
    margin-top: 40px;
  }

  .business-visual-sticky {
    display: block;
    width: 100%;
  }

  .business-img-group {
    display: none;
  }

  .header-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
  }

  .header-desc {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 700;
  }

  .business-card {
    border-top: none;
    border-bottom: none;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
  }

  .business-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .business-card:first-child {
    padding-top: 0;
  }

  .card-header {
    margin-bottom: 0;
  }

  .card-title {
    font-size: 1.5rem;
  }

  .card-lead {
    margin-bottom: 15px;
  }

  .card-desc {
    font-size: 0.9rem;
  }

  .business-card-image {
    display: block;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    order: -1;
  }

  .sub-link-item {
    padding: 20px 15px;
  }

  .sub-link-title {
    font-size: 1.2rem;
  }

  .sub-link-desc {
    font-size: 0.9rem;
  }

  /* Information Section Adjustments */
  .info-main-title {
    font-size: 2rem;
  }

  .info-layout-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .info-left-col {
    display: contents; /* Allow children to be reordered in grid/flex parent context if wrapper was grid, but wrapper is flex-col. */
    /* Since .info-layout-wrapper is flex-column, direct children are ordered. 
           .info-left-col children need to be broken out or we need to use display: contents so grandchildren become flex items of .info-layout-wrapper.
        */
    display: contents;
  }

  /* 
       Order of elements in .info-layout-wrapper (now containing grandchildren of .info-left-col + .info-right-col):
       1. .info-header-titles (from left col)
       2. .info-right-col (original right col)
       3. .info-btn-area (from left col)
    */

  .info-header-titles {
    order: 1;
    margin-bottom: 30px;
  }

  .info-right-col {
    order: 2;
    width: 100%;
    margin-bottom: 40px;
  }

  .info-btn-area {
    order: 3;
    width: 100%;
    margin-top: 0;
  }

  .info-btn-area .btn-read-more {
    width: 100%;
    margin-top: 0;
  }

  .info-item {
    padding: 20px 15px;
  }

  /* News List Page - Specific padding for news items */
  .news-page-list .info-item {
    padding: 20px 15px;
  }

  /* News List Page - Pagination margin adjustment */
  .news-list-section .pagination {
    margin-top: 50px;
  }

  /* Breadcrumb Section - No Title Page SP Padding Adjustment */
  .breadcrumb-section.breadcrumb-section-no-title {
    padding-top: 80px;
    padding-bottom: 15px;
  }

  /* News Detail Page - Article Section SP Padding */
  .article-detail-section {
    padding: 30px 0;
  }

  /* CEO Message Section - CEO Name SP Margin */
  .ceo-name {
    margin-bottom: 0;
  }

  /* CEO Sign Section - CEO Sign SP Margin */
  .ceo-sign {
    margin-bottom: 0;
  }

  /* Company Profile Table - SP Responsive */
  .profile-table-wrapper {
    overflow-x: visible;
  }

  .profile-table {
    table-layout: auto;
    display: block;
    min-width: 100%;
  }

  .profile-table tbody {
    display: block;
  }

  .profile-table tr {
    display: block;
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0;
  }

  .profile-table th,
  .profile-table td {
    display: block;
    width: 100%;
    padding: 10px 0;
    border-bottom: none;
    text-align: left;
  }

  .profile-table th {
    width: 100%;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
    white-space: normal;
    min-width: 80px;
  }

  .profile-table td {
    width: 100%;
    color: var(--color-black);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .info-title {
    font-size: 0.9rem;
  }

  /* Recruit Section Mobile */
  .recruit-new-section {
    padding: 70px 0;
  }

  .recruit-container {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .recruit-visual {
    width: 100%;
    height: 400px;
  }

  /* Recruit Culture Section - Mobile */
  .recruit-culture-section {
    height: auto;
    padding: 60px 0;
  }

  .recruit-culture-container {
    flex-direction: column;
    gap: 40px;
  }

  .recruit-culture-visual {
    width: 100%;
    height: 400px;
  }

  .recruit-culture-text-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .recruit-culture-text-content .common-header-label {
    margin-bottom: 30px;
  }

  .recruit-culture-main-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .recruit-culture-desc-text {
    font-size: 0.9rem;
    margin-bottom: 30px;
  }

  /* New Recruit Culture Section - Mobile */
  .recruit-culture-section {
    min-height: auto;
    padding: 60px 0;
  }

  .recruit-culture-container {
    flex-direction: column;
    gap: 40px;
  }

  .recruit-culture-visual {
    width: 100%;
    height: 400px;
    flex-direction: row;
    gap: 15px;
  }

  .scroll-col {
    width: 50%;
  }

  .scroll-images img {
    height: 210px;
  }

  .recruit-culture-text-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .recruit-culture-main-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
  }

  .recruit-culture-subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .recruit-culture-desc-text {
    font-size: 0.9rem;
    margin-bottom: 30px;
  }

  .btn-recruit-culture {
    padding: 15px 30px;
    font-size: 0.9rem;
  }

  .recruit-text-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .recruit-text-content .common-header-label {
    margin-bottom: 30px;
  }

  .recruit-text-content .btn-read-more {
    margin-top: 0;
  }

  .recruit-catch-copy {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .recruit-desc-text {
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.7;
  }

  /* Contact / CTA Section Mobile */
  .split-cta-section {
    flex-direction: column;
    height: auto;
  }

  .cta-col {
    width: 100%;
    height: auto;
    padding: 50px 0;
  }

  .cta-main {
    font-size: 1.6rem;
  }

  .btn-cta-ghost {
    padding: 10px 25px;
  }

  /* ==========================================================================
       Mobile Menu Overlay Redesign
       ========================================================================== */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff; /* 白背景 */
    z-index: 999;
    padding: 20px 20px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--easing);
    overflow-y: auto;
    display: block;
  }

  .mobile-menu-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
    padding-top: 75px;
  }

  /* Header inside Menu */
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-top: 10px;
    height: 60px;
  }

  .mobile-menu-logo img {
    height: 45px;
    width: auto;
  }

  /* Nav List */
  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    width: 100%;
    margin-bottom: 40px;
  }

  .mobile-nav-list li {
    border-bottom: 1px solid #e6e6e6;
  }

  .mobile-nav-list li:first-child {
    border-top: 1px solid #e6e6e6;
  }

  .mobile-nav-list a {
    color: var(--color-black);
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    width: 100%;
  }

  /* Triangle Arrow */
  .mobile-nav-list a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid #333;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  /* Contact Button */
  .mobile-menu-footer {
    margin-top: auto;
    text-align: center;
    width: 100%;
    padding-bottom: 40px;
  }

  .btn-mobile-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e60012; /* Red */
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 20px;
    border-radius: 50px;
    width: 100%;
    gap: 10px;
    transition: opacity 0.3s;
  }

  .btn-mobile-contact:hover {
    opacity: 0.8;
  }

  /* Hamburger Color Override (specificity: .header wins over other states) */
  .header .hamburger-menu.is-active span {
    background-color: var(--color-black);
  }

  /* Recruit Page Specifics */
  .recruit-message-section,
  .recruit-positions-section,
  .recruit-process-section,
  .recruit-faq-section {
    padding: 60px 0;
  }

  /* Page Title Section Wrapper - SP Padding Adjustment */
  .page-title-section-wrapper {
    padding: 80px 0 5px;
  }

  .section-title-jp {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Force line break for "私たちが大切にしていること" on mobile */
  .recruit-message-section .section-title-jp {
    display: block;
    width: 100%;
    max-width: 250px; /* Adjust width to force break */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
  }

  /* FAQ Item Padding Adjustment */
  .faq-item {
    padding: 20px 0;
  }

  /* FAQ Answer Margin Adjustment - Removed, now set to 0 in FAQ Section styles below */
  .external-link-title {
    font-size: 1.4rem;
  }
  .external-link-icon {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }

  /* Page Title & H2 Size Update */
  .page-title-main {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 2rem;
  }

  /* Page Nav SP Layout */
  .page-nav-list {
    flex-direction: column;
    gap: 0;
  }

  .page-nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6; /* 薄いグレーの下線 */
  }

  .page-nav-link:last-child {
    border-bottom: none;
  }

  .page-nav-link.has-border {
    padding-left: 0;
  }

  .page-nav-text {
    font-size: 1rem;
    margin-right: 0;
  }

  /* ==========================================================================
       Company Page Mobile Styles
       ========================================================================== */
  .ceo-message-section,
  .company-profile-section,
  .access-section {
    padding: 60px 0;
  }

  .ceo-message-header {
    margin-bottom: 30px;
  }

  .message-watermark {
    font-size: 5rem;
    top: -20px;
    opacity: 0.5;
  }

  .ceo-catch-copy {
    font-size: 1.6rem;
    margin-bottom: 30px;
    line-height: 1.5;
  }

  .ceo-body-text p {
    font-size: 0.95rem;
    text-align: left;
  }

  .ceo-sign {
    margin-top: 30px;
  }

  /* Profile Table Scroll */
  .profile-table-wrapper {
    margin-top: 30px;
  }

  .profile-table {
    min-width: 100%;
  }

  .profile-table th,
  .profile-table td {
    padding: 15px;
    font-size: 0.9rem;
    display: table-cell; /* Force table layout for scroll */
  }

  .profile-table th {
    width: 30%;
    white-space: normal;
  }

  /* Company Map SP */
  .company-map-wrapper {
    margin-top: 40px;
  }

  .company-map-wrapper iframe {
    height: 300px;
  }

  /* Contact Page Mobile Styles */
  .contact-form-section {
    padding: 60px 0;
  }

  .contact-form {
    margin-top: 40px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    padding: 14px;
    font-size: 1rem;
  }

  /* Contact Thanks SP */
  .contact-complete-section {
    padding: 80px 0;
    min-height: auto;
  }

  .complete-message-wrapper {
    padding: 0 20px;
  }

  .complete-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  .complete-text {
    font-size: 0.95rem;
    text-align: left;
  }

  /* Privacy Policy SP */
  .privacy-policy-section {
    padding: 60px 0;
  }

  .privacy-policy-wrapper {
    padding: 0;
  }

  .privacy-heading h2 {
    font-size: 1.2rem;
  }

  /* News List SP */
  .news-list-section {
    padding: 60px 0;
  }

  .news-category-tabs {
    gap: 10px;
    margin-bottom: 40px;
    justify-content: flex-start; /* 左寄せ */
    flex-wrap: wrap; /* 折り返し許可 */
    overflow-x: visible; /* スクロール無効 */
    padding-bottom: 0;
  }

  .category-tab {
    padding: 8px 20px;
    font-size: 0.85rem;
    flex-shrink: 1; /* 通常の縮小挙動 */
  }

  /* Override breadcrumb for mobile if needed */
  .breadcrumb-section {
    display: block;
    padding: 10px 0;
  }

  /* Recruit External Link - Mobile Styles */
  .recruit-external-link {
    padding: 20px 15px;
  }

  .external-link-title {
    font-size: 1.2rem;
  }

  .external-link-icon {
    width: 40px;
    height: 40px;
  }

  /* Recruit Process Section - Mobile Styles */
  .recruit-process-section .section-header-center {
    margin-bottom: 30px;
  }

  .process-item {
    gap: 15px;
  }

  .process-step {
    width: 50px;
    height: 50px;
  }

  .process-desc {
    font-size: 0.9rem;
  }

  /* FAQ Section - Mobile Styles */
  .faq-section .section-header-center {
    margin-bottom: 30px;
  }

  .faq-q-mark,
  .faq-a-mark {
    width: 40px;
    height: 40px;
  }

  .faq-question h3 {
    font-size: 1rem;
  }

  .faq-answer {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  /* PC Breakpoint */
  .pc-br {
    display: block;
  }

  .page-nav-list {
    gap: 32px;
  }

  .page-nav-text {
    font-size: 1rem;
  }

  .page-nav-link.has-border {
    padding-left: 32px;
  }

  .business-block-title {
    font-size: 3rem;
  }

  .business-block-lead {
    font-size: 1.25rem;
  }

  .business-detail-row {
    flex-direction: row;
  }

  .business-detail-row.reverse {
    flex-direction: row-reverse;
  }

  .business-detail-col {
    width: 50%;
  }

  .strength-item {
    flex-direction: row;
  }

  .strength-item-head {
    width: 33.3333%;
  }

  .strength-item-body {
    width: 66.6666%;
  }

  /* Recruit Page PC Styles */
  .section-title-jp {
    font-size: 3rem;
  }

  .recruit-message-grid {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }

  .recruit-message-item {
    width: 30%;
    padding: 0;
  }

  .positions-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .position-card {
    width: calc(50% - 15px);
    flex-direction: row;
  }

  .position-card-image {
    width: 30%;
    aspect-ratio: auto;
    height: 100%;
  }

  .position-card-content {
    width: 70%;
    justify-content: center;
  }

  .position-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px; /* Triangle pointing right */
    border-color: transparent transparent transparent var(--color-red);
    margin-top: 0;
  }

  /* Hide the Font Awesome icon inside position-arrow for PC layout */
  .position-arrow i {
    display: none;
  }

  .faq-question h3 {
    font-size: 1.125rem;
  }

  /* Breadcrumb Section - No Title Page PC Padding Adjustment */
  .breadcrumb-section-no-title {
    padding: 130px 0 15px;
  }

  /* Privacy Policy Page - Remove container padding on PC */
  .privacy-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* News List Page - Set container width to 1000px and remove padding on PC */
  .news-list-section .container {
    max-width: 1000px;
    padding-left: 0;
    padding-right: 0;
  }

  /* Contact Page - Remove container padding on PC */
  .contact-container {
    padding-left: 0;
    padding-right: 0;
  }
}

[data-sonner-toaster][dir="ltr"],
html[dir="ltr"] {
  --toast-icon-margin-start: -3px;
  --toast-icon-margin-end: 4px;
  --toast-svg-margin-start: -1px;
  --toast-svg-margin-end: 0px;
  --toast-button-margin-start: auto;
  --toast-button-margin-end: 0;
  --toast-close-button-start: 0;
  --toast-close-button-end: unset;
  --toast-close-button-transform: translate(-35%, -35%);
}
[data-sonner-toaster][dir="rtl"],
html[dir="rtl"] {
  --toast-icon-margin-start: 4px;
  --toast-icon-margin-end: -3px;
  --toast-svg-margin-start: 0px;
  --toast-svg-margin-end: -1px;
  --toast-button-margin-start: 0;
  --toast-button-margin-end: auto;
  --toast-close-button-start: unset;
  --toast-close-button-end: 0;
  --toast-close-button-transform: translate(35%, -35%);
}
[data-sonner-toaster] {
  position: fixed;
  width: var(--width);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --gray1: hsl(0, 0%, 99%);
  --gray2: hsl(0, 0%, 97.3%);
  --gray3: hsl(0, 0%, 95.1%);
  --gray4: hsl(0, 0%, 93%);
  --gray5: hsl(0, 0%, 90.9%);
  --gray6: hsl(0, 0%, 88.7%);
  --gray7: hsl(0, 0%, 85.8%);
  --gray8: hsl(0, 0%, 78%);
  --gray9: hsl(0, 0%, 56.1%);
  --gray10: hsl(0, 0%, 52.3%);
  --gray11: hsl(0, 0%, 43.5%);
  --gray12: hsl(0, 0%, 9%);
  --border-radius: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style: none;
  outline: 0px;
  z-index: 999999999;
  transition: transform 0.4s;
}
@media (hover: none) and (pointer: coarse) {
  [data-sonner-toaster][data-lifted="true"] {
    transform: none;
  }
}
[data-sonner-toaster][data-x-position="right"] {
  right: var(--offset-right);
}
[data-sonner-toaster][data-x-position="left"] {
  left: var(--offset-left);
}
[data-sonner-toaster][data-x-position="center"] {
  left: 50%;
  transform: translateX(-50%);
}
[data-sonner-toaster][data-y-position="top"] {
  top: var(--offset-top);
}
[data-sonner-toaster][data-y-position="bottom"] {
  bottom: var(--offset-bottom);
}
[data-sonner-toast] {
  --y: translateY(100%);
  --lift-amount: calc(var(--lift) * var(--gap));
  z-index: var(--z-index);
  position: absolute;
  opacity: 0;
  transform: var(--y);
  touch-action: none;
  transition:
    transform 0.4s,
    opacity 0.4s,
    height 0.4s,
    box-shadow 0.2s;
  box-sizing: border-box;
  outline: 0px;
  overflow-wrap: anywhere;
}
[data-sonner-toast][data-styled="true"] {
  padding: 16px;
  background: var(--normal-bg);
  border: 1px solid var(--normal-border);
  color: var(--normal-text);
  border-radius: var(--border-radius);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  width: var(--width);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-sonner-toast]:focus-visible {
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 4px 12px,
    rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;
}
[data-sonner-toast][data-y-position="top"] {
  top: 0px;
  --y: translateY(-100%);
  --lift: 1;
  --lift-amount: calc(1 * var(--gap));
}
[data-sonner-toast][data-y-position="bottom"] {
  bottom: 0px;
  --y: translateY(100%);
  --lift: -1;
  --lift-amount: calc(var(--lift) * var(--gap));
}
[data-sonner-toast][data-styled="true"] [data-description] {
  font-weight: 400;
  line-height: 1.4;
  color: rgb(63, 63, 63);
}
[data-rich-colors="true"][data-sonner-toast][data-styled="true"]
  [data-description] {
  color: inherit;
}
[data-sonner-toaster][data-sonner-theme="dark"] [data-description] {
  color: rgb(232, 232, 232);
}
[data-sonner-toast][data-styled="true"] [data-title] {
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
}
[data-sonner-toast][data-styled="true"] [data-icon] {
  display: flex;
  height: 16px;
  width: 16px;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  margin-left: var(--toast-icon-margin-start);
  margin-right: var(--toast-icon-margin-end);
}
[data-sonner-toast][data-promise="true"] [data-icon] > svg {
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center center;
  animation: 0.3s ease 0s 1 normal forwards running sonner-fade-in;
}
[data-sonner-toast][data-styled="true"] [data-icon] > * {
  flex-shrink: 0;
}
[data-sonner-toast][data-styled="true"] [data-icon] svg {
  margin-left: var(--toast-svg-margin-start);
  margin-right: var(--toast-svg-margin-end);
}
[data-sonner-toast][data-styled="true"] [data-content] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-sonner-toast][data-styled="true"] [data-button] {
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  height: 24px;
  font-size: 12px;
  color: var(--normal-bg);
  background: var(--normal-text);
  margin-left: var(--toast-button-margin-start);
  margin-right: var(--toast-button-margin-end);
  border: none;
  font-weight: 500;
  cursor: pointer;
  outline: 0px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition:
    opacity 0.4s,
    box-shadow 0.2s;
}
[data-sonner-toast][data-styled="true"] [data-button]:focus-visible {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 2px;
}
[data-sonner-toast][data-styled="true"] [data-button]:first-of-type {
  margin-left: var(--toast-button-margin-start);
  margin-right: var(--toast-button-margin-end);
}
[data-sonner-toast][data-styled="true"] [data-cancel] {
  color: var(--normal-text);
  background: rgba(0, 0, 0, 0.08);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast][data-styled="true"]
  [data-cancel] {
  background: rgba(255, 255, 255, 0.3);
}
[data-sonner-toast][data-styled="true"] [data-close-button] {
  position: absolute;
  left: var(--toast-close-button-start);
  right: var(--toast-close-button-end);
  top: 0px;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  color: var(--gray12);
  background: var(--normal-bg);
  border: 1px solid var(--gray4);
  transform: var(--toast-close-button-transform);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition:
    opacity 0.1s,
    background 0.2s,
    border-color 0.2s;
}
[data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 4px 12px,
    rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;
}
[data-sonner-toast][data-styled="true"] [data-disabled="true"] {
  cursor: not-allowed;
}
[data-sonner-toast][data-styled="true"]:hover [data-close-button]:hover {
  background: var(--gray2);
  border-color: var(--gray5);
}
[data-sonner-toast][data-swiping="true"]::before {
  content: "";
  position: absolute;
  left: -100%;
  right: -100%;
  height: 100%;
  z-index: -1;
}
[data-sonner-toast][data-y-position="top"][data-swiping="true"]::before {
  bottom: 50%;
  transform: scaleY(3) translateY(50%);
}
[data-sonner-toast][data-y-position="bottom"][data-swiping="true"]::before {
  top: 50%;
  transform: scaleY(3) translateY(-50%);
}
[data-sonner-toast][data-swiping="false"][data-removed="true"]::before {
  content: "";
  position: absolute;
  inset: 0px;
  transform: scaleY(2);
}
[data-sonner-toast][data-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 0px;
  height: calc(var(--gap) + 1px);
  bottom: 100%;
  width: 100%;
}
[data-sonner-toast][data-mounted="true"] {
  --y: translateY(0);
  opacity: 1;
}
[data-sonner-toast][data-expanded="false"][data-front="false"] {
  --scale: var(--toasts-before) * 0.05 + 1;
  --y: translateY(calc(var(--lift-amount) * var(--toasts-before)))
    scale(calc(-1 * var(--scale)));
  height: var(--front-toast-height);
}
[data-sonner-toast] > * {
  transition: opacity 0.4s;
}
[data-sonner-toast][data-x-position="right"] {
  right: 0px;
}
[data-sonner-toast][data-x-position="left"] {
  left: 0px;
}
[data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"]
  > * {
  opacity: 0;
}
[data-sonner-toast][data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}
[data-sonner-toast][data-mounted="true"][data-expanded="true"] {
  --y: translateY(calc(var(--lift) * var(--offset)));
  height: var(--initial-height);
}
[data-sonner-toast][data-removed="true"][data-front="true"][data-swipe-out="false"] {
  --y: translateY(calc(var(--lift) * -100%));
  opacity: 0;
}
[data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"] {
  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
  opacity: 0;
}
[data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"] {
  --y: translateY(40%);
  opacity: 0;
  transition:
    transform 0.5s,
    opacity 0.2s;
}
[data-sonner-toast][data-removed="true"][data-front="false"]::before {
  height: calc(var(--initial-height) + 20%);
}
[data-sonner-toast][data-swiping="true"] {
  transform: var(--y) translateY(var(--swipe-amount-y, 0))
    translateX(var(--swipe-amount-x, 0));
  transition: none;
}
[data-sonner-toast][data-swiped="true"] {
  user-select: none;
}
[data-sonner-toast][data-swipe-out="true"][data-y-position="bottom"],
[data-sonner-toast][data-swipe-out="true"][data-y-position="top"] {
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="left"] {
  animation-name: swipe-out-left;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="right"] {
  animation-name: swipe-out-right;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="up"] {
  animation-name: swipe-out-up;
}
[data-sonner-toast][data-swipe-out="true"][data-swipe-direction="down"] {
  animation-name: swipe-out-down;
}
@keyframes swipe-out-left {
  0% {
    transform: var(--y) translateX(var(--swipe-amount-x));
    opacity: 1;
  }
  100% {
    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
    opacity: 0;
  }
}
@keyframes swipe-out-right {
  0% {
    transform: var(--y) translateX(var(--swipe-amount-x));
    opacity: 1;
  }
  100% {
    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
    opacity: 0;
  }
}
@keyframes swipe-out-up {
  0% {
    transform: var(--y) translateY(var(--swipe-amount-y));
    opacity: 1;
  }
  100% {
    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
    opacity: 0;
  }
}
@keyframes swipe-out-down {
  0% {
    transform: var(--y) translateY(var(--swipe-amount-y));
    opacity: 1;
  }
  100% {
    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
    opacity: 0;
  }
}
@media (max-width: 600px) {
  [data-sonner-toaster] {
    position: fixed;
    right: var(--mobile-offset-right);
    left: var(--mobile-offset-left);
    width: 100%;
  }
  [data-sonner-toaster][dir="rtl"] {
    left: calc(var(--mobile-offset-left) * -1);
  }
  [data-sonner-toaster] [data-sonner-toast] {
    left: 0px;
    right: 0px;
    width: calc(100% - var(--mobile-offset-left) * 2);
  }
  [data-sonner-toaster][data-x-position="left"] {
    left: var(--mobile-offset-left);
  }
  [data-sonner-toaster][data-y-position="bottom"] {
    bottom: var(--mobile-offset-bottom);
  }
  [data-sonner-toaster][data-y-position="top"] {
    top: var(--mobile-offset-top);
  }
  [data-sonner-toaster][data-x-position="center"] {
    left: var(--mobile-offset-left);
    right: var(--mobile-offset-right);
    transform: none;
  }
}
[data-sonner-toaster][data-sonner-theme="light"] {
  --normal-bg: #fff;
  --normal-border: var(--gray4);
  --normal-text: var(--gray12);
  --success-bg: hsl(143, 85%, 96%);
  --success-border: hsl(145, 92%, 87%);
  --success-text: hsl(140, 100%, 27%);
  --info-bg: hsl(208, 100%, 97%);
  --info-border: hsl(221, 91%, 93%);
  --info-text: hsl(210, 92%, 45%);
  --warning-bg: hsl(49, 100%, 97%);
  --warning-border: hsl(49, 91%, 84%);
  --warning-text: hsl(31, 92%, 45%);
  --error-bg: hsl(359, 100%, 97%);
  --error-border: hsl(359, 100%, 94%);
  --error-text: hsl(360, 100%, 45%);
}
[data-sonner-toaster][data-sonner-theme="light"]
  [data-sonner-toast][data-invert="true"] {
  --normal-bg: #000;
  --normal-border: hsl(0, 0%, 20%);
  --normal-text: var(--gray1);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast][data-invert="true"] {
  --normal-bg: #fff;
  --normal-border: var(--gray3);
  --normal-text: var(--gray12);
}
[data-sonner-toaster][data-sonner-theme="dark"] {
  --normal-bg: #000;
  --normal-bg-hover: hsl(0, 0%, 12%);
  --normal-border: hsl(0, 0%, 20%);
  --normal-border-hover: hsl(0, 0%, 25%);
  --normal-text: var(--gray1);
  --success-bg: hsl(150, 100%, 6%);
  --success-border: hsl(147, 100%, 12%);
  --success-text: hsl(150, 86%, 65%);
  --info-bg: hsl(215, 100%, 6%);
  --info-border: hsl(223, 43%, 17%);
  --info-text: hsl(216, 87%, 65%);
  --warning-bg: hsl(64, 100%, 6%);
  --warning-border: hsl(60, 100%, 9%);
  --warning-text: hsl(46, 87%, 65%);
  --error-bg: hsl(358, 76%, 10%);
  --error-border: hsl(357, 89%, 16%);
  --error-text: hsl(358, 100%, 81%);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast]
  [data-close-button] {
  background: var(--normal-bg);
  border-color: var(--normal-border);
  color: var(--normal-text);
}
[data-sonner-toaster][data-sonner-theme="dark"]
  [data-sonner-toast]
  [data-close-button]:hover {
  background: var(--normal-bg-hover);
  border-color: var(--normal-border-hover);
}
[data-rich-colors="true"][data-sonner-toast][data-type="success"] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="success"]
  [data-close-button] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="info"] {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="info"]
  [data-close-button] {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="warning"] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="warning"]
  [data-close-button] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="error"] {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
[data-rich-colors="true"][data-sonner-toast][data-type="error"]
  [data-close-button] {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
.sonner-loading-wrapper {
  --size: 16px;
  height: var(--size);
  width: var(--size);
  position: absolute;
  inset: 0px;
  z-index: 10;
}
.sonner-loading-wrapper[data-visible="false"] {
  transform-origin: center center;
  animation: 0.2s ease 0s 1 normal forwards running sonner-fade-out;
}
.sonner-spinner {
  position: relative;
  top: 50%;
  left: 50%;
  height: var(--size);
  width: var(--size);
}
.sonner-loading-bar {
  animation: 1.2s linear 0s infinite normal none running sonner-spin;
  background: var(--gray11);
  border-radius: 6px;
  height: 8%;
  left: -10%;
  position: absolute;
  top: -3.9%;
  width: 24%;
}
.sonner-loading-bar:first-child {
  animation-delay: -1.2s;
  transform: rotate(0.0001deg) translate(146%);
}
.sonner-loading-bar:nth-child(2) {
  animation-delay: -1.1s;
  transform: rotate(30deg) translate(146%);
}
.sonner-loading-bar:nth-child(3) {
  animation-delay: -1s;
  transform: rotate(60deg) translate(146%);
}
.sonner-loading-bar:nth-child(4) {
  animation-delay: -0.9s;
  transform: rotate(90deg) translate(146%);
}
.sonner-loading-bar:nth-child(5) {
  animation-delay: -0.8s;
  transform: rotate(120deg) translate(146%);
}
.sonner-loading-bar:nth-child(6) {
  animation-delay: -0.7s;
  transform: rotate(150deg) translate(146%);
}
.sonner-loading-bar:nth-child(7) {
  animation-delay: -0.6s;
  transform: rotate(180deg) translate(146%);
}
.sonner-loading-bar:nth-child(8) {
  animation-delay: -0.5s;
  transform: rotate(210deg) translate(146%);
}
.sonner-loading-bar:nth-child(9) {
  animation-delay: -0.4s;
  transform: rotate(240deg) translate(146%);
}
.sonner-loading-bar:nth-child(10) {
  animation-delay: -0.3s;
  transform: rotate(270deg) translate(146%);
}
.sonner-loading-bar:nth-child(11) {
  animation-delay: -0.2s;
  transform: rotate(300deg) translate(146%);
}
.sonner-loading-bar:nth-child(12) {
  animation-delay: -0.1s;
  transform: rotate(330deg) translate(146%);
}
@keyframes sonner-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sonner-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes sonner-spin {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}
@media (prefers-reduced-motion) {
  .sonner-loading-bar,
  [data-sonner-toast],
  [data-sonner-toast] > * {
    transition: none;
    animation: none;
  }
}
.sonner-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.sonner-loader[data-visible="false"] {
  opacity: 0;
  transform: scale(0.8) translate(-50%, -50%);
}

.concept-carousel {
  width: 100%;
  overflow: hidden;
  padding-top: 150px;
  padding-bottom: 0px;
}
.carousel-track {
  display: flex;
  width: max-content;
  animation: 60s linear 0s infinite normal none running carousel-scroll-right;
}
.carousel-item {
  width: 300px;
  height: 200px;
  margin-right: 40px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.carousel-item:nth-child(6n + 1) {
  width: 340px;
  height: 240px;
  margin-top: 0px;
}
.carousel-item:nth-child(6n + 2) {
  width: 240px;
  height: 240px;
  margin-top: 80px;
}
.carousel-item:nth-child(6n + 3) {
  width: 420px;
  height: 280px;
  margin-top: -40px;
}
.carousel-item:nth-child(6n + 4) {
  width: 260px;
  height: 340px;
  margin-top: 20px;
}
.carousel-item:nth-child(6n + 5) {
  width: 300px;
  height: 200px;
  margin-top: 60px;
}
.carousel-item:nth-child(6n + 6) {
  width: 280px;
  height: 280px;
  margin-top: 10px;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes carousel-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0px);
  }
}
.logo-stroke {
  fill: none;
  stroke: rgb(0, 0, 0);
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
  animation: 3s ease 0.4s 1 normal forwards running drawLogo;
}
@keyframes drawLogo {
  0% {
    stroke-dashoffset: 3000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
:root {
  --color-black: #333333;
  --color-black-pure: #000000;
  --color-white: #ffffff;
  --color-off-white: #fafafa;
  --color-gray: #e6e6e6;
  --color-gray-dark: #333333;
  --color-red: #e9464d;
  --font-en: "Montserrat", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --easing: cubic-bezier(0.25, 1, 0.5, 1);
}
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-jp);
  color: var(--color-black);
  background-color: var(--color-white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s var(--easing);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul {
  list-style: none;
}
.sp-br {
  display: none;
}
.section-padding {
  padding: 100px 0px;
}
.container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 4%;
  position: relative;
}
.container-fluid {
  width: 100%;
  padding: 0px;
  position: relative;
}
.section-title-sm {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 15px;
}
.section-title-sm::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: var(--color-red);
}
.section-label-red {
  display: inline-block;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1000;
  height: 75px;
  background-color: transparent;
  transition:
    background-color 0.3s var(--easing),
    box-shadow 0.3s var(--easing);
}
.header.is-scrolled {
  background-color: rgb(255, 255, 255);
  height: 75px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0px 48px;
  width: 100%;
}
.header-logo {
  margin-right: auto;
  flex-shrink: 0;
  z-index: 1001;
}
.header-logo img {
  height: auto;
  width: 165px;
}
@media screen and (max-width: 767px) {
  .header-logo img {
    width: 125px;
  }
}
.header-nav {
  display: none;
  margin: 0px 0px 0px auto;
}
@media (min-width: 1024px) {
  .header-nav {
    display: block;
  }
}
.nav-list {
  display: flex;
  gap: 30px;
  align-items: center;
}
.nav-list a {
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 1;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 5px;
}
.header.is-scrolled .nav-list a {
  color: var(--color-black);
}
.header.is-subpage .nav-list a {
  color: var(--color-black);
}
.nav-list a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.nav-list a.active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 3px;
  background-color: rgb(233, 70, 77);
}
.header-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 30px;
}
.btn-header-sub {
  display: none;
  background-color: rgb(34, 34, 34);
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 40px;
  transition: background-color 0.3s;
}
.btn-header-sub:hover {
  background-color: rgb(68, 68, 68);
}
.btn-header-main {
  display: none;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 50px;
  transition: opacity 0.3s;
}
.btn-header-main:hover {
  opacity: 0.8;
}
@media (min-width: 1024px) {
  .btn-header-sub,
  .btn-header-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}
.hamburger-menu {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  display: block;
  margin-left: 20px;
  z-index: 1002;
}
@media (min-width: 1024px) {
  .hamburger-menu {
    display: none;
  }
}
.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  position: absolute;
  left: 0px;
  transition: 0.3s;
}
.hamburger-menu span:nth-child(1) {
  top: 0px;
}
.hamburger-menu span:nth-child(2) {
  top: 9px;
}
.hamburger-menu span:nth-child(3) {
  bottom: 0px;
}
.header.is-scrolled .hamburger-menu span {
  background-color: var(--color-black);
}
.header.is-subpage .hamburger-menu span {
  background-color: var(--color-black);
}
.hamburger-menu.is-active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.is-active span:nth-child(3) {
  bottom: 9px;
  transform: rotate(-45deg);
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  color: var(--color-white);
}
.hero-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-slide-mobile {
  display: none;
}
.hero-slide-pc {
  display: block;
}
.hero.is-loaded .hero-slide {
  animation: 9s ease 0s infinite normal none running slideZoomFade;
}
.hero.is-loaded .slide-1 {
  animation-delay: 0s;
}
.hero.is-loaded .slide-2 {
  animation-delay: 3s;
}
.hero.is-loaded .slide-3 {
  animation-delay: 6s;
}
@keyframes slideZoomFade {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  15% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  48.33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}
.hero-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.hero-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.hero-content {
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
  left: 8vw;
  max-width: 800px;
  text-align: left;
}
.hero-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1.4;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}
.hero-subtitle-group {
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  animation: 1s ease-out 2.2s 1 normal forwards running fadeInUp;
}
.subtitle-line {
  width: 60px;
  height: 1px;
  background-color: var(--color-white);
  display: block;
}
.subtitle-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.hero-title {
  opacity: 0;
  transform: translateY(30px);
  animation: 1s ease-out 2s 1 normal forwards running fadeInUp;
}
@keyframes fadeInUp {
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.hero-pager {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
}
.pager-item {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.pager-item:hover,
.pager-item.active {
  opacity: 1;
}
.pager-num {
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
  position: relative;
  z-index: 2;
}
.pager-item.active .pager-circle {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-red);
  border-radius: 50%;
  animation: 2s ease 0s infinite normal none running pulse;
}
.hero-giant-text {
  display: none;
  position: absolute;
  top: 76%;
  transform: translateY(-50%);
  left: 0px;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.scrolling-wrapper {
  display: flex;
  width: max-content;
  animation: 40s linear 0s infinite normal none running scroll-text;
}
.scrolling-item {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(5rem, 12vw, 9.375rem);
  line-height: 0.8;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  padding-right: 0.5em;
}
@keyframes scroll-text {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-25%);
  }
}
.hero-news {
  position: absolute;
  bottom: 20px;
  right: 4vw;
  width: 380px;
  color: var(--color-white);
  z-index: 10;
  text-align: left;
}
.news-border {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 15px;
}
.news-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  opacity: 0.9;
}
.news-label {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.news-date {
  font-family: var(--font-en);
  font-weight: 500;
}
.news-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
}
.news-title {
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-triangle {
  width: 0px;
  height: 0px;
  border-left: 6px solid var(--color-white);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.hero-news:hover {
  opacity: 0.8;
}
.scroll-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 10;
  color: var(--color-white);
}
.scroll-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  margin-bottom: 10px;
}
.scroll-arrows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.arrow {
  width: 0px;
  height: 0px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-white);
  opacity: 0.6;
  animation: 1.5s ease 0s infinite normal none running scroll-fade;
}
.arrow:nth-child(1) {
  animation-delay: 0s;
}
.arrow:nth-child(2) {
  animation-delay: 0.15s;
}
.arrow:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes scroll-fade {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  50% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.mobile-menu-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background-color: var(--color-black);
  z-index: 999;
  padding: 100px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--easing);
}
.mobile-menu-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}
.mobile-nav-list a {
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-block;
}
.mobile-nav-list .mobile-cta-link {
  color: var(--color-red);
  margin-top: 20px;
}
.information {
  background-color: rgb(255, 255, 255);
  padding: 150px 0px;
}
.info-layout-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}
.info-left-col {
  width: 25%;
  flex-shrink: 0;
}
.info-header-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.info-sub-title {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0px;
}
.info-sub-title::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--color-red);
  border-radius: 50%;
}
.info-main-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-black);
  margin-bottom: 15px;
  font-family: var(--font-jp);
}
.info-btn-area {
  margin-top: 60px;
}
.info-right-col {
  width: 70%;
  flex: 1 1 0%;
}
.info-list {
  border-top: 1px solid rgb(230, 230, 230);
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
  border-bottom: 1px solid rgb(230, 230, 230);
  position: relative;
  transition: background-color 0.3s var(--easing);
  text-decoration: none;
}
.info-item:hover {
  background-color: rgb(249, 249, 249);
}
.info-main-content {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.info-label {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px;
  letter-spacing: 0.05em;
  line-height: 1;
}
.info-date {
  font-family: var(--font-en);
  font-weight: 500;
  color: rgb(153, 153, 153);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.info-category {
  background-color: rgb(229, 229, 229);
  color: rgb(51, 51, 51);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 4px;
  white-space: nowrap;
}
.info-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-black);
  margin: 0px;
  padding-right: 20px;
}
.info-arrow-icon {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 0px 5px 8px;
  border-color: transparent transparent transparent rgb(0, 0, 0);
  margin-left: 20px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .info-layout-wrapper {
    flex-direction: column;
    gap: 40px;
  }
  .info-left-col {
    width: 100%;
  }
  .info-right-col {
    width: 100%;
  }
  .info-btn-area {
    margin-top: 30px;
    width: 100%;
  }
  .info-btn-area .btn-read-more {
    width: 100%;
  }
  .info-meta-row {
    gap: 15px;
  }
}
.concept {
  background-color: var(--color-white);
  padding: 100px 0px;
  position: relative;
  overflow: hidden;
}
.concept-watermark {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14vw;
  color: rgb(245, 245, 245);
  opacity: 0.7;
  z-index: 0;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
}
.concept-content {
  position: relative;
  width: 100%;
  min-height: 500px;
  z-index: 1;
}
.concept-header {
  margin-bottom: 30px;
}
.concept-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 15px;
}
@media (min-width: 1024px) {
  .concept-watermark {
    font-size: 12.5rem;
  }
  .concept-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .concept-header {
    width: 50%;
    margin-bottom: 0px;
    flex-shrink: 0;
  }
  .concept-body-text {
    width: 70%;
    margin: 0px auto;
    padding-top: 27px;
    max-width: 600px;
  }
}
.reveal-cover {
  position: relative;
  color: transparent;
  width: fit-content;
  overflow: hidden;
}
.reveal-cover::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 100%;
  background-color: var(--color-black);
  transform: skewX(-15deg);
  transform-origin: left center;
  z-index: 2;
}
.reveal-cover.is-visible {
  animation: 0.1s linear 0.8s 1 normal forwards running revealTextDelay;
}
.reveal-cover.is-visible::after {
  animation: 1.6s linear 0s 1 normal forwards running coverSlide;
}
@keyframes coverSlide {
  0% {
    width: 0px;
    left: 0px;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    width: 120%;
    left: -10%;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    width: 0px;
    left: 110%;
  }
}
@keyframes revealTextDelay {
  100% {
    color: var(--color-black);
  }
}
.concept-main-copy {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.7;
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}
.concept-sub-copy {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 15px;
}
.concept-sub-copy::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: rgb(233, 70, 77);
  border-radius: 50%;
}
.concept-body-text {
  max-width: 700px;
  margin-left: auto;
  text-align: left;
  font-size: 1rem;
  line-height: 2.2;
  color: var(--color-black);
  padding-top: 27px;
}
.concept-body-text p:not(.concept-main-copy) {
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
  font-weight: 500;
}
.block-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-black);
  letter-spacing: 0.02em;
}
.card-desc {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}
.recruit-desc-text {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
  color: var(--color-black);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.info-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-black);
  margin: 0px;
  padding-right: 20px;
  letter-spacing: 0.02em;
}
.btn-read-more {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 40px;
  border: 1px solid var(--color-red);
  color: var(--color-white);
  background-color: var(--color-red);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 20px;
  width: 240px;
  transition: all 0.3s var(--easing);
  border-radius: 50px;
}
.btn-icon {
  display: flex;
  align-items: center;
  height: 100%;
}
.btn-line {
  display: block;
  width: 1px;
  height: 20px;
  background-color: currentcolor;
  margin: 0px 15px;
}
.btn-triangle {
  display: block;
  width: 0px;
  height: 0px;
  border-left: 6px solid currentcolor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.btn-read-more:hover {
  background-color: var(--color-white);
  color: var(--color-red);
  border-color: var(--color-red);
}
.strength {
  position: relative;
  overflow: hidden;
}
.watermark-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 15vw;
  color: rgb(240, 240, 240);
  z-index: -1;
  white-space: nowrap;
  opacity: 0.5;
}
.strength-visual {
  position: relative;
  margin-top: 50px;
}
.strength-visual img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}
.strength-card {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 50px;
  max-width: 500px;
  position: relative;
  margin-top: -100px;
  margin-left: auto;
  margin-right: 5%;
  z-index: 2;
}
@media (min-width: 768px) {
  .strength-card {
    position: absolute;
    bottom: -50px;
    right: 50px;
    margin: 0px;
  }
}
.strength-title {
  font-size: 2rem;
  margin: 20px 0px;
  font-weight: 700;
}
.strength-desc {
  margin-bottom: 30px;
  color: rgb(204, 204, 204);
}
.service-scroll-section {
  padding: 100px 0px;
  background-color: rgb(255, 255, 255);
  position: relative;
}
.service-scroll-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.service-sticky-sidebar {
  width: 100%;
}
.service-titles {
  margin-bottom: 20px;
}
.service-title-jp {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-black);
}
.service-title-sub-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-title-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  border-radius: 50%;
  display: inline-block;
}
.service-title-sub {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0px;
  color: var(--color-black);
}
.service-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-black);
}
.service-circle-nav {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.nav-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s;
}
.nav-item:hover {
  transform: scale(1.05);
}
.nav-item .circle {
  width: 120px;
  height: 120px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgb(255, 255, 255);
  transition: 0.3s;
}
.nav-item .circle span {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: rgb(153, 153, 153);
}
.nav-item.is-active .circle {
  border-color: var(--color-black);
  background-color: var(--color-black);
}
.nav-item.is-active .circle span {
  color: rgb(255, 255, 255);
}
.service-main-content {
  width: 100%;
}
.service-contents-wrapper {
}
.service-content-block {
  margin-bottom: 80px;
  padding-top: 20px;
}
.block-header {
  margin-bottom: 20px;
}
.block-sub-title {
  font-family: var(--font-en);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-red);
  display: block;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
}
.block-main-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-black);
}
.block-divider {
  width: 100%;
  height: 1px;
  background-color: rgb(230, 230, 230);
  margin-bottom: 30px;
}
.block-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.block-text-col {
  order: 2;
}
.block-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-black);
}
.block-img-col {
  order: 1;
  width: 100%;
}
.block-img-col img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.btn-view-more {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 40px;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  background-color: var(--color-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  width: 240px;
  border-radius: 0px;
  transition: all 0.3s var(--easing);
}
.btn-view-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.btn-view-more .btn-line {
  background-color: currentcolor;
}
.btn-view-more .btn-triangle {
  border-left-color: currentcolor;
}
.recruit-new-section {
  background-color: rgb(255, 255, 255);
  padding: 0px;
  overflow: hidden;
}
.recruit-container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 4%;
  display: flex;
  align-items: stretch;
  gap: 60px;
}
.recruit-visual {
  width: 50%;
  height: 120vh;
  display: flex;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.scroll-col {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.recruit-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.recruit-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.col-left {
  animation: 30s linear 0s infinite normal none running scrollUp;
}
.col-right {
  animation: 30s linear 0s infinite normal none running scrollDown;
}
@keyframes scrollUp {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0px);
  }
}
.recruit-text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-black);
}
.recruit-main-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 15px;
  color: var(--color-black);
}
.recruit-catch-copy {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--color-black);
}
.recruit-sub-title {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0px 0px 30px;
  text-transform: uppercase;
}
.recruit-sub-title::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--color-red);
  border-radius: 50%;
}
.recruit-desc-text {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
  color: var(--color-black);
}
.btn-recruit-main {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  color: var(--color-red);
  border: 1px solid var(--color-gray);
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 700;
  min-width: 280px;
  transition: all 0.3s var(--easing);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 10px;
}
.btn-recruit-main {
  background-color: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-red);
}
.btn-recruit-main:hover {
  background-color: var(--color-white);
  color: var(--color-red);
  border-color: var(--color-red);
}
.btn-recruit-main span {
  font-size: 1rem;
  letter-spacing: 0.05em;
}
.btn-recruit-main i {
  font-size: 1rem;
}
@media (max-width: 768px) {
  .recruit-container {
    flex-direction: column;
    gap: 40px;
  }
  .recruit-text-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .recruit-main-title {
    font-size: 3rem;
  }
  .recruit-desc-text {
    text-align: center;
  }
}
.split-cta-section {
  display: flex;
  width: 100%;
  height: 450px;
  overflow: hidden;
}
.cta-col {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  color: rgb(255, 255, 255);
}
.cta-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  transition: transform 0.6s var(--easing);
  z-index: 0;
}
.cta-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  z-index: 1;
}
.cta-col:hover .cta-bg {
  transform: scale(1.05);
}
.cta-col:hover .cta-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-sub {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.cta-main {
  font-family: var(--font-en);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  padding: 0px 0px 10px;
  border-top: none;
  border-right: none;
  border-left: none;
  border-image: initial;
  border-bottom: 1px solid rgb(255, 255, 255);
  border-radius: 0px;
  color: rgb(255, 255, 255);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.2rem;
  transition: opacity 0.3s var(--easing);
  gap: 10px;
}
.btn-cta-ghost .btn-line {
  display: none;
}
.cta-col:hover .btn-cta-ghost {
  background-color: transparent;
  color: rgb(255, 255, 255);
  opacity: 0.7;
}
.btn-cta-solid {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 240px;
  padding: 12px 20px 12px 40px;
  background-color: rgb(255, 255, 255);
  color: var(--color-black);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 50px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s var(--easing);
}
.cta-col:hover .btn-cta-solid {
  background-color: var(--color-black);
  color: rgb(255, 255, 255);
  border-color: var(--color-black);
}
.btn-cta-ghost .btn-line,
.btn-cta-solid .btn-line {
  background-color: currentcolor;
}
.btn-cta-ghost .btn-triangle,
.btn-cta-solid .btn-triangle {
  background-color: transparent;
  width: 0px;
  height: 0px;
  border-width: 4px 0px 4px 6px;
  border-top-style: solid;
  border-top-color: transparent;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  border-left-style: solid;
  border-left-color: currentcolor;
  border-right-style: initial;
  border-right-color: initial;
}
@media (max-width: 768px) {
  .split-cta-section {
    flex-direction: column;
    height: auto;
  }
  .cta-col {
    width: 100%;
    height: 300px;
  }
}
.footer {
  background-color: rgb(255, 255, 255);
  color: var(--color-black);
  padding: 80px 0px 30px;
  font-size: 0.9rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}
.footer-info {
  width: 100%;
  max-width: 300px;
}
.footer-logo img {
  height: 40px;
  width: auto;
  margin-bottom: 20px;
}
.footer-company-name {
  font-weight: 700;
  margin-bottom: 10px;
}
.footer-address {
  margin-bottom: 15px;
  line-height: 1.6;
}
.footer-map-link {
  display: inline-block;
  color: var(--color-black);
  text-decoration: underline;
  font-size: 0.85rem;
}
.footer-sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.sitemap-col {
  min-width: 140px;
}
.sitemap-head {
  display: block;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 15px;
  text-decoration: none;
}
.sitemap-list {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.sitemap-list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 15px;
}
.sitemap-list li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: var(--color-red);
  border-radius: 50%;
}
.sitemap-list li a {
  color: var(--color-black);
  text-decoration: none;
  font-size: 0.85rem;
  transition: opacity 0.3s;
}
.sitemap-list li a:hover {
  opacity: 0.7;
}
.footer-bottom-row {
  border-top: 1px solid rgb(230, 230, 230);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.copyright {
  font-size: 0.75rem;
  color: rgb(153, 153, 153);
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.footer-bottom-links li a {
  font-size: 0.75rem;
  color: var(--color-black);
  text-decoration: none;
}
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 60px;
  }
  .footer-sitemap {
    flex-direction: column;
    gap: 30px;
  }
  .footer-bottom-row {
    flex-direction: column-reverse;
    text-align: center;
    gap: 15px;
  }
  .footer-bottom-links {
    justify-content: center;
  }
}
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s var(--easing);
}
.fade-left {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s var(--easing);
}
.is-visible {
  opacity: 1;
  transform: translateX(0px);
}
.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}
#concept p {
  line-height: 1.8;
}
#concept .concept-body-text p {
  line-height: inherit;
}
.btn-read-more,
.btn-service-all,
.btn-recruit-main {
  background-color: var(--color-white);
  color: var(--color-red);
  border: 1px solid var(--color-red);
  transition: all 0.3s var(--easing);
}
.info-btn-area .btn-read-more {
  background-color: transparent;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  transition: all 0.3s var(--easing);
}
.btn-read-more:hover,
.btn-service-all:hover,
.btn-recruit-main:hover,
.info-btn-area .btn-read-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.btn-read-more .btn-line,
.btn-service-all .btn-line,
.info-btn-area .btn-read-more .btn-line,
.btn-view-more .btn-line {
  background-color: currentcolor;
}
.btn-read-more .btn-triangle,
.btn-service-all .btn-triangle,
.info-btn-area .btn-read-more .btn-triangle,
.btn-view-more .btn-triangle {
  background-color: transparent;
  width: 0px;
  height: 0px;
  border-width: 4px 0px 4px 6px;
  border-top-style: solid;
  border-top-color: transparent;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  border-left-style: solid;
  border-left-color: currentcolor;
  border-right-style: initial;
  border-right-color: initial;
}
.btn-recruit-main i {
  color: inherit;
}
.business-kooge-section {
  background-color: rgb(255, 255, 255);
  padding: 0px 0px 100px;
  position: relative;
}
.business-container {
  position: relative;
}
.business-sticky-header {
  display: none;
}
.business-visual-sticky {
  display: none;
}
.business-content-scroll {
  width: 100%;
}
.business-card {
  background-color: transparent;
  padding: 60px 0px;
  border-top: 1px solid rgb(204, 204, 204);
  position: relative;
  margin-bottom: 0px;
}
.business-card-image {
  display: none;
}
.business-card:first-child {
  border-top: none;
}
.business-card:nth-child(2),
.business-card:nth-child(3) {
  border-top: none;
}
.business-card:last-child {
  border-bottom: 1px solid rgb(204, 204, 204);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.card-category {
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgb(233, 70, 77);
  letter-spacing: 0.05em;
  text-transform: capitalize;
}
.card-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.card-lead {
  font-size: 0.9rem;
  color: rgb(102, 102, 102);
  margin-bottom: 30px;
  line-height: 1.6;
}
.card-desc {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
}
.btn-business-pill {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  text-decoration: none;
  color: var(--color-black);
  font-weight: 700;
  transition: opacity 0.3s var(--easing);
  font-size: 1rem;
  letter-spacing: 0.05em;
}
.btn-business-pill:hover {
  opacity: 0.7;
}
.btn-business-pill .icon-arrow {
  width: 60px;
  height: 36px;
  background-color: rgb(51, 51, 51);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  font-size: 0.9rem;
}
.business-sub-links {
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid rgb(230, 230, 230);
}
.sub-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
  border-bottom: 1px solid rgb(230, 230, 230);
  text-decoration: none;
  transition: background-color 0.3s var(--easing);
}
.sub-link-item:hover {
  background-color: rgb(250, 250, 250);
}
.sub-link-text {
  flex: 1 1 0%;
}
.sub-link-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--color-black);
}
.sub-link-desc {
  font-size: 1rem;
  color: var(--color-black);
  font-weight: 500;
}
.sub-link-icon {
  width: auto;
  height: auto;
  background-color: transparent;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  margin-left: 30px;
  flex-shrink: 0;
  transition: transform 0.3s var(--easing);
}
.sub-link-icon img {
  width: 14px;
  height: auto;
  display: block;
}
.sub-link-item:hover .sub-link-icon {
  transform: translateX(5px);
}
@media (min-width: 1024px) {
  .container {
    max-width: 100%;
    padding-left: 8.33333vw;
    padding-right: 8.33333vw;
  }
  #concept {
    height: auto;
    min-height: auto;
    padding: 100px 0px;
    display: block;
  }
  #concept .container {
    width: 100%;
    max-width: 100%;
    padding-left: 8.33333vw;
    padding-right: 8.33333vw;
  }
  .business-kooge-section {
    padding: 0px 0px 100px;
  }
  #business .container {
    max-width: 100%;
    padding-left: 8.33333vw;
    padding-right: 8.33333vw;
    display: flex;
  }
  .recruit-container {
    max-width: 100%;
    padding-left: 8.33333vw;
    padding-right: 8.33333vw;
  }
  .information {
    padding: 150px 0px;
  }
  .information .container {
    max-width: 100%;
    padding-left: 8.33333vw;
    padding-right: 8.33333vw;
  }
  .split-cta-section {
    padding-left: 0px;
    padding-right: 0px;
  }
  .footer .container {
    max-width: 100%;
    padding-left: 8.33333vw;
    padding-right: 8.33333vw;
  }
  .service-scroll-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }
  .service-sticky-sidebar {
    width: 33%;
    position: sticky;
    top: 100px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding-right: 40px;
  }
  .service-sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .service-circle-nav {
    margin-top: auto;
    position: relative;
    height: 280px;
    width: 100%;
    max-width: 300px;
  }
  .nav-item {
    position: absolute;
  }
  .nav-item:nth-child(1) {
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-item:nth-child(1):hover {
    transform: translateX(-50%) scale(1.05);
  }
  .nav-item:nth-child(2) {
    bottom: 0px;
    left: 0px;
  }
  .nav-item:nth-child(3) {
    bottom: 0px;
    right: 0px;
  }
  .service-title-jp {
    font-size: 2.25rem;
  }
  .service-main-content {
    width: 60%;
    display: block;
    margin-left: auto;
    padding-top: 0px;
  }
  .service-content-block {
    min-height: 80vh;
    margin-bottom: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .block-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }
  .block-text-col {
    width: 40%;
    order: 1;
    padding-top: 20px;
  }
  .block-img-col {
    width: 60%;
    order: 2;
  }
  .business-kooge-section .business-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 50px;
  }
  .business-visual-sticky {
    display: block;
    width: 40%;
    height: auto;
    align-self: flex-start;
  }
  .business-sticky-header {
    display: block;
    width: 40%;
    margin-bottom: 0px;
  }
  .header-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 30px;
  }
  .header-desc {
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 700;
  }
  .business-img-group {
    position: sticky;
    top: 100px;
    width: 100%;
    height: 600px;
    margin-top: 0px;
  }
  .business-img-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .business-img-wrapper.is-active {
    opacity: 1;
    z-index: 2;
  }
  .business-img {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px;
  }
  .business-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .business-img-caption {
    text-align: left;
    width: 100%;
  }
  .caption-title {
    color: var(--color-black);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 5px;
  }
  .caption-sub {
    font-size: 0.8rem;
    color: rgb(153, 153, 153);
    font-family: var(--font-en);
    letter-spacing: 0.05em;
    text-transform: capitalize;
  }
  .business-content-scroll {
    width: 54%;
    padding-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
  }
  .business-img-wrapper::after {
    content: none;
  }
  .business-img {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
  }
  .business-card {
    padding: 50px 0px;
  }
  .business-card:first-child {
    padding-top: 0px;
    border-top: none;
  }
  .business-card:last-child {
    border-bottom: none;
  }
  .sub-link-title {
    font-size: 1.4rem;
  }
  .concept-header h2 {
    font-size: 3rem;
    letter-spacing: 0.05em;
    line-height: 1.7;
    white-space: nowrap;
  }
  .header-title,
  .recruit-main-title,
  .info-main-title {
    font-size: 3rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }
  .header-desc {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .concept-body-text p:not(.concept-main-copy) {
    font-size: 1.4rem;
  }
  .intro-section .intro-header .intro-title {
    margin-bottom: 60px;
  }
  .intro-section .intro-header .intro-desc {
    font-size: 1.2rem;
    line-height: 2.3;
  }
}
.header-label,
.common-header-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0px;
}
.label-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  border-radius: 50%;
  display: inline-block;
}
.label-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--color-black);
  text-transform: capitalize;
}
.page-title-section {
  height: 60vh;
  min-height: 400px;
  background-image: url("../images/business_hero.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-title-overlay {
  position: absolute;
  inset: 0px;
  background: rgba(0, 0, 0, 0.5);
}
.circle-diagram-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 60px 0px;
}
.circle-item {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid rgb(233, 70, 77);
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(233, 70, 77);
  text-align: center;
  position: relative;
  transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 25px;
  flex-shrink: 0;
}
.circle-item:hover {
  background-color: rgb(233, 70, 77);
  color: rgb(255, 255, 255);
}
.circle-item h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.circle-item p {
  font-size: 0.9rem;
  line-height: 1.5;
}
.circle-left {
  z-index: 1;
}
.circle-center {
  z-index: 2;
}
.circle-right {
  z-index: 1;
}
@media (max-width: 768px) {
  .circle-diagram-wrapper {
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
    gap: 20px;
    padding: 40px 0px;
  }
  .circle-diagram-wrapper .circle-item {
    position: relative;
    width: 280px;
    height: 280px;
    left: auto;
    right: auto;
    transform: none;
  }
  .circle-item:hover {
    background-color: transparent;
    color: rgb(233, 70, 77);
  }
}
.biz-detail-card {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(238, 238, 238);
  border-radius: 12px;
  padding: 24px;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.biz-detail-card:hover {
  transform: translateY(-5px);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px;
}
.page-title-section-wrapper {
  padding-top: 130px;
  padding-bottom: 0px;
  background-color: var(--color-white);
}
.page-title-header {
  margin-bottom: 30px;
  text-align: left;
}
.page-title-sub {
  display: block;
  color: var(--color-red);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
}
.page-title-main {
  color: var(--color-black);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.page-title-image-wrapper {
  width: 100%;
  margin-bottom: 0px;
}
.page-title-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  aspect-ratio: 21 / 9;
}
.page-nav-section {
  background-color: rgb(255, 255, 255);
}
.page-nav-wrapper {
  border-bottom: none;
  margin-top: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.page-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.page-nav-link {
  display: flex;
  align-items: center;
  padding: 16px 0px;
  transition: opacity 0.3s;
  cursor: pointer;
}
.page-nav-link:hover {
  opacity: 0.7;
}
.page-nav-link.has-border {
  border-left: none;
  padding-left: 16px;
}
.page-nav-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 0.875rem;
  margin-right: 8px;
  color: var(--color-black);
}
.page-nav-icon {
  color: var(--color-red);
  font-size: 0.75rem;
}
.intro-section {
  padding: 80px 0px;
  background-color: var(--color-white);
}
.intro-header {
  text-align: center;
  max-width: 768px;
  margin: 0px auto 60px;
}
.intro-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  font-family: var(--font-jp);
  line-height: 1.7;
}
.intro-desc {
  font-size: 1rem;
  line-height: 2;
  font-family: var(--font-jp);
  color: rgb(55, 65, 81);
  font-weight: 500;
}
.pc-br {
  display: none;
}
.circle-sub {
  font-size: 0.875rem;
  font-family: var(--font-en);
  margin-bottom: 8px;
  opacity: 0.8;
}
.circle-desc {
  font-size: 0.75rem;
  margin-top: 8px;
  padding: 0px 16px;
}
.business-details-section {
  padding: 80px 0px;
  background-color: rgb(245, 245, 245);
}
.business-block {
  margin-bottom: 120px;
}
.business-block:last-child {
  margin-bottom: 40px;
}
.business-block-header {
  margin-bottom: 60px;
}
.business-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0px;
}
@media (max-width: 768px) {
  .business-label {
    margin-bottom: 0px;
  }
}
.business-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-red);
}
.business-label-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--color-black);
}
.business-block-title {
  font-size: 2.25rem;
  font-weight: 700;
  font-family: var(--font-jp);
  margin-bottom: 40px;
  color: var(--color-black);
}
.business-block-lead {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 24px;
  line-height: 1.6;
}
.business-block-desc {
  font-size: 1rem;
  color: rgb(55, 65, 81);
  line-height: 2;
}
.business-block-body {
  padding-bottom: 48px;
}
.business-detail-row {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 80px;
}
.business-detail-col {
  width: 100%;
}
.business-detail-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.business-detail-header {
  margin-bottom: 24px;
}
.business-detail-sub {
  display: block;
  color: var(--color-red);
  font-weight: 700;
  font-family: var(--font-en);
  font-size: 0.875rem;
  margin-bottom: 0px;
}
.business-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-black);
}
.business-detail-text {
  color: rgb(75, 85, 99);
  line-height: 2;
  text-align: justify;
  letter-spacing: 0.025em;
}
.strength-section {
  margin-top: 80px;
}
.strength-header {
  padding: 0px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 30px;
}
.strength-title-jp {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-black);
  font-family: var(--font-jp);
}
.strength-title-en {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-red);
  font-family: var(--font-en);
}
.strength-list {
  width: 100%;
  border-top: 1px solid rgb(225, 225, 225);
}
.strength-item {
  padding: 32px 0px;
  border-bottom: 1px solid rgb(225, 225, 225);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.strength-item-head {
  width: 100%;
  flex-shrink: 0;
}
.strength-item-title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 12px;
}
.strength-num {
  font-size: 1.5rem;
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--color-black);
  flex-shrink: 0;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.strength-item-body {
  width: 100%;
}
.strength-item-desc {
  font-size: 1rem;
  color: var(--color-black);
  line-height: 1.8;
}
.section-header-center {
  text-align: center;
  margin-bottom: 60px;
}
.section-header-left {
  text-align: left;
  margin-bottom: 60px;
}
.section-title-jp {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 10px;
  font-family: var(--font-jp);
}
.section-title-en {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-red);
  letter-spacing: 0.05em;
  margin-bottom: 0px;
}
.section-lead {
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 20px;
  color: rgb(51, 51, 51);
}
.recruit-message-section {
  padding: 100px 0px;
  background-color: var(--color-white);
}
.recruit-message-grid {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.recruit-message-item {
  text-align: center;
  padding: 0px 20px;
}
.message-copy-en {
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.message-copy-jp {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(102, 102, 102);
  margin-bottom: 24px;
}
.message-text {
  font-size: 1rem;
  line-height: 1.8;
  color: rgb(51, 51, 51);
  text-align: justify;
}
.recruit-positions-section {
  padding: 100px 0px;
  background-color: rgb(245, 245, 245);
}
.positions-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.position-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 6px -1px;
}
.position-card:hover {
  transform: translateY(-5px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;
}
.position-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.position-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.position-card:hover .position-card-image img {
  transform: scale(1.05);
}
.position-card-content {
  padding: 24px;
  position: relative;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
.position-business-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(102, 102, 102);
  margin-bottom: 8px;
}
.position-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
  color: var(--color-black);
}
.position-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.position-tag {
  font-size: 0.75rem;
  background-color: rgb(240, 240, 240);
  color: rgb(51, 51, 51);
  padding: 4px 10px;
  border-radius: 4px;
}
.position-arrow {
  margin-top: auto;
  align-self: flex-end;
  color: var(--color-red);
  font-size: 1rem;
}
.recruit-process-section {
  padding: 100px 0px;
  background-color: var(--color-white);
}
.process-list {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0px auto;
}
.process-item {
  display: flex;
  gap: 30px;
  padding-bottom: 50px;
  position: relative;
}
.process-item::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 60px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(225, 225, 225);
  transform: translateX(-50%);
}
.process-item:last-child {
  padding-bottom: 0px;
}
.process-item:last-child::before {
  display: none;
}
.process-step {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-red);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.process-step.step-final {
  background-color: var(--color-black);
}
.step-label {
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
}
.step-num {
  font-family: var(--font-en);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}
.process-content {
  flex: 1 1 0%;
  padding-top: 10px;
}
.process-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-black);
}
.process-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgb(51, 51, 51);
}
.recruit-faq-section {
  padding: 100px 0px;
  background-color: rgb(245, 245, 245);
}
.faq-list {
  max-width: 900px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.faq-item {
  background-color: transparent;
  border-radius: 0px;
  overflow: visible;
  border-bottom: 1px solid rgb(224, 224, 224);
  padding: 30px 0px;
  transition: 0.3s;
}
.faq-item:first-child {
  border-top: 1px solid rgb(224, 224, 224);
}
.faq-item.active .faq-answer {
  display: flex;
  border-top: none;
}
.faq-item.active .faq-toggle i {
  transform: none;
}
.faq-question {
  padding: 0px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
}
.faq-q-mark {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin-right: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  box-shadow: none;
}
.faq-question h3 {
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1 1 0%;
  margin: 0px;
  line-height: 1.6;
  padding-top: 8px;
}
.faq-toggle {
  display: none;
}
.faq-answer {
  display: flex;
  max-height: 0px;
  overflow: hidden;
  padding: 0px;
  background-color: transparent;
  align-items: flex-start;
  transition:
    max-height 0.4s ease-in-out,
    margin-top 0.4s ease-in-out;
  margin-top: 0px;
}
.faq-a-mark {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin-right: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.faq-answer p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0px;
  color: rgb(51, 51, 51);
  padding-top: 8px;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.faq-item.is-open .faq-answer {
  max-height: 500px;
  margin-top: 24px;
}
.recruit-external-link-wrapper {
  margin-top: 80px;
  border-top: 1px solid rgb(225, 225, 225);
  border-bottom: 1px solid rgb(225, 225, 225);
}
.recruit-external-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0px;
  text-decoration: none;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.recruit-external-link:hover {
  opacity: 0.7;
}
.external-link-content {
  flex: 1 1 0%;
  padding-right: 20px;
}
.external-link-title {
  font-family: var(--font-jp);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 10px;
  line-height: 1.4;
}
.external-link-desc {
  font-size: 0.9rem;
  color: rgb(102, 102, 102);
  line-height: 1.6;
}
.external-link-icon {
  width: 60px;
  height: 60px;
  background-color: var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.recruit-external-link:hover .external-link-icon {
  transform: scale(1.05);
}
#construction {
  background-color: rgb(255, 255, 255);
  padding-top: 80px;
  padding-bottom: 80px;
  margin-bottom: 80px;
  position: relative;
}
.business-details-section .container {
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
}
.business-block-header,
.business-block-body {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4%;
  padding-right: 4%;
}
@media (min-width: 1024px) {
  .business-block-header,
  .business-block-body {
    max-width: 100%;
    padding-left: 8.33333vw;
    padding-right: 8.33333vw;
  }
}
#telecommunication {
  padding-top: 60px;
}
body {
  line-height: 1.5;
}
h1,
h2,
h3,
h4 {
  letter-spacing: 0.05em;
  line-height: 1.5;
}
p {
  letter-spacing: 0.02em;
}
.page-title-main,
.intro-title,
.business-block-title,
.business-detail-title,
.strength-title-jp,
.strength-item-title,
.section-title-jp,
.position-title,
.process-title,
.faq-question h3,
.external-link-title {
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.intro-desc,
.business-block-desc,
.business-detail-text,
.strength-item-desc,
.section-lead,
.message-text,
.process-desc,
.faq-answer p,
.external-link-desc {
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.business-block-lead {
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.message-copy-jp {
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.section-header-center .common-header-label {
  justify-content: center;
  margin-bottom: 0px;
}
.section-header-left .common-header-label {
  justify-content: flex-start;
  margin-bottom: 0px;
}
@media (max-width: 768px) {
  .section-header-center .common-header-label,
  .section-header-left .common-header-label {
    margin-bottom: 0px;
  }
}
.recruit-external-link .external-link-icon {
  background-color: var(--color-red);
}
@media (min-width: 768px) {
  .section-title-jp {
    font-size: 3.5rem;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .recruit-message-section .section-header-center {
    margin-bottom: 90px;
  }
  .recruit-message-grid {
    gap: 90px;
  }
  .recruit-external-link-wrapper {
    margin-top: 120px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}
.label-dot {
  background-color: var(--color-red);
}
.label-text {
  color: var(--color-black);
}
.ceo-message-section {
  padding: 100px 0px;
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.ceo-message-wrapper {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0px auto 0px 0px;
}
.message-watermark {
  position: absolute;
  top: -60px;
  left: 0px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 15rem;
  color: rgb(245, 245, 245);
  z-index: -1;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.8;
}
.ceo-message-header {
  margin-bottom: 40px;
}
.ceo-catch-copy {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 40px;
  color: var(--color-black);
  letter-spacing: 0.05em;
  font-family: var(--font-jp);
}
.ceo-body-text p {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 30px;
  color: rgb(51, 51, 51);
  text-align: justify;
}
.ceo-sign {
  margin-top: 40px;
  text-align: right;
  font-size: 1rem;
  line-height: 1.6;
}
.ceo-name {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  margin-top: 5px;
}
.company-profile-section {
  padding: 100px 0px;
  background-color: rgb(245, 245, 245);
}
.profile-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.profile-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid rgb(224, 224, 224);
  background-color: transparent;
  table-layout: fixed;
}
.profile-table th,
.profile-table td {
  padding: 30px 0px;
  border-bottom: 1px solid rgb(224, 224, 224);
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  vertical-align: top;
}
.profile-table th {
  width: 25%;
  background-color: transparent;
  font-weight: 500;
  color: rgb(102, 102, 102);
  white-space: nowrap;
}
.profile-table td {
  width: 75%;
  color: var(--color-black);
}
.company-map-wrapper {
  margin-top: 60px;
}
.company-map-wrapper iframe {
  width: 100%;
  height: 450px;
  border: none;
  background-color: rgb(238, 238, 238);
}
@media (min-width: 1024px) {
  .ceo-message-wrapper {
    margin-left: 0px;
  }
  .message-watermark {
    left: 0px;
    font-size: 11rem;
  }
  .ceo-catch-copy {
    font-size: 2rem;
  }
}
.contact-form-section .contact-container,
.contact-complete-section .contact-container {
  margin: 0px auto;
  max-width: 1000px;
}
.contact-form-section {
  padding: 100px 0px;
  background-color: var(--color-white);
}
.contact-form {
  margin-top: 60px;
}
.form-group {
  margin-bottom: 30px;
}
.form-label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--color-black);
}
.form-tag {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
  font-weight: 500;
  vertical-align: middle;
}
.form-tag.required {
  background-color: var(--color-red);
  color: var(--color-white);
}
.form-tag.optional {
  background-color: rgb(153, 153, 153);
  color: var(--color-white);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s;
  background-color: rgb(249, 249, 249);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-black);
  background-color: var(--color-white);
}
.select-wrapper {
  position: relative;
}
.select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgb(102, 102, 102);
  pointer-events: none;
}
.form-select {
  appearance: none;
  cursor: pointer;
}
.form-textarea {
  height: 200px;
  resize: vertical;
}
.form-privacy {
  margin: 40px 0px;
  text-align: center;
}
.privacy-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.privacy-text a {
  color: var(--color-red);
  text-decoration: underline;
}
.form-submit {
  text-align: center;
}
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  padding: 15px 30px;
  background-color: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s var(--easing);
  letter-spacing: 0.05em;
}
.btn-submit:hover {
  background-color: var(--color-white);
  color: var(--color-red);
}
.btn-submit .btn-line {
  background-color: currentcolor;
}
.btn-submit .btn-triangle {
  border-left-color: currentcolor;
}
.contact-complete-section {
  padding: 150px 0px;
  background-color: var(--color-white);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.complete-message-wrapper {
  text-align: center;
  max-width: 800px;
  margin: 0px auto;
}
.complete-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--color-black);
}
.complete-text {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 20px;
  color: rgb(51, 51, 51);
}
.complete-text-sub {
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgb(102, 102, 102);
  margin-bottom: 60px;
}
.complete-btn-area {
  display: flex;
  justify-content: center;
}
.complete-btn-area .btn-read-more {
  width: 240px;
  background-color: var(--color-white);
  color: var(--color-red);
  border: 1px solid var(--color-red);
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 40px;
  border-radius: 50px;
  font-weight: 700;
  transition: all 0.3s var(--easing);
}
.complete-btn-area .btn-read-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
}
.complete-btn-area .btn-read-more .btn-line {
  background-color: currentcolor;
}
.complete-btn-area .btn-read-more .btn-triangle {
  border-left-color: currentcolor;
}
.privacy-policy-section {
  padding: 100px 0px;
  background-color: var(--color-white);
}
.privacy-policy-section .privacy-container {
  margin: 0px auto;
  max-width: 1000px;
}
.privacy-policy-wrapper {
  background-color: var(--color-white);
  padding: 0px;
  border-radius: 8px;
}
.privacy-block {
  margin-bottom: 40px;
}
.privacy-block:last-child {
  margin-bottom: 0px;
}
.privacy-heading h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(221, 221, 221);
  color: var(--color-black);
  line-height: 1.5;
}
.privacy-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: rgb(51, 51, 51);
  margin-bottom: 15px;
  text-align: justify;
}
.privacy-content p a {
  color: var(--color-red);
  text-decoration: underline;
}
.privacy-list {
  padding-left: 0px;
  margin-top: 10px;
  list-style: none;
}
.privacy-list li {
  font-size: 1rem;
  line-height: 1.8;
  color: rgb(51, 51, 51);
  margin-bottom: 5px;
  padding-left: 1em;
  text-indent: -1em;
}
.breadcrumb-section {
  padding: 15px 0px;
}
.breadcrumb-section-no-title {
  padding: 130px 0px 15px;
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.8rem;
  color: rgb(102, 102, 102);
}
.breadcrumb-list li:not(:last-child)::after {
  content: ">";
  margin: 0px 10px;
  color: rgb(153, 153, 153);
}
.breadcrumb-list a:hover {
  text-decoration: underline;
}
.news-list-section {
  padding: 80px 0px 120px;
  background-color: var(--color-white);
}
.news-category-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}
.category-tab {
  padding: 10px 30px;
  border-radius: 50px;
  border: 1px solid rgb(221, 221, 221);
  color: rgb(102, 102, 102);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s var(--easing);
  background-color: var(--color-white);
}
.category-tab:hover,
.category-tab.active {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.news-page-list .info-item {
  padding: 40px 0px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 80px;
}
.page-number,
.page-next {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  text-decoration: none;
  color: rgb(102, 102, 102);
  font-family: var(--font-en);
  font-weight: 700;
  transition: 0.3s;
}
.page-number.current {
  background-color: var(--color-black);
  color: var(--color-white);
}
.page-number:hover:not(.current),
.page-next:hover {
  background-color: rgb(240, 240, 240);
}
.faq-item.is-open .faq-toggle i {
  transform: rotate(45deg);
  transition: transform 0.4s ease-in-out;
}
.faq-toggle i {
  transition: transform 0.4s ease-in-out;
}
.breadcrumb-section {
  padding: 30px 0px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: rgb(102, 102, 102);
}
.breadcrumb-item {
  color: rgb(102, 102, 102);
  text-decoration: none;
  transition: color 0.3s;
}
.breadcrumb-item:hover {
  color: var(--color-red);
}
.breadcrumb-item.current {
  color: var(--color-black);
  font-weight: 500;
}
.breadcrumb-separator {
  color: rgb(153, 153, 153);
}
.article-detail-section {
  padding: 80px 0px 120px;
  background-color: rgb(255, 255, 255);
}
.article-detail {
  max-width: 1000px;
  margin: 0px auto;
}
.article-header {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(230, 230, 230);
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.article-date {
  font-family: var(--font-en);
  font-size: 0.9rem;
  color: rgb(102, 102, 102);
  letter-spacing: 0.05em;
}
.article-category {
  display: inline-block;
  background-color: var(--color-red);
  color: rgb(255, 255, 255);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.article-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 0px;
}
.article-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-black);
  letter-spacing: 0.02em;
}
.article-content p {
  margin-bottom: 1.5em;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.article-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 60px 0px 30px;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--color-red);
}
.article-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 50px 0px 25px;
  padding-left: 15px;
  border-left: 5px solid var(--color-red);
}
.article-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 40px 0px 20px;
  padding: 10px 15px;
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
}
.article-content h5 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  letter-spacing: 0.05em;
  margin: 35px 0px 18px;
  position: relative;
  padding-left: 20px;
}
.article-content h5::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  border-radius: 50%;
}
.article-content ul,
.article-content ol {
  margin: 25px 0px;
  padding-left: 30px;
}
.article-content li {
  margin-bottom: 12px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.article-content ul li {
  list-style-type: disc;
}
.article-content ol li {
  list-style-type: decimal;
}
.article-content table {
  width: 100%;
  margin: 40px 0px;
  border-collapse: collapse;
  font-size: 0.95rem;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.article-content thead {
  background-color: var(--color-black);
  color: rgb(255, 255, 255);
}
.article-content th {
  padding: 15px 20px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid rgb(221, 221, 221);
}
.article-content td {
  padding: 15px 20px;
  border: 1px solid rgb(221, 221, 221);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.article-content tbody tr:nth-child(2n) {
  background-color: rgb(249, 249, 249);
}
.article-content tbody tr:hover {
  background-color: rgb(245, 245, 245);
}
.article-footer {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgb(230, 230, 230);
  text-align: center;
}
.btn-back-to-list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  background-color: var(--color-black);
  color: rgb(255, 255, 255);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s var(--easing);
  letter-spacing: 0.05em;
}
.btn-back-to-list:hover {
  background-color: var(--color-red);
  transform: translateX(-5px);
}
.btn-back-to-list i {
  font-size: 0.9rem;
}
@media screen and (max-width: 767px) {
  .article-detail-section {
    padding: 50px 0px 80px;
  }
  .article-header {
    margin-bottom: 40px;
    padding-bottom: 25px;
  }
  .article-title {
    font-size: 1.5rem;
  }
  .article-content h2 {
    font-size: 1.4rem;
    margin: 40px 0px 20px;
  }
  .article-content h3 {
    font-size: 1.25rem;
    margin: 35px 0px 18px;
  }
  .article-content h4 {
    font-size: 1.1rem;
    margin: 30px 0px 15px;
  }
  .article-content h5 {
    font-size: 1rem;
    margin: 25px 0px 12px;
  }
  .article-content table {
    display: block;
    overflow-x: auto;
    margin: 30px -4%;
    width: calc(108%);
  }
  .article-content th,
  .article-content td {
    padding: 12px 15px;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .article-footer {
    margin-top: 60px;
    padding-top: 30px;
  }
  .btn-back-to-list {
    padding: 12px 30px;
    font-size: 0.9rem;
  }
}
.recruit-culture-section {
  width: 100%;
  height: 120vh;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.recruit-culture-container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 4%;
  display: flex;
  align-items: center;
  gap: 60px;
  height: 100%;
}
.recruit-culture-visual {
  width: 50%;
  height: 120vh;
  display: flex;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.recruit-culture-visual .scroll-col {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.recruit-culture-visual .recruit-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.recruit-culture-visual .recruit-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.recruit-culture-visual .col-left {
  animation: 30s linear 0s infinite normal none running scrollUpCulture;
}
.recruit-culture-visual .col-right {
  animation: 30s linear 0s infinite normal none running scrollDownCulture;
}
@keyframes scrollUpCulture {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes scrollDownCulture {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0px);
  }
}
.recruit-culture-text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-white);
}
.recruit-culture-text-content .common-header-label {
  margin-bottom: 0px;
}
.recruit-culture-text-content .common-header-label .label-dot {
  background: var(--color-white);
}
.recruit-culture-text-content .common-header-label .label-text {
  color: var(--color-white);
}
.recruit-culture-main-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 30px;
  color: var(--color-white);
}
.recruit-culture-desc-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 40px;
  color: var(--color-white);
  opacity: 0.95;
}
.recruit-culture-text-content .btn-read-more {
  background-color: transparent;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  transition: all 0.3s var(--easing);
}
.recruit-culture-text-content .btn-read-more:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.recruit-culture-text-content .btn-read-more .btn-line {
  background-color: currentColor;
}
.recruit-culture-text-content .btn-read-more .btn-triangle {
  border-left-color: currentColor;
}
.recruit-culture-section {
  width: 100%;
  min-height: 100vh;
  background: rgb(245, 245, 245);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0px;
}
.recruit-culture-container {
  max-width: 100%;
  margin: 0px auto;
  padding: 0px 8.33333vw;
  display: flex;
  align-items: center;
  gap: 60px;
  width: 100%;
}
.recruit-culture-visual {
  width: 50%;
  display: flex;
  gap: 20px;
  position: relative;
  height: 120vh;
  overflow: hidden;
}
.scroll-col {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.scroll-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.scroll-col-left .scroll-images {
  animation-name: scrollUp;
  animation-duration: 30s;
}
.scroll-col-right .scroll-images {
  animation-name: scrollDown;
  animation-duration: 30s;
}
.scroll-images img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px;
  flex-shrink: 0;
}
@keyframes scrollUp {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0px);
  }
}
.recruit-culture-text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-text);
}
.recruit-culture-main-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 30px;
  color: var(--color-text);
  letter-spacing: 0px;
}
@media (max-width: 768px) {
  .recruit-culture-main-title {
    font-size: 2rem;
  }
}
.recruit-culture-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.recruit-culture-label .label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(230, 57, 70);
}
.recruit-culture-label .label-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.recruit-culture-desc-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--color-text);
  font-weight: 500;
}
.btn-recruit-culture {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 18px 40px;
  background: transparent;
  color: rgb(230, 57, 70);
  text-decoration: none;
  border: 1px solid rgb(230, 57, 70);
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  transition: 0.3s;
}
.btn-recruit-culture:hover {
  background: rgb(230, 57, 70);
  color: var(--color-white);
  transform: translateY(-2px);
}
.btn-recruit-culture .btn-divider {
  color: rgb(230, 57, 70);
  font-size: 1rem;
}
.btn-recruit-culture:hover .btn-divider {
  color: var(--color-white);
}
.btn-recruit-culture .btn-arrow {
  font-size: 0.8rem;
  transition: transform 0.3s;
}
.btn-recruit-culture:hover .btn-arrow {
  transform: translateX(5px);
}
@media (max-width: 768px) {
  .recruit-culture-section {
    min-height: auto;
    padding: 80px 0px;
  }
  .recruit-culture-container {
    flex-direction: column;
    gap: 40px;
    padding: 0px 4%;
  }
  .recruit-culture-text-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .recruit-culture-main-title {
    font-size: 2rem;
  }
  .recruit-culture-desc-text {
    font-size: 0.9rem;
  }
  .recruit-culture-text-content .btn-read-more {
    width: 100%;
    justify-content: center;
    position: relative;
  }
  .recruit-culture-text-content .btn-read-more .btn-icon {
    position: absolute;
    right: 20px;
  }
  .recruit-culture-visual {
    width: 100%;
    height: auto;
  }
}
.recruit-culture-text-content .btn-read-more .btn-line {
  background-color: currentColor;
}
.recruit-culture-text-content .btn-read-more .btn-triangle {
  border-left-color: currentColor;
}
@media (max-width: 768px) {
  .sub-link-item {
    padding: 15px;
  }
  .sub-link-title {
    font-size: 1rem;
  }
  .sub-link-desc {
    font-size: 0.8rem;
  }
  .card-desc {
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .info-date {
    font-size: 0.8rem;
  }
  .info-item {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (max-width: 768px) {
  .page-title-section-wrapper {
    padding-bottom: 5px;
  }
}
@media (max-width: 768px) {
  .section-header-left {
    margin-bottom: 30px;
  }
  .company-info-table tr {
    padding: 10px 0px;
  }
}
@media (max-width: 768px) {
  .strength-item {
    padding: 15px 0px;
    gap: 10px;
  }
  .strength-item-content {
    gap: 10px;
  }
  .strength-item-desc {
    font-size: 0.9rem;
  }
  .business-detail-header {
    margin-bottom: 10px;
  }
}
@media (max-width: 768px) {
  .section-title-en,
  .business-detail-sub {
    margin-bottom: 0px;
  }
}

@media screen and (max-width: 768px) {
  .loading-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loading-logo svg {
    width: 80%;
    height: auto;
  }
  .sp-br {
    display: block;
  }
  .header-inner {
    padding: 0px 20px;
    justify-content: space-between;
  }
  .header-logo img {
    width: 125px;
    height: auto;
  }
  .logo-text-en {
    font-size: 1.1rem;
  }
  .header-cta-group {
    margin-left: 0px;
  }
  .hero {
    height: 100vh;
  }
  .hero-slide-pc {
    display: none;
  }
  .hero-slide-mobile {
    display: block;
  }
  .hero-content {
    top: 60%;
    transform: translateY(-50%);
    left: 20px;
    right: 20px;
    width: auto;
  }
  .hero-title {
    font-size: 42px;
    margin-bottom: 20px;
  }
  .hero-subtitle-group {
    gap: 15px;
  }
  .subtitle-line {
    display: none;
  }
  .subtitle-text {
    font-size: 0.9rem;
  }
  .concept {
    padding: 70px 0px;
  }
  .concept-carousel {
    padding-top: 40px;
  }
  .carousel-item {
    width: 200px;
    height: 140px;
    margin-right: 20px;
    border-radius: 8px;
  }
  .carousel-item:nth-child(6n + 1) {
    width: 260px;
    height: 180px;
    margin-top: 0px;
  }
  .carousel-item:nth-child(6n + 2) {
    width: 200px;
    height: 240px;
    margin-top: 20px;
  }
  .carousel-item:nth-child(6n + 3) {
    width: 240px;
    height: 160px;
    margin-top: 40px;
  }
  .carousel-item:nth-child(6n + 4) {
    width: 220px;
    height: 150px;
    margin-top: 10px;
  }
  .carousel-item:nth-child(6n + 5) {
    width: 280px;
    height: 200px;
    margin-top: 30px;
  }
  .carousel-item:nth-child(6n + 6) {
    width: 210px;
    height: 210px;
    margin-top: 5px;
  }
  .concept-watermark {
    font-size: 60px;
    top: 5%;
  }
  .concept-content {
    min-height: auto;
  }
  .concept-main-copy {
    font-size: 2rem;
    margin-bottom: 15px;
  }
  .concept-sub-copy {
    font-size: 1rem;
    margin-bottom: 40px;
  }
  .concept-body-text {
    margin-left: 0px;
    max-width: 100%;
    padding-top: 0px;
  }
  .concept-header h2 {
    font-size: 2rem;
    margin-top: 15px;
  }
  #concept .concept-body-text p {
    font-size: 0.9rem;
  }
  .btn-read-more {
    width: 100%;
    padding: 15px;
    line-height: 1;
    position: relative;
    justify-content: center;
  }
  .btn-read-more .btn-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .hero-pager {
    display: none;
  }
  .hero-giant-text {
    top: 72%;
    bottom: auto;
  }
  .scrolling-item {
    font-size: 50px;
    opacity: 0.2;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  }
  .strength-card {
    margin: -50px 4% 0px;
    padding: 30px;
  }
  .infra-grid {
    flex-direction: column;
  }
  .infra-bg-split {
    width: 10px;
  }
  .infra-cards-rail {
    flex: 1 1 auto;
    padding: 40px 20px;
    background: var(--color-red);
    margin-top: 50px;
  }
  .infra-title {
    font-size: 2.5rem;
  }
  .service-card {
    margin-bottom: 0px;
  }
  .hero-news {
    display: none;
  }
  .news-title {
    max-width: 60%;
  }
  .footer-top {
    flex-direction: column;
  }
  .footer-links {
    flex-direction: column;
    gap: 30px;
  }
  .intro-title {
    font-size: 2rem;
  }
  .section-padding,
  .information,
  .intro-section,
  .business-details-section {
    padding: 70px 0px;
  }
  .business-kooge-section {
    padding: 0px 0px 70px;
  }
  .business-block-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  .business-block:first-child,
  #telecommunication {
    padding-top: 0px;
  }
  .business-block {
    margin-bottom: 40px;
  }
  .business-block:last-child {
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  .business-detail-row {
    gap: 20px;
    margin-bottom: 40px;
  }
  .business-block-body {
    padding-bottom: 0px;
  }
  .business-detail-title {
    font-size: 1.3rem;
  }
  .strength-section {
    margin-top: 40px;
    margin-bottom: 0px;
  }
  .strength-item-title {
    font-size: 1.1rem;
  }
  .strength-header {
    display: flex;
    flex-direction: column-reverse;
    gap: 5px;
    margin-bottom: 15px;
  }
  .strength-title-jp {
    font-size: 1.2rem;
  }
  .strength-title-en {
    font-size: 0.9rem;
  }
  .business-sticky-header {
    display: block;
  }
  .business-container {
    margin-top: 40px;
  }
  .business-visual-sticky {
    display: block;
    width: 100%;
  }
  .business-img-group {
    display: none;
  }
  .header-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
  }
  .header-desc {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 700;
  }
  .business-card {
    border-top: none;
    border-bottom: none;
    padding: 40px 0px;
    display: flex;
    flex-direction: column;
  }
  .business-card:last-child {
    border-bottom: none;
    padding-bottom: 0px;
  }
  .business-card:first-child {
    padding-top: 0px;
  }
  .card-header {
    margin-bottom: 0px;
  }
  .card-title {
    font-size: 1.5rem;
  }
  .card-lead {
    margin-bottom: 15px;
  }
  .card-desc {
    font-size: 0.9rem;
  }
  .business-card-image {
    display: block;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    order: -1;
  }
  .sub-link-item {
    padding: 20px 15px;
  }
  .sub-link-title {
    font-size: 1.2rem;
  }
  .sub-link-desc {
    font-size: 0.9rem;
  }
  .info-main-title {
    font-size: 2rem;
  }
  .info-layout-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0px;
  }
  .info-left-col {
    display: contents;
  }
  .info-header-titles {
    order: 1;
    margin-bottom: 30px;
  }
  .info-right-col {
    order: 2;
    width: 100%;
    margin-bottom: 40px;
  }
  .info-btn-area {
    order: 3;
    width: 100%;
    margin-top: 0px;
  }
  .info-btn-area .btn-read-more {
    width: 100%;
    margin-top: 0px;
  }
  .info-item {
    padding: 20px 15px;
  }
  .news-page-list .info-item {
    padding: 20px 15px;
  }
  .news-list-section .pagination {
    margin-top: 50px;
  }
  .breadcrumb-section.breadcrumb-section-no-title {
    padding-top: 80px;
    padding-bottom: 15px;
  }
  .article-detail-section {
    padding: 30px 0px;
  }
  .ceo-name {
    margin-bottom: 0px;
    font-size: 1.2rem;
  }
  .ceo-sign {
    margin-bottom: 0px;
  }
  .profile-table-wrapper {
    overflow-x: visible;
  }
  .profile-table {
    table-layout: auto;
    display: block;
    min-width: 100%;
  }
  .profile-table tbody {
    display: block;
  }
  .profile-table tr {
    display: block;
    border-bottom: 1px solid rgb(224, 224, 224);
    padding: 20px 0px;
  }
  .profile-table th,
  .profile-table td {
    display: block;
    width: 100%;
    padding: 10px 0px;
    border-bottom: none;
    text-align: left;
  }
  .profile-table th {
    width: 100%;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
    white-space: normal;
    min-width: 80px;
  }
  .profile-table td {
    width: 100%;
    color: var(--color-black);
    overflow-wrap: break-word;
  }
  .info-title {
    font-size: 0.9rem;
  }
  .recruit-new-section {
    padding: 70px 0px;
  }
  .recruit-container {
    flex-direction: column-reverse;
    gap: 40px;
  }
  .recruit-visual {
    width: 100%;
    height: 400px;
  }
  .recruit-culture-section {
    height: auto;
    padding: 60px 0px;
  }
  .recruit-culture-container {
    flex-direction: column;
    gap: 40px;
  }
  .recruit-culture-visual {
    width: 100%;
    height: 400px;
  }
  .recruit-culture-text-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  .recruit-culture-text-content .common-header-label {
    margin-bottom: 30px;
  }
  .recruit-culture-main-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  .recruit-culture-desc-text {
    font-size: 0.9rem;
    margin-bottom: 30px;
  }
  .recruit-culture-section {
    min-height: auto;
    padding: 60px 0px;
  }
  .recruit-culture-container {
    flex-direction: column;
    gap: 40px;
  }
  .recruit-culture-visual {
    width: 100%;
    height: 400px;
    flex-direction: row;
    gap: 15px;
  }
  .scroll-col {
    width: 50%;
  }
  .scroll-images img {
    height: 210px;
  }
  .recruit-culture-text-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  .recruit-culture-main-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
  }
  .recruit-culture-subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .recruit-culture-desc-text {
    font-size: 0.9rem;
    margin-bottom: 30px;
  }
  .btn-recruit-culture {
    padding: 15px 30px;
    font-size: 0.9rem;
  }
  .recruit-text-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  .recruit-text-content .common-header-label {
    margin-bottom: 30px;
  }
  .recruit-text-content .btn-read-more {
    margin-top: 0px;
  }
  .recruit-catch-copy {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  .recruit-desc-text {
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.7;
  }
  .split-cta-section {
    flex-direction: column;
    height: auto;
  }
  .cta-col {
    width: 100%;
    height: auto;
    padding: 50px 0px;
  }
  .cta-main {
    font-size: 1.6rem;
  }
  .btn-cta-ghost {
    padding: 10px 25px;
  }
  .mobile-menu-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    z-index: 999;
    padding: 20px 20px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--easing);
    overflow-y: auto;
    display: block;
  }
  .mobile-menu-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
    padding-top: 75px;
  }
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-top: 10px;
    height: 60px;
  }
  .mobile-menu-logo img {
    height: 45px;
    width: auto;
  }
  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    text-align: left;
    width: 100%;
    margin-bottom: 40px;
  }
  .mobile-nav-list li {
    border-bottom: 1px solid rgb(230, 230, 230);
  }
  .mobile-nav-list li:first-child {
    border-top: 1px solid rgb(230, 230, 230);
  }
  .mobile-nav-list a {
    color: var(--color-black);
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    width: 100%;
  }
  .mobile-nav-list a::after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-left: 5px solid rgb(51, 51, 51);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .mobile-menu-footer {
    margin-top: auto;
    text-align: center;
    width: 100%;
    padding-bottom: 40px;
  }
  .btn-mobile-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(230, 0, 18);
    color: rgb(255, 255, 255);
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 20px;
    border-radius: 50px;
    width: 100%;
    gap: 10px;
    transition: opacity 0.3s;
  }
  .btn-mobile-contact:hover {
    opacity: 0.8;
  }
  .header .hamburger-menu.is-active span {
    background-color: var(--color-black);
  }
  .recruit-message-section,
  .recruit-positions-section,
  .recruit-process-section,
  .recruit-faq-section {
    padding: 60px 0px;
  }
  .page-title-section-wrapper {
    padding: 80px 0px 5px;
  }
  .section-title-jp {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .recruit-message-section .section-title-jp {
    display: block;
    width: 100%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
  }
  .faq-item {
    padding: 20px 0px;
  }
  .external-link-title {
    font-size: 1.4rem;
  }
  .external-link-icon {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
  .page-title-main {
    font-size: 1.8rem;
  }
  body.theme-youi-is-subpage .page-title-main {
    font-size: 2rem;
  }
  h2 {
    font-size: 2rem;
  }
  .page-nav-list {
    flex-direction: column;
    gap: 0px;
  }
  .page-nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 20px 0px;
    border-bottom: 1px solid rgb(230, 230, 230);
  }
  .page-nav-link:last-child {
    border-bottom: none;
  }
  .page-nav-link.has-border {
    padding-left: 0px;
  }
  .page-nav-text {
    font-size: 1rem;
    margin-right: 0px;
  }
  .ceo-message-section,
  .company-profile-section,
  .access-section {
    padding: 60px 0px;
  }
  .ceo-message-header {
    margin-bottom: 30px;
  }
  .message-watermark {
    font-size: 5rem;
    top: -20px;
    opacity: 0.5;
  }
  .ceo-catch-copy {
    font-size: 1.6rem;
    margin-bottom: 30px;
    line-height: 1.5;
  }
  .ceo-body-text p {
    font-size: 0.95rem;
    text-align: left;
  }
  .ceo-sign {
    margin-top: 30px;
  }
  .profile-table-wrapper {
    margin-top: 30px;
  }
  .profile-table {
    min-width: 100%;
  }
  .profile-table th,
  .profile-table td {
    padding: 15px;
    font-size: 0.9rem;
    display: table-cell;
  }
  .profile-table th {
    width: 30%;
    white-space: normal;
  }
  .company-map-wrapper {
    margin-top: 40px;
  }
  .company-map-wrapper iframe {
    height: 300px;
  }
  .contact-form-section {
    padding: 60px 0px;
  }
  .contact-form {
    margin-top: 40px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .form-input,
  .form-select,
  .form-textarea {
    padding: 14px;
    font-size: 1rem;
  }
  .contact-complete-section {
    padding: 80px 0px;
    min-height: auto;
  }
  .complete-message-wrapper {
    padding: 0px 20px;
  }
  .complete-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  .complete-text {
    font-size: 0.95rem;
    text-align: left;
  }
  .privacy-policy-section {
    padding: 60px 0px;
  }
  .privacy-policy-wrapper {
    padding: 0px;
  }
  .privacy-heading h2 {
    font-size: 1.2rem;
  }
  .news-list-section {
    padding: 60px 0px;
  }
  .news-category-tabs {
    gap: 10px;
    margin-bottom: 40px;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0px;
  }
  .category-tab {
    padding: 8px 20px;
    font-size: 0.85rem;
    flex-shrink: 1;
  }
  .breadcrumb-section {
    display: block;
    padding: 10px 0px;
  }
  .recruit-external-link {
    padding: 20px 15px;
  }
  .external-link-title {
    font-size: 1.2rem;
  }
  .external-link-icon {
    width: 40px;
    height: 40px;
  }
  .recruit-process-section .section-header-center {
    margin-bottom: 30px;
  }
  .process-item {
    gap: 15px;
  }
  .process-step {
    width: 50px;
    height: 50px;
  }
  .process-desc {
    font-size: 0.9rem;
  }
  .faq-section .section-header-center {
    margin-bottom: 30px;
  }
  .faq-q-mark,
  .faq-a-mark {
    width: 40px;
    height: 40px;
  }
  .faq-question h3 {
    font-size: 1rem;
  }
  .faq-answer {
    margin-top: 0px;
  }
}
@media (min-width: 768px) {
  .pc-br {
    display: block;
  }
  .page-nav-list {
    gap: 32px;
  }
  .page-nav-text {
    font-size: 1rem;
  }
  .page-nav-link.has-border {
    padding-left: 32px;
  }
  .business-block-title {
    font-size: 3rem;
  }
  .business-block-lead {
    font-size: 1.25rem;
  }
  .business-detail-row {
    flex-direction: row;
  }
  .business-detail-row.reverse {
    flex-direction: row-reverse;
  }
  .business-detail-col {
    width: 50%;
  }
  .strength-item {
    flex-direction: row;
  }
  .strength-item-head {
    width: 33.3333%;
  }
  .strength-item-body {
    width: 66.6666%;
  }
  .section-title-jp {
    font-size: 3rem;
  }
  .recruit-message-grid {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }
  .recruit-message-item {
    width: 30%;
    padding: 0px;
  }
  .positions-list {
    flex-flow: wrap;
  }
  .position-card {
    width: calc(50% - 15px);
    flex-direction: row;
  }
  .position-card-image {
    width: 30%;
    aspect-ratio: auto;
    height: 100%;
  }
  .position-card-content {
    width: 70%;
    justify-content: center;
  }
  .position-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 0px 6px 10px;
    border-color: transparent transparent transparent var(--color-red);
    margin-top: 0px;
  }
  .position-arrow i {
    display: none;
  }
  .faq-question h3 {
    font-size: 1.125rem;
  }
  .breadcrumb-section-no-title {
    padding: 130px 0px 15px;
  }
  .privacy-container {
    padding-left: 0px;
    padding-right: 0px;
  }
  .news-list-section .container {
    max-width: 1000px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .contact-container {
    padding-left: 0px;
    padding-right: 0px;
  }
}