@charset "UTF-8";

@font-face {
  font-family: 'h5web';
  src: url('../font/futura-pt-book.ttf') format('woff');
}

@font-face {
  font-family: 'h5web00';
  src: url('../font/samsungsharpsans-bold_v2.woff2') format('woff');
}

:root {
  --page-space: 1.25rem;
  --corner-size: clamp(5.5rem, 9vw, 8.5rem);
  --corner-size-scroll: clamp(4rem, 6.5vw, 6.1rem);

  --blue: #044396;
  --black: #1A1A1A;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: #EAEBEF;
}

body {
  margin: 0;
  min-width: 320px;
  color: #fff;
  font-family: Arial, "Helvetica Neue", "Noto Sans JP", sans-serif;
}

button {
  font: inherit;
}


.text008 {
  font-size: 1.15rem;
  line-height:33px;
  margin-top:20px;
  text-align:justify;
}


@media (max-width: 767px) {
  .text008 {
    font-size: 0.8rem;
    line-height:20px;
    margin-top:8px;
  }
}

/* ========================================
   Header
======================================== */

.site-header {
  padding: 1.25rem;

  position: fixed;
  z-index: 10;

  top: var(--page-space);
  right: var(--page-space);
  left: var(--page-space);

  display: flex;
  justify-content: space-between;

  pointer-events: auto;

  transition:
    top .45s cubic-bezier(.22, 1, .36, 1),
    left .45s cubic-bezier(.22, 1, .36, 1),
    right .45s cubic-bezier(.22, 1, .36, 1);
}

.site-logo,
.menu-button {
  width: var(--corner-size);
  height: var(--corner-size);

  pointer-events: auto;

  transition:
    width .5s cubic-bezier(.22, 1, .36, 1),
    height .5s cubic-bezier(.22, 1, .36, 1),
    padding .5s cubic-bezier(.22, 1, .36, 1),
    border-radius .5s cubic-bezier(.22, 1, .36, 1);
}


/* ========================================
   Logo
======================================== */

.site-logo {
  display: grid;
  place-items: center;

  padding: clamp(.2rem, 1.8vw, 0rem);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  border-radius: clamp(1rem, 1.0vw, 2rem);
}

.site-logo img {
  display: block;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}


/* ========================================
   Menu
======================================== */

.menu-button {
  display: grid;
  align-content: center;
  justify-items: center;

  gap: .52rem;
  

  color: #fff;
  cursor: pointer;
padding: 1rem;
  background: rgb(1 1 1 / 88%);
    border-radius: clamp(1rem, 1.0vw, 2rem);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  border: 0;

}

.menu-button__line {
  width: min(3.75rem, 55%);
  height: 1.5px;

  background: currentColor;

  transition:
    transform .3s ease,
    opacity .3s ease;
}

.menu-button__text {
  margin-top: .16rem;

  font-size: 1rem;

  transition:
    font-size .45s cubic-bezier(.22, 1, .36, 1),
    margin-top .45s cubic-bezier(.22, 1, .36, 1);
}




/* ========================================
   Header Scroll State
======================================== */

.site-header.is-scrolled {
  top: var(--page-space);
  left: var(--page-space);
  right: var(--page-space);
}

.site-header.is-scrolled .site-logo,
.site-header.is-scrolled .menu-button {
  width: var(--corner-size-scroll);
  height: var(--corner-size-scroll);
}


/* Logo Scroll */

.site-header.is-scrolled .site-logo {
  padding: clamp(.65rem, 1.2vw, 0.1rem);

  border-radius:
    clamp(.8rem, .8vw, 1.4rem);
}


/* Menu Scroll */

.site-header.is-scrolled .menu-button {
  padding: .7rem;

  gap: .3rem;

  border-radius:
    clamp(.8rem, .8vw, 1.4rem);
}

.site-header.is-scrolled .menu-button__text {
  margin-top: .16rem;
  font-size: .86rem;
}


/* ========================================
   Hero
======================================== */

.hero {
  position: relative;

  min-height:
    calc(100dvh - (var(--page-space) * 2));

  margin: var(--page-space);

  overflow: hidden;

  border-radius:
    clamp(1rem, 1.0vw, 2rem);
}


/* ========================================
   Hero Slides
======================================== */

.hero__slides {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  transition: opacity .9s ease;
}

.hero__slide.is-active {
  opacity: 1;
}


/* ========================================
   Responsive Image
   PC / SP 独立图片
======================================== */

.hero__slide picture {
  display: block;

  width: 100%;
  height: 100%;
}

.hero__slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* ========================================
   Hero Overlay
======================================== */

.hero::after {
  position: absolute;
  inset: 0;

  pointer-events: none;

  content: "";

  background:
    linear-gradient(
      180deg,
      transparent 38%,
      rgb(0 0 0 / 8%) 56%,
      rgb(0 0 0 / 60%) 100%
    );
}


/* ========================================
   Hero Copy
======================================== */

.hero__copy {
  position: absolute;
  z-index: 2;

  right: clamp(1.25rem, 5vw, 6rem);
  bottom: clamp(4rem, 9vw, 8rem);
  left: clamp(1.25rem, 5vw, 6rem);

  display: grid;
  justify-items: start;

  gap: .45rem;
}

.hero__copy-en,
.hero__copy-ja,
.hero__copy-ja span {
  margin: 0;

  font-weight: 600;
  line-height: 1.08;

  opacity: 0;

  transform: translateY(-1.1em);

  animation:
    reveal-down
    1.2s
    cubic-bezier(.22, 1, .36, 1)
    forwards;
}

.hero__copy-ja span {
  line-height: 1.28;
}

.hero__copy-en {
  max-width: 14ch;

  font-size: clamp(3rem, 8.3vw, 10rem);
  letter-spacing: -.055em;

  animation-delay: .4s;
}

.hero__copy-ja {
  padding: .16em .35em .22em;

  font-size: clamp(1.25rem, 3.25vw, 4.2rem);
  letter-spacing: .04em;

  background: var(--blue);

  animation-delay: .95s;
}

.hero__copy-ja span {
  display: block;

  color: #fff;

  animation-delay: 1.4s;
}


/* ========================================
   Pagination
======================================== */

.hero__pagination {
  position: absolute;
  z-index: 3;

  bottom: 1.75rem;
  left: 50%;

  display: flex;

  gap: .65rem;

  transform: translateX(-50%);
}

.hero__dot {
  width: .62rem;
  height: .62rem;

  padding: 0;

  cursor: pointer;

  background: rgb(255 255 255 / 50%);

  border: 0;
  border-radius: 50%;

  transition:
    background-color .25s ease,
    transform .25s ease;
}

.hero__dot.is-active {
  background: #fff;

  transform: scale(1.25);
}


/* ========================================
   Animation
======================================== */

@keyframes reveal-down {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

  :root {
    --page-space: .5rem;

    --corner-size: 4.75rem;
    --corner-size-scroll: 3.65rem;
  }


  /* ====================================
     Header
  ==================================== */

  .site-header {
    padding: .5rem;
  }


  /* ====================================
     Hero
  ==================================== */

  .hero {
    min-height:
      calc(100svh - (var(--page-space) * 2));

    border-radius: .85rem;
  }


  /* ====================================
     Logo
  ==================================== */

  .site-logo {
    padding: .85rem;

    border-radius: .85rem;
  }


  /* ====================================
     Menu
  ==================================== */

  .menu-button {
    gap: .3rem;

    border-radius: .85rem;
  }

  .menu-button__text {
    font-size: .55rem;
  }


  /* ====================================
     Mobile Scroll
  ==================================== */

  .site-header.is-scrolled .site-logo {
    padding: .6rem;

    border-radius: .7rem;
  }

  .site-header.is-scrolled .menu-button {
    padding: .55rem;

    gap: .24rem;

    border-radius: .7rem;
  }

  .site-header.is-scrolled .menu-button__text {
    margin-top: .3rem;

    font-size: .48rem;
  }


  /* ====================================
     Hero Copy
  ==================================== */

  .hero__copy {
    right: 1.25rem;
    bottom: 4rem;
    left: 1.25rem;

    gap: .35rem;
  }

  .hero__copy-en {
    max-width: 9ch;

    font-size:
      clamp(3rem, 12vw, 5.5rem);
  }

  .hero__copy-ja {
    font-size:
      clamp(1rem, 6.5vw, 1.65rem);
  }


  /* ====================================
     Pagination
  ==================================== */

  .hero__pagination {
    bottom: 1.35rem;
  }
}


/* ========================================
   Reduced Motion
======================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: .01ms !important;

    transition-duration: .01ms !important;
  }
}


.br-pc {
  display: block;
}

.br-sp {
  display: none;
}


@media (max-width: 767px) {

  .br-pc {
    display: none;
  }

  .br-sp {
    display: block;
  }

}
/* ========================================
   Full Screen Menu
======================================== */

.global-menu {
  position: fixed;
  z-index: 10;

  inset: 0;

  width: 100%;
  height: 100dvh;

  overflow-y: auto;

  background: var(--blue);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .5s;
}


/* ========================================
   Menu Open
======================================== */

.global-menu.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
}


/* ========================================
   Menu Inner
======================================== */

