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

    :root {
      --white:       #f4f2ee;
      --off-white:   rgba(244,242,238,0.82);
      --accent:      #c8a96e;
      --dark:        #0d0d0d;
      --copy-left:   8%;
      --copy-bottom: 44%;
    }

    body {
      background: var(--dark);
      color: var(--white);
      font-family: "Zen Kaku Gothic New", sans-serif;
        font-feature-settings: "palt";
      overflow-x: hidden;
    }

    /* grain */
    body::after {
      content: '';
      position: fixed; inset: 0;
      z-index: 998;
      pointer-events: none;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px;
    }

    /* ━━━ VIDEO BG ━━━ */
    .video-wrapper {
      position: fixed;
      inset: 0; z-index: 0;
      overflow: hidden;
    }
    #bgVideo {
      width: 100%; height: 100%;
      object-fit: cover;
      will-change: filter;
      transform: scale(1.05);
      transition: filter 0.1s ease-out;
      opacity: 0.9;
    }
    #darkOverlay {
      position: absolute; inset: 0;
      background: #000;
      opacity: 0;
      z-index: 2;
      pointer-events: none;
      transition: opacity 0.1s ease-out;
    }
    .video-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom,
        rgba(0,0,0,0.28) 0%,
        rgba(0,0,0,0.04) 45%,
        rgba(0,0,0,0.46) 100%);
      z-index: 1;
    }

    /* ━━━ HEADER ━━━ */
    #home header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40px 30px 40px 40px;
      transition: padding 0.4s cubic-bezier(0.16,1,0.3,1),
                  background 0.4s ease;
    }
    /*header::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, transparent 100%);
      pointer-events: none;
      transition: opacity 0.4s ease;
    }*/

    /* scrolled: 背景付き（light-modeでない暗いセクション上） */

    header.scrolled::before { opacity: 0; }

    /* light-mode: 白背景セクション上 — :not(.scrolled)を外して常時有効 */
    header.light-mode {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    header.light-mode::before { opacity: 0; }

    /* ロゴ画像の切り替え */
    .logo { line-height: 0; position: relative; z-index: 1; text-decoration: none; }
    .logo .logo-dark { display: none; }
    header.light-mode .logo .logo-white { display: none; }
    header.light-mode .logo .logo-dark  { display: block; }

    /* navテキストリンクの色 */
    nav {
      display: flex; align-items: center; gap: 6px;
      position: relative; z-index: 1;
      font-family: "Inter", sans-serif;
    }
    nav a {
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.08em;
      color: var(--white); text-decoration: none;
      padding: 6px 18px;
      transition: opacity 0.3s, color 0.3s;
    }
    nav a:hover { opacity: 0.55; }

    header.light-mode nav a { color: #111; }

    /* ▼アイコン */
    nav a.has-arrow::after {
      content: '';
      background-image: url(./images/nav_down.png);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: contain;
      display: inline-block;
      height: 14px; width: 17px;
    }
    header.light-mode nav a.has-arrow::after {
      background-image: url(./images/nav_down_dark.png);
    }

    /* CONTACTボタン画像の切り替え */
    .nav-contact .contact-white { display: block; }
    .nav-contact .contact-dark  { display: none; }
    header.light-mode .nav-contact .contact-white { display: none; }
    header.light-mode .nav-contact .contact-dark  { display: block; }

    /* ━━━ COPY STYLES ━━━ */
    .copy-h1 {
      font-weight: 500;
      font-size: clamp(36px, 5.5vw, 48px);
      letter-spacing: 0.06em;
      line-height: 1.2;
      color: var(--white);
      margin-bottom: 16px;
    }
    .copy-en {
      font-size: 20px;
      letter-spacing: 0.05em;
      color: var(--off-white);
      font-family: "Inter", sans-serif;
      font-weight: 500;
    }

    /* ━━━ HERO COPY ━━━ */
    #heroCopy {
      position: fixed;
      left: var(--copy-left);
      bottom: var(--copy-bottom);
      z-index: 50;
      pointer-events: none;
      transition: opacity 0.05s linear;
    }
    @keyframes copyIn {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #heroCopy .copy-h1 { animation: copyIn 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
    #heroCopy .copy-en { animation: copyIn 1.2s cubic-bezier(0.16,1,0.3,1) 0.7s both; }

    /* ━━━ SCROLL ZONES ━━━ */
    .hero-scroll-zone { height: 90vh; }

    /* ━━━ SCROLL INDICATOR ━━━ */
    .scroll-hint {
      position: fixed;
      bottom: 32px; right: 72px;
      z-index: 50;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }
    .scroll-hint span {
      font-family: "Inter", sans-serif;
      font-size: 11px; letter-spacing: 0.15em;
      color: rgba(244,242,238,0.8);
      writing-mode: vertical-rl;
    }
    .scroll-line {
      width: 1px; height: 60px;
      background: linear-gradient(to bottom, rgba(244,242,238,0.8), transparent);
      animation: lineDrop 2.2s ease-in-out infinite;
    }
    @keyframes lineDrop {
      0%   { transform: scaleY(0); transform-origin: top;    opacity: 1; }
      50%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
      51%  { transform-origin: bottom; }
      100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    }

    /* ━━━ LEAD SECTION ━━━ */
    #leadSection {
      position: relative;
      z-index: 10;
      background: transparent;
      min-height: 100vh;
      padding-bottom: 280px;
      padding-left: 8%;
    }
    #leadCopy {
      opacity: 0;
      transition: opacity 0s;
      margin-bottom: 3rem;
    }
    .lead-divider {
      width: 40px; height: 1px;
      background: var(--accent);
      margin: 52px 0 48px;
    }
    .lead-inner { max-width: 660px; }
    .lead-text p {
      font-weight: 400; font-size: 16px;
      line-height: 2.3; letter-spacing: 0.05em;
      color: rgba(255,255,255,0.8);
      margin-bottom: 25px;
    }
    .lead-text p:last-child { margin-bottom: 0; color: rgba(244,242,238,0.88); }

    /* ━━━ FADE UP ━━━ */
    .fade-up {
      opacity: 0; transform: translateY(24px);
      transition: opacity 0.95s cubic-bezier(0.16,1,0.3,1),
                  transform 0.95s cubic-bezier(0.16,1,0.3,1);
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
    .fade-up:nth-child(1) { transition-delay: 0.10s; }
    .fade-up:nth-child(2) { transition-delay: 0.24s; }
    .fade-up:nth-child(3) { transition-delay: 0.38s; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       BUSINESS SECTION
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .business {
      position: relative;
      z-index: 10;
      background: #fff;
      padding: 120px 0 150px;
    }
    .biz-label {
      font-family: "Inter", sans-serif;
      font-size: 50px; font-weight: 400;
      color: #000;
    }
    .biz-title {
      font-size: 15px;
      font-weight: 400;
      color: #111;
      margin-bottom: 30px;
      letter-spacing: 0.05em;
    }
    .biz-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
        padding: 0 8% 0 3.6%;
        margin: 0 auto;
    }

    /* 画像スタック: 全画像を重ねてopacityで切り替え */
    .biz-img-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
        width: 110%;
    }
    .biz-img-wrap img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                  transform 0.8s cubic-bezier(0.16,1,0.3,1);
      transform: scale(1.04);
    }
    .biz-img-wrap img.active {
      opacity: 1;
      transform: scale(1);
    }

    .biz-list { list-style: none; }
    .biz-list-item {
      /*border-bottom: 1px solid #e8e8e8;*/
      padding: 22px 0 22px 38px;
      cursor: pointer;
      transition: padding-left 0.3s ease;
    }
    /*.biz-list-item:first-child { border-top: 1px solid #e8e8e8; }*/
    /*.biz-list-item:hover { padding-left: 33px; }
    .biz-list-item:nth-child(1) {background: url(images/top/icon_01.png) no-repeat 0 35px;}
    .biz-list-item:nth-child(2) {background: url(images/top/icon_02.png) no-repeat 0 35px;}
    .biz-list-item:nth-child(3) {background: url(images/top/icon_03.png) no-repeat 0 35px;}
    .biz-list-item:nth-child(4) {background: url(images/top/icon_04.png) no-repeat 0 35px;}*/

    .biz-item-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .biz-item-left { flex: 1; }
    .biz-item-left img { width: 100%; height: auto;}
    .biz-num {
      font-family: "Inter", sans-serif;
      font-size: 11px; font-weight: 500;
      color: #ccc; letter-spacing: 0.15em;
      margin-bottom: 5px;
      transition: color 0.3s;
    }
    .biz-item-ja {
      font-size: 22px; font-weight: 400;
      color: #aaa; letter-spacing: 0.04em;
      margin-bottom: 3px;
      transition: color 0.3s;
    }
    .biz-item-en {
      font-family: "Inter", sans-serif;
      font-size: 10px; font-weight: 400;
      color: #ccc; letter-spacing: 0.18em;
      text-transform: uppercase;
      transition: color 0.3s;
    }
    .biz-dot {
        background: url(images/top/biz_arrow_off.png) no-repeat center center;
      width: 26px; height: 26px;
      transition: background 0.3s, border-color 0.3s;
    }

    /* active / hover状態 */
    .biz-list-item.active .biz-num,
    .biz-list-item:hover  .biz-num  { color: var(--accent); }
    .biz-list-item.active .biz-item-ja,
    .biz-list-item:hover  .biz-item-ja { color: #111; font-weight: 500; }
    .biz-list-item.active .biz-item-en,
    .biz-list-item:hover  .biz-item-en { color: #777; }
    .biz-list-item.active .biz-dot,
    .biz-list-item:hover  .biz-dot {
      background: url(images/top/biz_arrow_on.png) no-repeat center center;
      width: 26px; height: 26px;
      transition: background 0.3s, border-color 0.3s;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       CARDS SECTION
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .cards-section {
        padding: 150px 8% 100px;
      position: relative;
      z-index: 10;
      background: url(images/top/other_bg.gif);
    }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .card-item {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .card-item img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .card-item:hover img { transform: scale(1.06); filter: brightness(0.5); }
    .card-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
      z-index: 1;
    }
    .card-body {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 2;
      padding: 36px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }
    .card-en {
      font-family: "Inter", sans-serif;
      font-size: clamp(22px, 3vw, 30px);
      font-weight: 700;
      color: #fff;
      display: block; margin-bottom: 6px;
    }
    .card-ja {
      font-size: 12px; font-weight: 300;
      color: rgba(255,255,255,0.7);
      letter-spacing: 0.12em; display: block;
    }
    .card-btn {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.55);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.3s, border-color 0.3s;
    }
    .card-item:hover .card-btn { background: rgba(255,255,255,0.15); border-color: #fff; }
    .card-btn svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 1.5; }

    /* ━━━ TICKER ━━━ */
    .ticker-section {
      position: relative; z-index: 10;
      padding: 0;
      overflow: hidden;
      background: url(images/top/other_bg.gif);
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 60s linear infinite;
    }
    .ticker-text {
      font-family: "Inter", sans-serif;
      font-size: clamp(60px, 11vw, 200px);
      font-weight: 800;
      color: #FFF;
      letter-spacing: 0.04em;
      white-space: nowrap;
      padding-right: 60px;
      text-transform: uppercase;
      line-height: 76%;
        opacity: 0.1;
    }
    @keyframes ticker {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ━━━ FOOTER ━━━ */
    footer {
      position: relative; z-index: 10;
      background: #222222;
      padding: 130px 8% 100px;
      border-top: 1px solid #222;
    }
    .ft-main {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      padding-bottom: 60px;
      margin-bottom: 32px;
    }
    .ft-logo { margin-bottom: 36px; display: block; }
    .ft-address {
      font-size: 13px; font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.8);
      letter-spacing: 0.04em;
    }
    .ft-address-block { margin-bottom: 20px; }
    .ft-address-block:last-child { margin-bottom: 0; }
    .ft-address-label {
      font-size: 12px; font-weight: 500;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.8);
      text-transform: uppercase;
      margin-bottom: 4px;
      font-family: "Inter", sans-serif;
    }
    .ft-right {
      display: flex;
      align-items: flex-start;
        padding: 20px 0 0 0;
    }
    .ft-nav { list-style: none; text-align: right; }
    .ft-nav li { margin-bottom: 30px; }
    .ft-nav li:last-child { margin-bottom: 0; }
    .ft-nav a {
      font-family: "Inter", sans-serif;
      font-size: 14px; font-weight: 400;
      color: rgba(255,255,255,1);
      text-decoration: none;
      letter-spacing: 0.08em;
      transition: color 0.3s;
      display: flex; align-items: center;
        gap: 12px;
    }
    .ft-nav a::before { content: '●'; font-size: 6px; color: #999999; }
    .ft-nav a:hover { color: #fff; }
    .ft-copy {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .ft-copy p {
      font-family: "Inter", sans-serif;
      font-size: 13px; font-weight: 300;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.08em;
    }

    /* ━━━ FADE-IN ON SCROLL ━━━ */
    .fi {
      opacity: 0; transform: translateY(30px);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
                  transform 0.9s cubic-bezier(0.16,1,0.3,1);
        padding: 0 8%;
    }
    .fi.vis { opacity: 1; transform: translateY(0); }
    .fi.d1 { transition-delay: 0.12s; }
    .fi.d2 { transition-delay: 0.24s; }
    .fi.d3 { transition-delay: 0.36s; }

    /* ━━━ RESPONSIVE ━━━ */
    @media (max-width: 768px) {
      :root { --copy-left: 24px; --copy-bottom: 64px; }
      header { padding: 18px 24px; }
      header.scrolled { padding: 14px 24px; }
      nav a:not(.nav-contact) { display: none; }
      .scroll-hint { right: 24px; }
      #leadSection { padding-right: 24px; padding-left: 24px; }
      .biz-layout { grid-template-columns: 1fr; gap: 40px; }
      .biz-img-wrap { aspect-ratio: 16/9; }
      .cards-grid { grid-template-columns: 1fr; }
      .card-item { aspect-ratio: 4/3; }
      .ft-main { grid-template-columns: 1fr; gap: 40px; }
      .ft-right { justify-content: flex-start; }
      .ft-nav a { justify-content: flex-start; }
      .ft-copy { justify-content: center; }
    }


/*----- 下層ページレイアウト -----*/

    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 30px 40px 40px;
      transition: padding 0.4s cubic-bezier(0.16,1,0.3,1),
                  background 0.4s ease;
    }

.contents {padding: 120px 0;}
.inner1060 {
    width: 1060px;
    margin: 0 auto;
}
.inner1060 img {
    width: 100%;
    height: auto;
}
.inner1160 {
    width: 100%;
    padding: 0 50px;
    max-width: 1160px;
    margin: 0 auto;
}
.inner1160 img {
    width: 100%;
    height: auto;
}
.inner1360 {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
}
.inner1360 img {
    width: 100%;
    height: auto;
}
.inner860 {
    width: 860px;
    margin: 0 auto;
}
.inner860 img {
    width: 100%;
    height: auto;
}
.inner1260 {
    width: 100%;
    padding: 0 50px;
    max-width: 1260px;
    margin: 0 auto;
    position: absolute;
    top: 150vh;
}
.inner1260 img {
    width: 100%;
    height: auto;
}
.inner1000 {
    width: 1000px;
    margin: 0 auto;
    position: absolute;
    top: 150vh;
}
.inner1000 img {
    width: 100%;
    height: auto;
}


.contact {
    background: url(/images/contact_bg.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 240px;
      display: flex;
  align-items: center;    /* 上下中央揃え */
}
.contact div{
    width: 1060px;
    margin: 0 auto;
}
.contact div img{
    width: 100%;
    height: auto;
}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}
.mb90{margin-bottom: 90px;}
.mb100{margin-bottom: 100px;}
.mb110{margin-bottom: 110px;}
.mb120{margin-bottom: 120px;}
.mb130{margin-bottom: 130px;}
.mb140{margin-bottom: 140px;}
.mb150{margin-bottom: 150px;}


/* ----- Company ----- */
#company nav a {
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.08em;
      color: #000; text-decoration: none;
      padding: 6px 18px;
      transition: opacity 0.3s, color 0.3s;
}
#company {background: #FFF;}
.companyMv {
    background: url(./company/images/key_company.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    max-height: 400px;
    height: 50vh;
      display: flex;
  align-items: center;    /* 上下中央揃え */
    margin-top: 100px;
}
.companyMv div {
    padding: 0 8%;
}

/* ----- Business ----- */
#business nav a {
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.08em;
      color: #000; text-decoration: none;
      padding: 6px 18px;
      transition: opacity 0.3s, color 0.3s;
}
#business {background: #FFF;}
.businessMv {
    background: url(./business/images/key_business.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    max-height: 400px;
    height: 50vh;
      display: flex;
  align-items: center;    /* 上下中央揃え */
    margin-top: 100px;
}
.businessMv div {
    padding: 0 8%;
}

/* ----- Works ----- */
#works nav a {
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.08em;
      color: #000; text-decoration: none;
      padding: 6px 18px;
      transition: opacity 0.3s, color 0.3s;
}
#works {background: #FFF;}
.worksMv {
    background: url(./works/images/key_works.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    max-height: 400px;
    height: 50vh;
      display: flex;
  align-items: center;    /* 上下中央揃え */
    margin-top: 100px;
}
.worksMv div {
    padding: 0 8%;
}

/* ----- Recruit ----- */
#recruit nav a {
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.08em;
      color: #000; text-decoration: none;
      padding: 6px 18px;
      transition: opacity 0.3s, color 0.3s;
}

/* ----- Contact ----- */
#contact nav a {
      font-weight: 500; font-size: 14px;
      letter-spacing: 0.08em;
      color: #000; text-decoration: none;
      padding: 6px 18px;
      transition: opacity 0.3s, color 0.3s;
}
#contact {background: #FFF;}
.contactMv {
    background: url(./contact/images/key_contact.png) no-repeat;
    background-size: cover;
    width: 100%;
    max-height: 400px;
    height: 30vh;
      display: flex;
  align-items: center;    /* 上下中央揃え */
    margin-top: 100px;
}
.contactMv div {
    padding: 0 8%;
}