.global-menu__inner {
width: min(1200px, calc(100% - 10vw));
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(9rem, 16vh, 12rem) 0 clamp(4rem, 8vh, 6rem);
    display: grid;
    grid-template-columns: 1fr 1.65fr 1.45fr .95fr;
    /*column-gap: clamp(3rem, 6vw, 7rem);*/
    align-items: start;
    align-content: space-evenly;
}


/* ========================================
   Menu Columns
======================================== */

.global-menu__column {

  display: flex;

  flex-direction: column;

  gap:
    clamp(2.5rem, 5vh, 4rem);

}


/* ========================================
   Menu Block
======================================== */

.global-menu__block {

  display: block;

  color: #fff;

  text-decoration: none;

  opacity: 0;

  transform:
    translateY(1.5rem);

  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1);

}


/* ========================================
   Open Animation
======================================== */

.global-menu.is-open
.global-menu__block,

.global-menu.is-open
.global-menu__entry {

  opacity: 1;

  transform:
    translateY(0);

}


/* ========================================
   Menu English Label
======================================== */

.global-menu__en {

  display: block;

  margin-bottom: .25rem;

  font-size: .72rem;

  font-weight: 600;

  line-height: 1;

  letter-spacing: .02em;

}


/* ========================================
   Menu Title
======================================== */

.global-menu__title {

  display: block;

  font-size:
    clamp(1.4rem, 2vw, 2rem);

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: .02em;

}


/* ========================================
   Heading
======================================== */

.global-menu__heading {

  display: block;

  color: #fff;

  text-decoration: none;

}


/* ========================================
   Sub Links
======================================== */

.global-menu__links {

  display: grid;

  gap: .85rem;

  margin-top: 1.4rem;

}


.global-menu__links a {

  display: block;

  color: #fff;

  font-size: 1.5rem;

  font-weight: 500;

  line-height: 1.5;

  text-decoration: none;

  transition:
    opacity .25s ease;

}


.global-menu__links a:hover {

  opacity: .65;

}


/* ========================================
   Entry Button
======================================== */

.global-menu__entry {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 300px;

  min-height: 7rem;

  padding: 1.5rem;

  color: var(--blue);

  text-align: center;

  text-decoration: none;

  background: #fff;

  border-radius: .5rem;

  opacity: 0;

  transform:
    translateY(1.5rem);

  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1),
    background-color .25s ease;

}


.global-menu__entry:hover {

  background: #f2f2f2;

}


.global-menu__entry-en {

  display: block;

  margin-bottom: .35rem;

  font-size: .85rem;

  font-weight: 600;

  line-height: 1.5;

  margin-top: 20px;

}


.global-menu__entry-title {

  display: block;

  font-size: 1.35rem;

  font-weight: 600;

  line-height: 1.2;

}


/* ========================================
   Animation Delay
======================================== */

.global-menu.is-open
.global-menu__column--01
.global-menu__block:nth-child(1) {

  transition-delay: .12s;

}


.global-menu.is-open
.global-menu__column--02
.global-menu__block {

  transition-delay: .22s;

}


.global-menu.is-open
.global-menu__column--03
.global-menu__block {

  transition-delay: .28s;

}


.global-menu.is-open
.global-menu__entry {

  transition-delay: .46s;

}



/* ========================================
   Body Lock
======================================== */

body.menu-open {

  overflow: hidden;

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {


  /* ====================================
     Full Screen Menu
  ==================================== */

  .global-menu {

    height: 100svh;

  }

  .global-menu__entry{width: 100%}


  /* ====================================
     Menu Inner
  ==================================== */

  .global-menu__inner {

    width: auto;

    min-height: 100%;

    margin: 0;

    padding:
      7rem
      1.5rem
      3rem;

    display: flex;

    flex-direction: column;

    gap: 0;

    align-items: stretch;

  }


  /* ====================================
     Columns
  ==================================== */

  .global-menu__column {

    gap: 1.8rem;

  }


  /* ====================================
     Menu Block
  ==================================== */

  .global-menu__block {

    padding-bottom: 1.5rem;

    border-bottom:
      1px solid
      rgb(255 255 255 / 35%);

  }


  /* ====================================
     English Label
  ==================================== */

  .global-menu__en {

    margin-bottom: .3rem;

    font-size: .62rem;

  }


  /* ====================================
     Japanese Title
  ==================================== */

  .global-menu__title {

    font-size: 1.45rem;

  }


  /* ====================================
     Work Links
  ==================================== */

  .global-menu__links {

    gap: .65rem;

    margin-top: 1rem;

  }


  .global-menu__links a {

    font-size: 1.15rem;

  }


  /* ====================================
     Mobile Column Order
  ==================================== */

  .global-menu__column--01 {

    order: 1;

  }


  .global-menu__column--02 {

    order: 2;

    margin-top: 1.8rem;

  }


  .global-menu__column--03 {

    order: 3;

    margin-top: 1.8rem;

  }


  .global-menu__column--04 {

    order: 4;

    margin-top: 1.8rem;

  }


  /* ====================================
     Entry
  ==================================== */

  .global-menu__entry {

    min-height: 5rem;

    padding: 1rem;

    border-radius: .65rem;

  }


  .global-menu__entry-title {

    font-size: 1.15rem;

  }


  /* ====================================
     Close Button
  ==================================== */

  .menu-button[aria-expanded="true"] {

    border-radius: .85rem;

  }

}


/* ========================================
   Global Menu Close Button
======================================== */

.global-menu__close {
  position: fixed;
  z-index: 2;
  top: var(--page-space);
  right: var(--page-space);

  width: var(--corner-size);
  height: var(--corner-size);

  display: grid;
  place-items: center;

margin: 1.25rem 1.25rem 0 0;
  border: 0;
padding: 1rem;
  background: rgb(255 255 255 / 100%);
    border-radius: clamp(1rem, 1.0vw, 2rem);
  cursor: pointer;
}

.global-menu__close span {
  position: absolute;
  width: 4.5rem;
  height: 1.52px;
  background: #044396;
}

.global-menu__close span:first-child {
  transform: rotate(45deg);
}

.global-menu__close span:last-child {
  transform: rotate(-45deg);
}


@media (max-width: 767px) {
  .global-menu__close {
    width: var(--corner-size);
    height: var(--corner-size);
    border-radius: .85rem;
    margin: 0.5rem 0.5rem 0 0;
  }

  .global-menu__close span {
    width: 1.8rem;
  }
}




/* ========================================
   About Section
======================================== */

.about-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #e9ebf0;
  color: #222;
}


/* ----------------------------------------
   Inner
---------------------------------------- */

.about-section__inner {
  position: relative;
  z-index: 2;
  width: min(1250px, calc(100% - 8vw));
  min-height: 100vh;
  margin: 0 auto;
  padding: 6.5vw 0 8vw;
}


/* ----------------------------------------
   Background Logo
---------------------------------------- */

.about-section__logo {
  position: absolute;
  z-index: 1;
  top: 6vw;
  right: 18vw;
  width: min(38vw, 650px);
  pointer-events: none;
  user-select: none;
  opacity: 0.08;
}

.about-section__logo img {
  display: block;
  width: 100%;
  height: auto;
}


/* ----------------------------------------
   Heading
---------------------------------------- */

.about-section__heading {
  position: relative;
  z-index: 3;
}


/* Main Title */

.about-section__title,
.about-section__subtitle {
  margin: 0;
  padding: 0;
  font-weight: 600;
}


/* Blue Background Text */

.about-section__title-line,
.about-section__subtitle .about-section__title-line {
  display: table;
  width: fit-content;
  max-width: 100%;
  color: #fff;
  background: #044396;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* Main title */

.about-section__title {
  font-size: clamp(2.6rem, 2.85vw, 5.2rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.about-section__title-line {
  padding: 0.04em 0.08em 0.08em;
}


/* Subtitle */

.about-section__subtitle {
  margin-top: 2vw;
  font-size: clamp(2.6rem, 2.75vw, 5.2rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.about-section__subtitle .about-section__title-line {
  padding: 0.04em 0.08em 0.08em;
}


/* ----------------------------------------
   Body Text
---------------------------------------- */

.about-section__text {
  position: relative;
  z-index: 3;
  width: min(850px, 100%);
  margin-top: 4vw;
  font-size: clamp(1rem, 1.08vw, 1.35rem);
  line-height: 2;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.about-section__text p {
  margin: 0 0 1.35em;
}

.about-section__text p:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------
   Scroll Reveal
---------------------------------------- */

.about-section__heading,
.about-section__text {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(.22, 1, .36, 1);
}


/* Heading appears first */

.about-section.is-visible .about-section__heading {
  opacity: 1;
  transform: translateY(0);
}


/* Body appears slightly later */

.about-section__text {
  transition-delay: 0.25s;
}

.about-section.is-visible .about-section__text {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------
   Reduced Motion
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .about-section__heading,
  .about-section__text {
    opacity: 1;
    transform: none;
    transition: none;
  }

}


/* ========================================
   SP
======================================== */

@media (max-width: 767px) {

  .about-section {
    min-height: auto;
  }

  .about-section__inner {
    width: calc(100% - 2rem);
    min-height: auto;
    padding: 5rem 0 6rem;
  }


  /* Background Logo */

  .about-section__logo {
    top: 5rem;
    right: -5rem;
    width: 22rem;
    opacity: 0.07;
  }


  /* Heading */

  .about-section__title {
    font-size: clamp(1.6rem, 0vw, 3.2rem);
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  .about-section__subtitle {
    margin-top: 1.2rem;
    font-size: clamp(1.4rem, 0vw, 3.2rem);
    line-height: 1.18;
  }

  .about-section__title-line,
  .about-section__subtitle .about-section__title-line {
    padding: 0.05em 0.1em 0.08em;
  }


  /* Text */

  .about-section__text {
    width: 100%;
    margin-top: 3rem;
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.01em;
  }

  .about-section__text p {
    margin-bottom: 1.5rem;
  }

}





/* ========================================
   Feature Section
======================================== */

.feature-section {
  position: relative;
  width: 100%;
  padding: 0vw 0 10vw;
  overflow: hidden;
  background: #e9ebf0;
}


/* ----------------------------------------
   Viewport
---------------------------------------- */

.feature-section__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}


/* ----------------------------------------
   Track
---------------------------------------- */

.feature-section__track {
  display: flex;
  width: max-content;
  gap: 0.55rem;
  align-items: stretch;

  will-change: transform;
}


/* ----------------------------------------
   Card
---------------------------------------- */

.feature-card {
  flex: 0 0 clamp(15rem, 11.2vw, 21.5rem);
  height: clamp(18rem, 14.7vw, 28.2rem);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 4.5rem 1.25rem 2rem;

  background: #fff;
  border-radius: 0.65rem;

  text-align: center;
  box-sizing: border-box;
}


/* ----------------------------------------
   Icon
---------------------------------------- */

.feature-card__icon {
  width: clamp(3.8rem, 4vw, 6rem);
  height: clamp(3.8rem, 4vw, 6rem);

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 2rem;
}

.feature-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ----------------------------------------
   Title
---------------------------------------- */

.feature-card__title {
  margin: 0;

  /*font-size: clamp(0.95rem, 0.92vw, 1.35rem);*/
  font-size: clamp(1rem, 1.08vw, 1.35rem);
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 0.02em;

  color: #222;
}


/* ----------------------------------------
   Note
---------------------------------------- */

.feature-card__note {
  margin: 0.6rem 0 0;

  font-size: clamp(0.55rem, 0.48vw, 0.75rem);
  line-height: 1.5;
  font-weight: 400;

  color: #333;
}




/* ========================================
   Feature Section - SP Static Grid
======================================== */

@media (max-width: 767px) {

  .feature-section {
    padding: 0rem 1rem 8rem;
    overflow: hidden;
  }

  .feature-section__viewport {
    width: 100%;
    overflow: visible;
  }

  .feature-section__track {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;

    transform: none !important;
    transition: none !important;
  }

  .feature-card {
    width: 100%;
    min-width: 0;
    height: 14rem;

    padding: 2rem 0.75rem;

    border-radius: 0.7rem;
  }

  .feature-card__icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.8rem;
    flex-shrink: 0;
  }

  .feature-card__title {
    font-size: 1rem;
    line-height: 1.55;
    letter-spacing: 0;
  }

  .feature-card__note {
    margin-top: 0.65rem;
    font-size: 0.58rem;
    line-height: 1.5;
  }

}








/* ========================================
   Work Section
======================================== */

.work-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  background: #e9ebf0;
  color: #222;
}


/* ----------------------------------------
   Inner
---------------------------------------- */

.work-section__inner {
  position: relative;
  z-index: 2;

  width: min(1250px, calc(100% - 8vw));
  margin: 0 auto;

  padding: 0vw 0 10vw;
}


/* ----------------------------------------
   Heading
---------------------------------------- */

.work-section__heading {
  margin-bottom: 3.5vw;
}

.work-section__label {
  display: flex;
  align-items: center;

  margin: 0 0 0.35rem;

  font-size: clamp(0.9rem, 1vw, 1.2rem);
  line-height: 1.4;
  font-weight: 600;

  letter-spacing: 0.04em;
}

.work-section__label span {
  width: 0.35rem;
  height: 0.35rem;

  margin-right: 0.7rem;

  background: #044396;
  border-radius: 50%;
}

.work-section__title {
  margin: 0;

  font-size: clamp(4rem, 5.2vw, 6.8rem);
  line-height: 0.95;

  font-weight: 600;
  /*letter-spacing: -0.045em;*/

  color: #171717;
}


/* ----------------------------------------
   Work List
---------------------------------------- */

.work-list {
  display: flex;
  flex-direction: column;

  gap: 1.35rem;
}


/* ----------------------------------------
   Work Card
---------------------------------------- */

.work-card {
  position: relative;

  display: grid;
  grid-template-columns: 45% 55%;

  width: 100%;
  min-height: 22rem;

  padding: 0.85rem;

  overflow: hidden;

  background: #fff;
  border-radius: 0.65rem;

  color: #222;
  text-decoration: none;

  box-sizing: border-box;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}


/* ----------------------------------------
   Image
---------------------------------------- */

.work-card__image {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 20rem;

  overflow: hidden;

  border-radius: 0.45rem;
}

.work-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform 0.8s cubic-bezier(.22, 1, .36, 1);
}


/* ----------------------------------------
   Content
---------------------------------------- */

.work-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 3rem 5rem 3rem 3.5rem;

  box-sizing: border-box;
}


/* English Label */

.work-card__en {
  margin: 0 0 1rem;

  font-size: clamp(0.75rem, 0.75vw, 1rem);
  line-height: 1.2;

  font-weight: 600;

  color: #999;
}


/* Title */

.work-card__title {
  margin: 0 0 1.5rem;

  font-size: clamp(1.8rem, 1.85vw, 2.8rem);
  line-height: 1.3;

  font-weight: 600;
  letter-spacing: 0.015em;

  color: #044396;
}


/* Description */

.work-card__text {
  max-width: 38rem;

  margin: 0;

  /*font-size: clamp(0.85rem, 0.85vw, 1.1rem);*/
  font-size: clamp(1rem, 1.08vw, 1.35rem);
  line-height: 1.75;

  font-weight: 500;
  letter-spacing: 0.015em;

  color: #222;
}


/* ----------------------------------------
   Arrow
---------------------------------------- */

.work-card__arrow {
  position: absolute;

  right: 1rem;
  bottom: 1rem;

  width: 2.8rem;
  height: 2.8rem;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #044396;
  border-radius: 0.35rem;

  color: #fff;

  overflow: hidden;

  z-index: 3;

  transition:
    transform 0.35s ease,
    background-color 0.35s ease;
}

.work-card__arrow span {
  display: block;

  font-size: 1.45rem;
  line-height: 1;

  transform: translateX(0);

  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1);
}


/* ----------------------------------------
   Hover
---------------------------------------- */

.work-card:hover {
  transform: translateY(-3px);
}

.work-card:hover .work-card__image img {
  transform: scale(1.08);
}

.work-card:hover .work-card__arrow {
  transform: translateY(-2px);
}

.work-card:hover .work-card__arrow span {
  transform: translateX(0.18rem);
}


/* ----------------------------------------
   Focus
---------------------------------------- */

.work-card:focus-visible {
  outline: 3px solid #044396;
  outline-offset: 4px;
}


/* ----------------------------------------
   Reduced Motion
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .work-card,
  .work-card__image img,
  .work-card__arrow,
  .work-card__arrow span {
    transition: none;
  }

}






/* ========================================
   Work Section - SP
======================================== */

@media (max-width: 767px) {

  .work-section {
    min-height: auto;
  }


  .work-section__inner {
    width: calc(100% - 2rem);

    padding: 0rem 0 8rem;
  }


  /* ----------------------------------------
     Heading
  ---------------------------------------- */

  .work-section__heading {
    margin-bottom: 2.5rem;
  }

  .work-section__label {
    margin-bottom: 0.35rem;

    font-size: 0.9rem;
  }

  .work-section__label span {
    width: 0.3rem;
    height: 0.3rem;

    margin-right: 0.55rem;
  }

  .work-section__title {
    font-size: 4rem;
  }


  /* ----------------------------------------
     List
  ---------------------------------------- */

  .work-list {
    gap: 1rem;
  }


  /* ----------------------------------------
     Card
  ---------------------------------------- */

  .work-card {

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: auto;

    padding: 0.6rem;

    border-radius: 0.7rem;

  }


  /* ----------------------------------------
     Image
  ---------------------------------------- */

  .work-card__image {

    width: 100%;
    height: auto;
    min-height: 0;

    aspect-ratio: 16 / 9;

    border-radius: 0.45rem;

  }

  .work-card__image img {
    width: 100%;
    height: 100%;
  }


  /* ----------------------------------------
     Content
  ---------------------------------------- */

  .work-card__content {

    display: block;

    padding: 1.5rem 1.25rem 3.5rem;

  }


  .work-card__en {

    margin-bottom: 0.65rem;

    font-size: 0.7rem;

  }


  .work-card__title {

    margin-bottom: 1rem;

    font-size: 1.35rem;
    line-height: 1.4;

  }


  .work-card__text {

    font-size: 1rem;
    line-height: 1.75;

  }


  /* ----------------------------------------
     Arrow
  ---------------------------------------- */

  .work-card__arrow {

    right: 0.75rem;
    bottom: 0.75rem;

    width: 2.5rem;
    height: 2.5rem;

    border-radius: 0.3rem;

  }

  .work-card__arrow span {
    font-size: 1.25rem;
  }


  /* ----------------------------------------
     Hover on Touch Device
  ---------------------------------------- */

  .work-card:hover {
    transform: none;
  }

  .work-card:hover .work-card__image img {
    transform: none;
  }

  .work-card:hover .work-card__arrow {
    transform: none;
  }

  .work-card:hover .work-card__arrow span {
    transform: none;
  }

}







/* ========================================
   Company Section
======================================== */

.company-section {
  position: relative;
  width: 100%;

  background: #181818;
  color: #fff;

  overflow: hidden;
}


.company-section__inner {
  width: min(1250px, calc(100% - 8vw));

  margin: 0 auto;

  padding: 8vw 0 4vw;
}


/* ----------------------------------------
   Heading
---------------------------------------- */

.company-section__heading {
  margin-bottom: 4vw;
}


.company-section__label {
  display: flex;
  align-items: center;

  margin: 0 0 0.5rem;

  font-size: clamp(0.9rem, 1vw, 1.2rem);
  line-height: 1.4;

  font-weight: 700;
  letter-spacing: 0.04em;

  color: #d5dce6;
}


.company-section__label span {
  width: 0.35rem;
  height: 0.35rem;

  margin-right: 0.7rem;

  background: #999;;

  border-radius: 50%;
}


.company-section__title {
  margin: 0;

  font-size: clamp(4rem, 5.2vw, 6.8rem);
  line-height: 0.95;

  font-weight: 700;

  /*letter-spacing: -0.045em;*/

  color: #fff;
}


/* ----------------------------------------
   Company List
---------------------------------------- */

.company-list {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3.5rem;
}


/* ----------------------------------------
   Company Item
---------------------------------------- */

.company-item {
  position: relative;

  display: grid;

  grid-template-columns: 1fr 12rem;

  gap: 2rem;

  min-height: 20rem;

  padding-bottom: 0.2rem;

  border-right: 0;
}


/* 两个 Company 内容之间的分隔线 */
.company-item:first-child::after {
  content: "";

  position: absolute;

  top: 0;
  right: -1.85rem;

  width: 1px;
  height: 100%;

  background: rgb(255 255 255 / 25%);
}


.company-item:last-child {
  border-right: 0;
}


/* ----------------------------------------
   Content
---------------------------------------- */

.company-item__content {
  display: flex;

  flex-direction: column;

  justify-content: flex-start;
}


.company-item__title {
  margin: 0 0 2rem;

  font-size: clamp(1.8rem, 2vw, 2.7rem);
  line-height: 1.3;

  font-weight: 700;

  letter-spacing: 0.02em;

  color: #fff;
}


.company-item__text {
  margin: 0;

  /*font-size: clamp(0.85rem, 0.9vw, 1.1rem);*/
  font-size: clamp(1rem, 1vw, 1.35rem);
  line-height: 1.9;

  font-weight: 500;

  letter-spacing: 0.015em;

  color: #fff;
}


/* ----------------------------------------
   Image
---------------------------------------- */

.company-item__image {
  position: relative;

  width: 100%;
  aspect-ratio: 0.78;

  overflow: visible;
}


.company-item__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 0.55rem;
}


/* ----------------------------------------
   Vertical Label
---------------------------------------- */

.company-item__vertical {
  position: absolute;

  top: 0.3rem;
  right: -1.2rem;

  writing-mode: vertical-rl;

  font-size: 0.8rem;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.04em;

  color: #fff;
}


/* ----------------------------------------
   Arrow
---------------------------------------- */

.company-item__arrow {
  position: absolute;

  right: 0;
  bottom: 0;

  width: 2rem;
  height: 2rem;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #044396;

  border-radius: 0.2rem;

  font-size: 1.1rem;
  line-height: 1;

  color: #fff;
}









/* ========================================
   Company Section - SP
======================================== */

@media (max-width: 767px) {

  .company-section__inner {
    width: calc(100% - 2rem);

    padding: 6rem 0 3rem;
  }


  /* Heading */

  .company-section__heading {
    margin-bottom: 3rem;
  }

  .company-section__label {
    font-size: 0.9rem;
  }

  .company-section__title {
    font-size: 4rem;
  }


  /* List */

  .company-list {
    display: flex;

    flex-direction: column;

    gap: 3rem;
  }


  /* Item */

  .company-item {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.5rem;

    min-height: auto;

    padding: 0 0 3rem;

    border-right: 0;

    border-bottom: 1px solid rgb(255 255 255 / 25%);
  }


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


  /* Image first */

  .company-item__image {
    order: -1;

    width: 100%;

    aspect-ratio: 16 / 10;
  }


  .company-item__title {
    margin-bottom: 1.2rem;

    font-size: 1.7rem;
  }


  .company-item__text {
    font-size: 1rem;
    line-height: 1.75;
  }


  .company-item__vertical {
    top: 0.4rem;
    right: -1rem;

    font-size: 0.8rem;
  }


  .company-item__arrow {
    right: 0;
    bottom: 3rem;

    width: 2.4rem;
    height: 2.4rem;
  }

}







/* ========================================
   Access Section
======================================== */

.access-section {
  position: relative;

  width: 100%;

  background: #181818;

  color: #fff;

  overflow: hidden;
}


.access-section__inner {
  width: min(1250px, calc(100% - 8vw));

  margin: 0 auto;

  padding: 5vw 0 8vw;
}


/* Heading */

.access-section__heading {
  margin-bottom: 3.5vw;
}


.access-section__label {
  display: flex;
  align-items: center;

  margin: 0 0 0.5rem;

  font-size: clamp(0.9rem, 1vw, 1.2rem);

  font-weight: 700;

  color: #d5dce6;
}


.access-section__label span {
  width: 0.35rem;
  height: 0.35rem;

  margin-right: 0.7rem;

  background: #044396;

  border-radius: 50%;
}


.access-section__title {
  margin: 0;

  font-size: clamp(4rem, 5.2vw, 6.8rem);
  line-height: 0.95;

  font-weight: 700;

  /*letter-spacing: -0.045em;*/
}


/* List */

.access-list {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;
}


/* Item */

.access-item {
  position: relative;
}


.access-item__heading {
  display: flex;
  align-items: center;

  gap: 1rem;

  margin-bottom: 1.3rem;
}


.access-item__number {
  font-size: 0.75rem;

  color: #999;;
}


.access-item__heading h3 {
  margin: 0;

  font-size: clamp(1.5rem, 1.8vw, 2.2rem);

  font-weight: 700;
}


/* Map */

.access-item__map {
  width: 100%;

  aspect-ratio: 16 / 8.5;

  overflow: hidden;

  border-radius: 0.5rem;
}


.access-item__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;

  filter: grayscale(100%);
}


/* Address */

.access-item__address {
  margin-top: 1rem;

  font-style: normal;

  font-size: 0.85rem;

  line-height: 1.7;

  color: #d9d9d9;
}









@media (max-width: 767px) {

  .access-section__inner {
    width: calc(100% - 2rem);

    padding: 4rem 0 5rem;
  }


  .access-section__heading {
    margin-bottom: 3rem;
  }


  .access-section__title {
    font-size: 4rem;
  }


  .access-list {
    display: flex;

    flex-direction: column;

    gap: 3rem;
  }


  .access-item__heading h3 {
    font-size: 1.5rem;
  }


  .access-item__map {
    aspect-ratio: 16 / 10;
  }

}






/* ========================================
   Reservation Section
======================================== */

.reservation-section {
  position: relative;

  width: 100%;

  padding: 0 0 7vw;

  background: #181818;

  overflow: hidden;
}


.reservation-box {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  width: min(1280px, calc(100% - 8vw));

  min-height: 16rem;

  margin: 0 auto;

  border: 1px solid rgb(255 255 255 / 60%);

  border-radius: 0.65rem;

  text-decoration: none;

  color: #fff;

  overflow: hidden;

  transition:
    border-color 0.35s ease,
    background-color 0.35s ease;
}


.reservation-box__label {
  display: flex;

  align-items: center;

  gap: 1.2rem;

  margin: 0 0 1.3rem;

  font-size: clamp(0.9rem, 1vw, 1.2rem);

  font-weight: 700;
}


.reservation-box__label span {
  width: 0.3rem;
  height: 0.3rem;

  background: #044396;

  border-radius: 50%;
}


.reservation-box__title {
  margin: 0;

  font-size: clamp(4rem, 5.2vw, 6.8rem);

  line-height: 0.95;

  font-weight: 700;

  /*letter-spacing: -0.045em;*/

  color: #fff;
}


.reservation-box:hover {
  border-color: #fff;

  background: rgb(255 255 255 / 3%);
}


@media (max-width: 767px) {

  .reservation-section {
    padding: 0 0 4rem;
  }


  .reservation-box {
    width: calc(100% - 2rem);

    min-height: 12rem;

    border-radius: 0.6rem;
  }


  .reservation-box__label {
    gap: 0.7rem;

    margin-bottom: 0.9rem;

    font-size: 0.8rem;
  }


  .reservation-box__title {
    font-size: 3.5rem;
  }

}






/* ========================================
   Footer
======================================== */

.site-footer {
  position: relative;

  width: 100%;

  background: #181818;

  color: #fff;

  overflow: hidden;
}


.site-footer__inner {
  position: relative;

  width: min(1250px, calc(100% - 8vw));

  min-height: 38rem;

  margin: 0 auto;

  padding: 5vw 0 2rem;

  box-sizing: border-box;
}


/* ----------------------------------------
   Company
---------------------------------------- */

.site-footer__company {
  width: 42%;
}


.site-footer__company-name {
  margin: 0 0 0.6rem;

  font-size: 1.15rem;

  font-weight: 700;
}


.site-footer__company p {
  margin: 0;

  font-size: 0.85rem;

  line-height: 1.65;

  color: #d0d0d0;
}


.site-footer__logo {
  width: 8rem;

  margin-top: 4rem;
}


.site-footer__logo img {
  display: block;

  width: 100%;
  height: auto;
}


/* ----------------------------------------
   Navigation
---------------------------------------- */

.site-footer__nav {
  position: absolute;

  top: 5vw;
  right: 0;

  display: grid;

  grid-template-columns:
    6rem
    15rem
    9rem;

  gap: 4rem;
}


.site-footer__nav-column {
  display: flex;

  flex-direction: column;

  gap: 1rem;
}


.site-footer__nav-column a {
  color: #fff;

  text-decoration: none;

  font-size: 1rem;

  line-height: 1.5;

  font-weight: 500;

  transition: opacity 0.3s ease;
}


.site-footer__nav-column a:hover {
  opacity: 0.6;
}


/* ----------------------------------------
   Bottom
---------------------------------------- */

.site-footer__bottom {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 2rem;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 2rem;
}


.site-footer__bottom a {
  color: #fff;

  font-size: 0.8rem;

  text-decoration: underline;
}


.site-footer__bottom p {
  position: absolute;

  left: 0;
  bottom: 0;

  margin: 0;

  font-size: 0.65rem;

  color: #999;
}









@media (max-width: 767px) {

  /* ================================
     Footer Inner
  ================================ */

  .site-footer__inner {
    width: calc(100% - 2rem);
    min-height: auto;
    padding: 4rem 0 2rem;
  }


  /* ================================
     Company
  ================================ */

  .site-footer__company {
    width: 100%;
  }

  .site-footer__company-name {
    font-size: 1.1rem;
  }

  .site-footer__company p {
    font-size: 0.75rem;
    line-height: 1.7;
  }

  .site-footer__logo {
    width: 7rem;
    margin: 3rem 0 4rem;
  }


  /* ================================
     Navigation
  ================================ */

  .site-footer__nav {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .site-footer__nav-column {
    gap: 0.8rem;
  }

  .site-footer__nav-column a {
    font-size: 0.75rem;
  }


  /* ================================
     Bottom
  ================================ */

  .site-footer__bottom {
    position: static;

    display: flex;
    flex-wrap: wrap;

    justify-content: flex-start;

    gap: 1rem;

    margin-top: 4rem;
  }

  .site-footer__bottom a {
    font-size: 0.7rem;
  }

  .site-footer__bottom p {
    position: static;

    width: 100%;

    margin-top: 1rem;

    font-size: 0.6rem;
  }

}















/* ========================================
   Work Page Navigation
======================================== */

.work-page-nav {
  position: relative;
  width: 100%;
  background: #e9ebf0;
  color: #171717;
  overflow: hidden;
}

.work-page-nav__inner {
  width: min(1250px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 8vw 0 4vw;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
}

.work-page-nav__heading {
  flex: 0 0 75%;
  min-width: 0;
}

.work-page-nav__label {
  display: flex;
  align-items: center;

  margin: 0 0 0.5rem;

  font-size: clamp(0.85rem, 1vw, 1.1rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.work-page-nav__label span {
  width: 0.35rem;
  height: 0.35rem;

  margin-right: 0.7rem;

  background: #044396;
  border-radius: 50%;
}

.work-page-nav__title {
  margin: 0;

  font-size: clamp(4rem, 4.8vw, 5.8rem);
  line-height: 1.25;

  font-weight: 700;
  letter-spacing: -0.045em;

  color: #171717;
}


/* Navigation Links */

.work-page-nav__links {
flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding-bottom: 0.5rem;
    flex-direction: column;
}

.work-page-nav__link {
  position: relative;

  display: flex;
  align-items: center;

  gap: 0.65rem;

  padding-bottom: 0.6rem;

  color: #222;
  text-decoration: none;

  font-size: 0.9rem;
  font-weight: 700;

  border-bottom: 1px solid #c5c9d0;

  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.work-page-nav__number {
  font-size: 0.65rem;
  color: #999;;
}

.work-page-nav__link:hover {
  color: #044396;
  border-color: #044396;
}

.work-page-nav__link.is-current {
  color: #044396;
  border-color: #044396;
}


.work-page-nav__name {
  overflow-wrap: anywhere;
  word-break: break-word;
}



/* ========================================
   Work Banner
======================================== */

.work-banner {
  width: 100%;
  background: #e9ebf0;
}

.work-banner__inner {
  width: min(1250px, calc(100% - 8vw));
  margin: 0 auto;
}

.work-banner__image {
  width: 100%;

  aspect-ratio: 21 / 7;

  overflow: hidden;
  border-radius: 0.6rem;
}

.work-banner__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}



/* ========================================
   Work Content
======================================== */

.work-content-section {
  width: 100%;

  background: #e9ebf0;
  color: #222;
}

.work-content-section__inner {
  width: min(1250px, calc(100% - 8vw));
  margin: 0 auto;

  padding: 8vw 0;
}

.work-content-section__heading {
  max-width: 900px;

  margin-bottom: 3.5rem;
}

.work-content-section__label {
  margin: 0 0 0.6rem;

  font-size: clamp(0.8rem, 0.9vw, 1rem);
  line-height: 1.3;

  font-weight: 700;

  color: #044396;
}

.work-content-section__title {
  margin: 0;

  font-size: clamp(2rem, 3vw, 3.8rem);
  line-height: 1.35;

  font-weight: 700;
  letter-spacing: 0.01em;

  color: #171717;
}

.work-content-section__body {
  max-width: 1000px;

  margin-bottom: 4.5rem;
}

.work-content-section__body p {
  margin: 0 0 1.5rem;

  font-size: clamp(1rem, 1.08vw, 1.35rem);
    line-height: 1.75;
    font-weight: 500;
  letter-spacing: 0.015em;
}

.work-content-section__body p:last-child {
  margin-bottom: 0;
}



/* ========================================
   Work Image Grid
======================================== */

.work-image-grid {
  display: grid;

  grid-template-columns: 1.5fr 1fr;

  grid-template-rows: 1fr 1fr;

  gap: 1rem;

  width: 100%;
}

.work-image-grid__item {
  overflow: hidden;

  border-radius: 0.55rem;
}

.work-image-grid__item--large {
  grid-row: 1 / 3;
}

.work-image-grid__item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.work-image-grid__item:hover img {
  transform: scale(1.04);
}



/* ========================================
   Work Details
======================================== */

.work-content-section--details {
  background: #fff;
}

.work-content-section--details
.work-content-section__inner {
  padding-top: 7vw;
  padding-bottom: 8vw;
}

.work-content-section--details
.work-content-section__body {
  max-width: 900px;
  margin-left: auto;
}



/* ========================================
   Work Flow
======================================== */

.work-flow-section {
  width: 100%;

  background: #181818;
  color: #fff;

  overflow: hidden;
}

.work-flow-section__inner {
  width: min(1250px, calc(100% - 8vw));
  margin: 0 auto;

  padding: 8vw 0 10vw 0;
}

.work-flow-section__heading {
  max-width: 900px;

  margin-bottom: 5rem;
}

.work-flow-section__label {
  margin: 0 0 0.6rem;

  font-size: clamp(0.8rem, 0.9vw, 1rem);
  line-height: 1.3;

  font-weight: 700;

  color: #999;;
}

.work-flow-section__title {
  margin: 0 0 1.5rem;

  font-size: clamp(2rem, 3vw, 3.8rem);
  line-height: 1.35;

  font-weight: 700;
}

.work-flow-section__text {
  max-width: 800px;

  margin: 0;

  font-size: clamp(0.85rem, 0.9vw, 1.05rem);
  line-height: 1.9;

  color: #d5d5d5;
}



/* ========================================
   Flow Diagram
======================================== */

.work-flow {
  display: flex;
  align-items: stretch;

  width: 100%;
}

.work-flow__item {
  position: relative;

  flex: 1;

  min-height: 11rem;

  padding: 2rem;

  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 0.5rem;

  box-sizing: border-box;
}

.work-flow__number {
  display: block;

  margin-bottom: 2rem;

  font-size: 0.7rem;
  line-height: 1;

  font-weight: 700;

  color: #999;;
}

.work-flow__content h3 {
  margin: 0 0 0.8rem;

  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  line-height: 1.4;

  font-weight: 700;
}

.work-flow__content p {
  margin: 0;

  font-size: 1rem;
  line-height: 1.7;

  color: #d5d5d5;
}

.work-flow__arrow {
  flex: 0 0 3rem;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.3rem;

  color: #999;;
}












/* ========================================
   Work Page - SP
======================================== */

@media (max-width: 767px) {

  /* ================================
     Work Page Navigation
  ================================ */

  .work-page-nav__inner {
    width: calc(100% - 2rem);

    padding: 4rem 0 2.5rem;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 2.5rem;
  }

  .work-page-nav__label {
    font-size: 0.85rem;
  }

  .work-page-nav__label span {
    width: 0.3rem;
    height: 0.3rem;

    margin-right: 0.55rem;
  }

  .work-page-nav__title {
    font-size: 2.75rem;
    line-height: 1.25;
  }


  /* Work Links */

  .work-page-nav__links {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 0;
  }

  .work-page-nav__link {
    width: 100%;

    justify-content: space-between;

    padding: 1rem 0;

    font-size: 0.85rem;

    box-sizing: border-box;
  }

  .work-page-nav__number {
    font-size: 0.6rem;
  }



  /* ================================
     Banner
  ================================ */

  .work-banner__inner {
    width: calc(100% - 2rem);
  }

  .work-banner__image {
    aspect-ratio: 16 / 8;

    border-radius: 0.5rem;
  }



  /* ================================
     Work Content
  ================================ */

  .work-content-section__inner {
    width: calc(100% - 2rem);

    padding: 4.5rem 0;
  }

  .work-content-section__heading {
    margin-bottom: 2.5rem;
  }

  .work-content-section__label {
    font-size: 0.75rem;
  }

  .work-content-section__title {
    font-size: 1.8rem;
    line-height: 1.35;
  }

  .work-content-section__body {
    margin-bottom: 3rem;
  }

  .work-content-section__body p {
  font-size: clamp(1rem, 1.08vw, 1.35rem);
    line-height: 1.75;
    font-weight: 500;
  }



  /* ================================
     Image Grid
  ================================ */

  .work-image-grid {
    display: flex;
    flex-direction: column;

    gap: 0.75rem;
  }

  .work-image-grid__item {
    width: 100%;

    aspect-ratio: 16 / 10;

    border-radius: 0.5rem;
  }

  .work-image-grid__item--large {
    grid-row: auto;
  }

  .work-image-grid__item img {
    width: 100%;
    height: 100%;
  }

  .work-image-grid__item:hover img {
    transform: none;
  }



  /* ================================
     Details
  ================================ */

  .work-content-section--details
  .work-content-section__inner {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .work-content-section--details
  .work-content-section__body {
    margin-left: 0;
  }



  /* ================================
     Flow
  ================================ */

  .work-flow-section__inner {
    width: calc(100% - 2rem);

    padding: 4.5rem 0 6rem;
  }

  .work-flow-section__heading {
    margin-bottom: 3rem;
  }

  .work-flow-section__label {
    font-size: 0.75rem;
  }

  .work-flow-section__title {
    margin-bottom: 1rem;

    font-size: 1.8rem;
    line-height: 1.5;
  }

  .work-flow-section__text {
    font-size: 0.85rem;
    line-height: 1.85;
  }



  /* ================================
     Flow Diagram
  ================================ */

  .work-flow {
    display: flex;
    flex-direction: column;

    width: 100%;
  }

  .work-flow__item {
    width: 100%;

    min-height: auto;

    padding: 1.5rem;
  }

  .work-flow__number {
    margin-bottom: 1.2rem;
  }

  .work-flow__content h3 {
    margin-bottom: 0.6rem;

    font-size: 1.5rem;
  }

  .work-flow__content p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .work-flow__arrow {
    flex: none;

    width: 100%;
    height: 2.5rem;

    font-size: 1.1rem;

    transform: rotate(90deg);
  }

}













/* ========================================
   Contact
======================================== */

.contact-section {
  width: 100%;
  padding: 4vw 0 10vw;
  background: #fff;
  color: #171717;
}


/* Contact Intro */

.contact-section__intro {
  width: min(900px, calc(100% - 8vw));
  margin: 0 auto 6vw;
}

.contact-section__label,
.contact-other__label {
  display: flex;
  align-items: center;

  margin: 0 0 0.7rem;

  font-size: clamp(0.85rem, 1vw, 1.1rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.contact-section__label span,
.contact-other__label span {
  width: 0.35rem;
  height: 0.35rem;

  margin-right: 0.7rem;

  background: #044396;
  border-radius: 50%;
}

.contact-section__title {
  margin: 0;

  font-size: clamp(3rem, 5vw, 6rem);
  line-height: 1;

  font-weight: 700;
  letter-spacing: -0.045em;
}

.contact-section__lead {
  margin: 2rem 0 0;

  font-size: 1rem;
  line-height: 2;
  color: #555;
}


/* Notes */

.contact-section__notes {
  margin-top: 4rem;
  padding: 2rem 2.5rem;

  background: #f5f6f8;
  border-radius: 1rem;
}

.contact-section__notes h3 {
  margin: 0 0 1rem;

  font-size: 1rem;
  font-weight: 700;
}

.contact-section__notes ul {
  margin: 0;
  padding-left: 1.3rem;

  color: #666;

  font-size: 0.9rem;
  line-height: 2;
}


/* ========================================
   Contact Form
======================================== */

.contact-section__form-area {
  width: min(900px, calc(100% - 8vw));
  margin: 0 auto;
}

.contact-form {
  width: 100%;
}

.contact-form__group {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;

  padding: 1.5rem 0;

  border-bottom: 1px solid #dfe2e7;
}

.contact-form__group label {
  font-size: 0.95rem;
  font-weight: 700;
}

.required,
.optional {
  display: inline-block;

  margin-left: 0.6rem;
  padding: 0.2rem 0.45rem;

  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;

  border-radius: 0.2rem;
}

.required {
  color: #044396;
  background: #edf3fb;
}

.optional {
  color: #888;
  background: #f0f0f0;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 0.9rem 1rem;

  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;

  color: #171717;

  background: #fff;

  border: 1px solid #cfd3da;
  border-radius: 0.4rem;

  outline: none;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #044396;
  box-shadow: 0 0 0 3px rgba(4, 67, 150, 0.08);
}

.contact-form textarea {
  resize: vertical;
  min-height: 180px;
}

.contact-form__group--textarea {
  align-items: start;
}

.contact-form__group--textarea label {
  padding-top: 0.9rem;
}


/* Privacy */

.contact-form__privacy {
  margin-top: 2rem;
}

.contact-form__privacy-check {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  font-size: 0.85rem;
  color: #555;

  cursor: pointer;
}

.contact-form__privacy-check input {
  width: 16px;
  height: 16px;

  margin: 0;
}

.contact-form__privacy-check a {
  color: #044396;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Submit */

.contact-form__submit {
  display: flex;
  justify-content: center;

  margin-top: 3rem;
}

.contact-form__button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 2rem;

  min-width: 280px;

  padding: 1.2rem 2rem;

  color: #fff;
  background: #044396;

  border: 0;
  border-radius: 999px;

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.contact-form__button:hover {
  transform: translateY(-2px);
  background: #171717;
}

.contact-form__button-arrow {
  font-size: 1.2rem;
}

.contact-form__message {
  margin: 1.5rem 0 0;

  text-align: center;

  font-size: 0.9rem;
  line-height: 1.7;
}


/* ========================================
   Other Contact
======================================== */

.contact-other {
  width: min(1250px, calc(100% - 8vw));

  margin: 10vw auto 0;
}

.contact-other__heading {
  margin-bottom: 3rem;
}

.contact-other__title {
  margin: 0;

  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1;

  letter-spacing: -0.04em;
}


/* Contact Cards */

.contact-other__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 1.2rem;
}

.contact-other__item {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 220px;

  padding: 2rem;

  color: #171717;
  text-decoration: none;

  background: #f5f6f8;

  border-radius: 1rem;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.contact-other__item:hover {
  transform: translateY(-5px);
  background: #e9ebf0;
}


.contact-other__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  margin-bottom: 20px;

  background: #044396;
  border-radius: 50%;

  overflow: hidden;
}

.contact-other__icon span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.contact-other__icon img {
  display: block;

  width: 35px;
  height: 35px;

  object-fit: contain;
}

.contact-other__content {
  display: flex;
  flex-direction: column;

  gap: 0.35rem;
}

.contact-other__en {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;

  color: #777;
}

.contact-other__content strong {
  font-size: 1rem;
  font-weight: 600;

  word-break: break-word;
}

.contact-other__arrow {
  position: absolute;

  right: 1.5rem;
  bottom: 1.5rem;

  font-size: 1.2rem;
}


/* ========================================
   Contact SP
======================================== */

@media (max-width: 767px) {

  .contact-section {
    padding: 8vw 0 20vw;
  }

  .contact-section__intro {
    margin-bottom: 14vw;
  }

  .contact-section__title {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }

  .contact-section__lead {
    margin-top: 1.5rem;

    font-size: 0.9rem;
    line-height: 1.9;
  }

  .contact-section__notes {
    margin-top: 3rem;
    padding: 1.5rem;

    border-radius: 0.8rem;
  }

  .contact-section__notes ul {
    font-size: 0.8rem;
    line-height: 1.9;
  }


  /* Form */

  .contact-form__group {
    display: block;

    padding: 1.3rem 0;
  }

  .contact-form__group label {
    display: block;

    margin-bottom: 0.7rem;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 0.9rem;
  }

  .contact-form textarea {
    min-height: 160px;
  }

  .contact-form__privacy-check {
    align-items: flex-start;

    justify-content: flex-start;

    line-height: 1.7;
  }

  .contact-form__submit {
    margin-top: 2.5rem;
  }

  .contact-form__button {
    width: 100%;
    min-width: 0;
  }


  /* Other Contact */

  .contact-other {
    margin-top: 20vw;
  }

  .contact-other__heading {
    margin-bottom: 2rem;
  }

  .contact-other__title {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .contact-other__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-other__item {
    min-height: 150px;
    padding: 1.5rem;
  }

}



/* ===== 当前页面专用：右下角浮动按钮 ===== */

.page-floating-nav {
  --float-size: 80px;
  --float-right: 30px;
  --float-bottom: 30px;

  position: fixed;
  right: var(--float-right);
  bottom: var(--float-bottom);
  width: var(--float-size);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-floating-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  font-family: 'h5web', sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

/* 上方正方形 CONTACT */
.page-floating-nav__contact {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #044396;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: .7rem;
}

/* 下方长方形 BACK TO TOP */
.page-floating-nav__top {
  width: 100%;
  height: 30px;
  background: #044396;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 50px;
}

@media (hover: hover) {
  .page-floating-nav a:hover {
    background: #555;
    color: #fff;
  }
}

/* 手机端 */
@media (max-width: 767px) {
  .page-floating-nav {
    --float-size: 60px;
    --float-right: 15px;
    --float-bottom: 15px;
  }

  .page-floating-nav__contact {
    font-size: 10px;
  }

  .page-floating-nav__top {
    height: 25px;
    font-size: 8px;
  }
}








/* ===== WORK CARD TAGS ===== */

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
}

.work-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  background: #3a3a3a;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-radius: 2px;
  box-sizing: border-box;
  font-family:'h5web';
  border-radius: 50px;
}

/* SP */
@media (max-width: 767px) {
  .work-card__tags {
    gap: 6px;
    margin-bottom: 15px;
  }

  .work-card__tag {
    padding: 6px 10px;
    font-size: 10px;
  }
}




/* ==========================================
   COMPANY PROFILE
   AT A GLANCE
========================================== */

.company-profile {
  width: 100%;
  margin-top: 10px;
}

/* 每一行 */
.company-profile__row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 0px;
  align-items: start;

  padding: 14px 0;
  margin: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-sizing: border-box;
}

/* 第一行顶部边框 */
.company-profile__row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* 左侧项目名称 */
.company-profile__row span:first-child {
  display: block;
  color: #999;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 右侧详细内容 */
.company-profile__row span:last-child {
  display: block;
  min-width: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

  .company-profile__row {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
  }

  .company-profile__row span:first-child {
    font-size: 11px;
  }

  .company-profile__row span:last-child {
    font-size: 12px;
  }

}

/* ==========================================
   SP
========================================== */

@media (max-width: 767px) {

  .company-profile {
    margin-top: 22px;
  }

  .company-profile__row {
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
  }

  .company-profile__row span:first-child {
    font-size: 11px;
    line-height: 1.7;
  }

  .company-profile__row span:last-child {
    font-size: 12px;
    line-height: 1.7;
  }

}

/* ==========================================
   SMALL SP
========================================== */

@media (max-width: 380px) {

  .company-profile__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .company-profile__row span:first-child {
    font-size: 11px;
  }

}




/* ==========================================
   STRATEGY SECTION
   ABOUT SECTION STYLE MATCH
========================================== */

.strategy-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  background: #e9ebf0;
  color: #222;
}

.strategy-section,
.strategy-section * {
  box-sizing: border-box;
}


/* ==========================================
   INNER
   与 ABOUT SECTION 完全统一
========================================== */

.strategy-section__inner {
  position: relative;
  z-index: 2;

  width: min(1250px, calc(100% - 8vw));
  min-height: 100vh;

  margin: 0 auto;
  padding: 0vw 0 8vw;
}


/* ==========================================
   MAIN HEADING
========================================== */

.strategy-section__heading {
  position: relative;
  z-index: 3;

  width: 100%;
  margin: 0;
  padding: 0;
}


/* 英文大标题 */
.strategy-section__title {
  margin: 0;
  padding: 0;

  font-size: clamp(2.6rem, 2.85vw, 5.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;

  color: #fff;
}


/* 蓝底白字：与 ABOUT 完全一致 */
.strategy-section__title-line {
  display: table;
  width: fit-content;
  max-width: 100%;

  margin: 0;
  padding: 0.04em 0.08em 0.08em;

  background: #044396;
  color: #fff;

  font: inherit;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* ==========================================
   INTRO TEXT
   与 ABOUT 正文字号、行距统一
========================================== */

.strategy-section__intro {
  position: relative;
  z-index: 3;

  width: min(850px, 100%);
  max-width: 100%;

  margin-top: 2vw;
  padding: 0;

  font-size: clamp(0.8rem, 0.4vw, 1.0rem);
  line-height: 2;
  letter-spacing: 0.02em;

  color: #222;
  text-align: justify;
}

.strategy-section__intro p {
  margin: 0 0 1.35em;
}

.strategy-section__intro p:last-child {
  margin-bottom: 0;
}


/* ==========================================
   CONTENT BLOCK
========================================== */

.strategy-section__block {
  position: relative;
  z-index: 3;

  width: 100%;
  margin-top: 6vw;
  margin-bottom: 0;
  padding: 0;
}

.strategy-section__block--last {
  margin-bottom: 0;
}


/* ==========================================
   ENGLISH SUBTITLE
   PRODUCTION / CLEAR
========================================== */

.strategy-section__subtitle {
  margin: 0;
  padding: 0;

  font-size: clamp(2.6rem, 2.6vw, 5.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;

  color: #222;
}


/* ==========================================
   JAPANESE SUBTITLE
========================================== */

.strategy-section__subtitle-ja {
  margin: 0vw 0 0;
  padding: 0;

  font-size: clamp(2rem, 2vw, 2.35rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.02em;

  color: #222;
}


/* ==========================================
   BODY TEXT
   与 ABOUT SECTION 正文完全统一
========================================== */

.strategy-section__text {
  position: relative;
  z-index: 3;

  width: min(850px, 100%);
  max-width: 100%;

  margin-top: 4vw;
  padding: 0;

  font-size: clamp(1rem, 1.08vw, 1.35rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.02em;

  color: #222;
  text-align: justify;
}

.strategy-section__text p {
  margin: 0 0 1.35em;
}

.strategy-section__text p:last-child {
  margin-bottom: 0;
}


/* ==========================================
   PRINCIPLES
   EFFICIENT / CLEAR / EXECUTION
========================================== */

.strategy-principles {
  width: 100%;
  margin-top: 4vw;

  border-top: 1px solid rgba(0, 0, 0, 0.25);
}


/* 每一行 */
.strategy-principles__row {
  display: grid;
  grid-template-columns: 28% minmax(0, 1fr);
      align-items: center;

  width: 100%;
  margin: 0;
  padding: 1.8rem 0;

  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}


/* 左侧英文关键词 */
.strategy-principles__name {
  margin: 0;
  padding: 0;

  font-size: clamp(2.6rem, 2.55vw, 5.2rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.02em;

  color: #044396;
  text-align: center;
}


/* 右侧日文说明 */
.strategy-principles__description {
  min-width: 0;
  margin: 0;
  padding: 0 0 0 2rem;

  font-size: clamp(1rem, 1.08vw, 1.35rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.02em;

  color: #222;
  text-align: left;
}


/* ==========================================
   TABLET
========================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  .strategy-section__block {
    margin-top: 7vw;
  }

  .strategy-section__subtitle {
    overflow-wrap: break-word;
  }

  .strategy-principles__row {
    grid-template-columns: 30% minmax(0, 1fr);
  }

  .strategy-principles__description {
    padding-left: 1.5rem;
  }

}


/* ==========================================
   SP
   与 ABOUT SECTION 手机端统一
========================================== */

@media (max-width: 767px) {

  /* ----------------------------------------
     SECTION
  ---------------------------------------- */

  .strategy-section {
    min-height: auto;
  }


  /* ----------------------------------------
     INNER
  ---------------------------------------- */

  .strategy-section__inner {
    width: calc(100% - 2rem);
    min-height: auto;

    margin: 0 auto;
    padding: 0rem 0 6rem;
  }


  /* ----------------------------------------
     MAIN HEADING
  ---------------------------------------- */

  .strategy-section__heading {
    width: 100%;
  }


  /* 英文大标题：与 ABOUT SP 一致 */
  .strategy-section__title {
    font-size: clamp(1.6rem, 0vw, 3.2rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }


  /* 蓝底白字 */
  .strategy-section__title-line {
    max-width: 100%;
    padding: 0.05em 0.1em 0.08em;

    overflow-wrap: break-word;
  }


  /* ----------------------------------------
     INTRO
  ---------------------------------------- */

  .strategy-section__intro {
    width: 100%;
    margin-top: 2rem;

    font-size: 1rem;
        line-height: 2;
        letter-spacing: 0.01em;
        font-weight: 600;

    text-align: justify;
  }

  .strategy-section__intro p {
    margin-bottom: 1.5rem;
  }

  .strategy-section__intro p:last-child {
    margin-bottom: 0;
  }


  /* ----------------------------------------
     CONTENT BLOCK
  ---------------------------------------- */

  .strategy-section__block {
    width: 100%;
    margin-top: 5rem;
  }

  .strategy-section__block--last {
    margin-bottom: 0;
  }


  /* ----------------------------------------
     ENGLISH SUBTITLE
  ---------------------------------------- */

  .strategy-section__subtitle {
    font-size: clamp(1.4rem, 0vw, 3.2rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.03em;

    overflow-wrap: break-word;
  }


  /* ----------------------------------------
     JAPANESE SUBTITLE
  ---------------------------------------- */

  .strategy-section__subtitle-ja {
    margin-top: 0.1rem;

    font-size: 1.2rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.01em;
  }


  /* ----------------------------------------
     BODY TEXT
  ---------------------------------------- */

  .strategy-section__text {
    width: 100%;
    margin-top: 3rem;

    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.01em;

    text-align: justify;
  }

  .strategy-section__text p {
    margin-bottom: 1.5rem;
  }

  .strategy-section__text p:last-child {
    margin-bottom: 0;
  }


  /* ----------------------------------------
     PRINCIPLES
  ---------------------------------------- */

  .strategy-principles {
    width: 100%;
    margin-top: 3rem;
  }


  /* SP 改为上下排列 */
  .strategy-principles__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    gap: 0.5rem;

    width: 100%;
    padding: 1.5rem 0;
  }


  /* 英文关键词 */
  .strategy-principles__name {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.01em;
    color: #044396;
  }


  /* 日文说明 */
  .strategy-principles__description {
    padding: 0;

    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.01em;

    text-align: left;
  }

}








/* ==========================================
   PROCESS FLOW SECTION
   PC Horizontal / SP Vertical
========================================== */

.process-flow {
  position: relative;
  width: 100%;
  padding: 0vw 0 10vw;

  background: #e9ebf0;
  overflow: hidden;
}

.process-flow,
.process-flow * {
  box-sizing: border-box;
}


/* ==========================================
   INNER
========================================== */

.process-flow__inner {
  width: min(1250px, calc(100% - 8vw));
  margin: 0 auto;
}


/* ==========================================
   FLOW LIST
========================================== */

.process-flow__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin: 0 auto;
}


/* ==========================================
   CARD
========================================== */

.process-flow__card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 240px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 2rem 0.5rem;

  background: #fff;
  border-radius: 0.65rem;

  text-align: center;
}


/* ==========================================
   ICON
========================================== */

.process-flow__icon {
  width: clamp(3.8rem, 4vw, 6rem);
  height: clamp(3.8rem, 4vw, 6rem);

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 2rem;

  flex-shrink: 0;
}

.process-flow__icon img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* ==========================================
   JAPANESE TITLE
========================================== */

.process-flow__title {
  margin: 0;

  font-size: clamp(0.85rem, 1.08vw, 1.35rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;

  color: #222;
}


/* ==========================================
   ENGLISH NOTE
========================================== */

.process-flow__note {
  margin: 0.6rem 0 0;

  font-size: clamp(0.5rem, 0.48vw, 0.75rem);
  font-weight: 400;
  line-height: 1.5;

  color: #333;
}


/* ==========================================
   ARROW
========================================== */

.process-flow__arrow {
  position: relative;

  flex: 0 0 42px;
  width: 42px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* 箭头主体 */
.process-flow__arrow span {
  position: relative;

  display: block;

  width: 26px;
  height: 2px;

  background: #044396;
}


/* 箭头尖端 */
.process-flow__arrow span::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  width: 9px;
  height: 9px;

  border-top: 2px solid #044396;
  border-right: 2px solid #044396;

  transform: translateY(-50%) rotate(45deg);
}


/* ==========================================
   BLUE FLOW ANIMATION
========================================== */

/* 沿箭头方向移动的蓝色光点 */
.process-flow__arrow::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 3px;

  width: 7px;
  height: 7px;

  background: #044396;
  border-radius: 50%;

  transform: translateY(-50%);

  box-shadow: 0 0 7px rgba(4, 67, 150, 0.45);

  animation: process-flow-move 2s linear infinite;
}


/* PC：从左到右 */
@keyframes process-flow-move {

  0% {
    left: 3px;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 10px);
    opacity: 0;
  }

}


/* ==========================================
   TABLET
========================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  .process-flow__card {
    min-height: 210px;
    padding: 1.5rem 0.35rem;
  }

  .process-flow__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.5rem;
  }

  .process-flow__title {
    font-size: 0.85rem;
  }

  .process-flow__note {
    font-size: 0.5rem;
    overflow-wrap: anywhere;
  }

  .process-flow__arrow {
    flex-basis: 24px;
    width: 24px;
  }

  .process-flow__arrow span {
    width: 18px;
  }

}


/* ==========================================
   SP
   VERTICAL FLOW
========================================== */

@media (max-width: 767px) {

  /* SECTION */
  .process-flow {
    padding: 0rem 0 8rem;
  }


  /* INNER */
  .process-flow__inner {
    width: calc(100% - 2rem);
  }


  /* LIST */
  .process-flow__list {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
  }


  /* CARD */
  .process-flow__card {
    flex: none;

    width: 60%;
    min-height: 14rem;

    padding: 2rem 0.75rem;

    border-radius: 0.7rem;
  }


  /* ICON */
  .process-flow__icon {
    width: 4rem;
    height: 4rem;

    margin-bottom: 1.8rem;
  }


  /* TITLE */
  .process-flow__title {
    font-size: 1rem;
    line-height: 1.55;
    letter-spacing: 0;
  }


  /* NOTE */
  .process-flow__note {
    margin-top: 0.65rem;

    font-size: 0.58rem;
    line-height: 1.5;
  }


  /* ========================================
     VERTICAL ARROW
  ======================================== */

  .process-flow__arrow {
    flex: none;

    width: 36px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* 竖向箭头主体 */
  .process-flow__arrow span {
    width: 2px;
    height: 32px;

    background: #044396;
  }


  /* 向下箭头尖端 */
  .process-flow__arrow span::after {
    right: auto;
    top: auto;

    left: 50%;
    bottom: 0;

    width: 9px;
    height: 9px;

    border-top: 0;
    border-right: 2px solid #044396;
    border-bottom: 2px solid #044396;

    transform: translateX(-50%) rotate(45deg);
  }


  /* ========================================
     SP FLOW ANIMATION
  ======================================== */

  .process-flow__arrow::after {
    top: 3px;
    left: 50%;

    width: 7px;
    height: 7px;

    transform: translateX(-50%);

    animation: process-flow-move-sp 2s linear infinite;
  }


  /* 从上到下 */
  @keyframes process-flow-move-sp {

    0% {
      top: 3px;
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    85% {
      opacity: 1;
    }

    100% {
      top: calc(100% - 10px);
      opacity: 0;
    }

  }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

  .process-flow__arrow::after {
    animation: none;
    opacity: 0;
  }

}





/* ==========================================
   COMPANY SECTION
   TABLET RESPONSIVE FIX
   768px - 1024px
========================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* 整体内容区域 */
  .company-section__inner {
    width: calc(100% - 4rem);
    max-width: 850px;
    margin: 0 auto;
  }

  /* 原来的左右两栏改为上下排列 */
  .company-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  /* 每个内容模块 */
  .company-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 35px;
    align-items: start;
    width: 100%;
  }

  /* 文字区域 */
  .company-item__content {
    min-width: 0;
    width: 100%;
  }

  /* 图片区域 */
  .company-item__image {
    width: 100%;
    max-width: 240px;
    min-width: 0;
  }

  .company-item__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 英文标题 */
  .company-item__title {
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.2;
    overflow-wrap: normal;
  }

  /* 左侧介绍正文 */
  .company-item__text {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 2;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* 右侧公司资料 */
  .company-profile {
    width: 100%;
    margin-top: 25px;
  }

  .company-profile__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 15px;
    padding: 12px 0;
  }

  .company-profile__row span:first-child {
    font-size: 12px;
    white-space: nowrap;
  }

  .company-profile__row span:last-child {
    min-width: 0;
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
  }

}



/* ==========================================
   PRINCIPLES TABLET FIX
   iPad mini / iPad Pro
========================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* 左右列宽重新分配 */
  .strategy-principles__row {
    grid-template-columns: 38% minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
  }

  /* 左侧英文标题 */
  .strategy-principles__name {
    min-width: 0;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    line-height: 1.3;
    overflow-wrap: normal;
  }

  /* 右侧日文内容 */
  .strategy-principles__description {
    min-width: 0;
    padding-left: 0;
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    line-height: 1.9;
  }

}



/* ==========================================
   ABOUT / STRATEGY
   TABLET VERTICAL SPACING FIX
========================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* ABOUT 板块 */
  .about-section {
    height: auto;
    min-height: 0;
  }

  .about-section__inner {
    height: auto;
    min-height: 0;

    padding-top: 7vw;
    padding-bottom: 7vw;
  }

  /* STRATEGY 板块 */
  .strategy-section {
    height: auto;
    min-height: 0;
  }

  .strategy-section__inner {
    height: auto;
    min-height: 0;

    padding-top: 7vw;
    padding-bottom: 8vw;
  }

}



/* ==========================================
   PRINCIPLES - LARGE PC FIX
   iMac / Desktop
========================================== */

@media (min-width: 1200px) {

  /* 左右列宽调整 */
  .strategy-principles__row {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
  }

  /* 左侧英文标题 */
  .strategy-principles__name {
    min-width: 0;

    font-size: clamp(2.6rem, 2.55vw, 3.5rem);
    line-height: 1.2;

    white-space: nowrap;
  }

  /* 右侧日文内容 */
  .strategy-principles__description {
    min-width: 0;
    padding-left: 0;

    line-height: 1.9;
  }

}