@charset "UTF-8";
/* ==========================================================================
   DESIGN4B Inc. 共通スタイル（全ページで読み込み）

   目次
     1. 変数
     2. リセット（ブラウザ間の差異をなくす）
     3. ベース
     4. 汎用クラス
     5. 文字スタイル
     6. ページ背景（Vanta.js）
     7. サイトヘッダー
     8. グローバルナビゲーション（右上のメニュー）
     9. 下層ページ（ページ全体・メインビジュアル）
    10. スクロールライン
    11. ナビゲーションリンク（ホバー演出付きの大見出しリンク）
    12. サイトフッター
    13. コピーライト
    14. スクロール連動アニメーションの初期状態（JS有効時のみ）
    15. キーフレーム

   ※ ブレイクポイント
     - 〜639px / 640px〜 / 768px〜 / 1024px〜 / 1280px〜
     - 〜640px / 641px〜（スマートフォン判定。JS 側の判定と同じ値）
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 変数
   -------------------------------------------------------------------------- */
:root {
  --color-navy: #253c80;
  --color-white: #fff;
  --color-black: #000;
  --color-teal-400: oklch(77.7% 0.152 181.912);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-pink-600: oklch(59.2% 0.249 0.584);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-zinc-300: oklch(87.1% 0.006 286.286);
  --color-zinc-700: oklch(37% 0.013 285.805);
  --color-zinc-900: oklch(21% 0.006 285.885);

  --font-base: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-heading: futura-pt, sans-serif;
  --font-mplus: "M PLUS 1", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ボタン等の既定トランジション */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  /* ナビゲーションの開閉 */
  --ease-nav: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* リンクのホバー */
  --ease-link: cubic-bezier(0.5, 0.5, 0.3, 1);
}


/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,
::before,
::after,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

menu,
ol,
ul {
  list-style: none;
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
optgroup,
select,
textarea,
::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}

::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentcolor 50%, transparent);
}

textarea {
  resize: vertical;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
  appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}


/* --------------------------------------------------------------------------
   3. ベース
   -------------------------------------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
}

/* スマートフォンでは画面幅に合わせて文字サイズ（= rem の基準）を可変にする */
@media (max-width: 640px) {
  html,
  body {
    font-size: 3.8vw;
  }
}

a {
  color: inherit;
  text-decoration: none;
  word-wrap: break-word;
}

img {
  width: 100%;
  max-width: 100%;
}

p {
  margin: 1rem 0;
}


/* --------------------------------------------------------------------------
   4. 汎用クラス
   -------------------------------------------------------------------------- */

/* 画面には表示せず、スクリーンリーダーや検索エンジンにだけ伝えるテキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* キーボード操作時のみ表示されるスキップリンク */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 0.5em 1em;
  background: #fff;
  color: #000;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

/* 1024px 以上でのみ有効な改行 */
.pc-only,
.sp-only {
  display: none;
}

/* 640px 以下でのみ有効な改行 */
@media screen and (max-width: 640px) {
  .sp-only {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .pc-only {
    display: block;
  }
}

/* 639px 以下でのみ有効な改行（ヘッダーのリード文） */
.br-max-sm {
  display: none;
}

@media not all and (min-width: 640px) {
  .br-max-sm {
    display: inline-block;
  }
}


/* --------------------------------------------------------------------------
   5. 文字スタイル
   -------------------------------------------------------------------------- */

/* 欧文の大見出し（Futura PT / Adobe Fonts） */
.heading {
  padding-right: 0.1em;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
}

/* 和文の見出し（M PLUS 1 / Google Fonts） */
.heading-ja {
  text-align: center;
  font-family: var(--font-mplus);
  font-weight: 500;
}

.m-plus-1-bold {
  font-family: var(--font-mplus);
  font-weight: 500;
}

/* 青く光る白文字 */
.text-shadow-grow {
  color: #fff;
  font-weight: 500;
  text-shadow: 0 0 0.98em rgba(0, 128, 255, 0.9);
  letter-spacing: 0.06em;
}

/* 縁取り文字 */
.stroke-headline-teal {
  color: transparent;
  -webkit-text-stroke: 1px rgb(45 212 191);
}

.stroke-headline-white {
  color: transparent;
  -webkit-text-stroke: 1px rgb(255, 255, 255);
}

.stroke-headline-navy {
  color: transparent;
  -webkit-text-stroke: 1px rgb(37, 60, 128);
}


/* --------------------------------------------------------------------------
   6. ページ背景（Vanta.js の描画先）
      JS が Vanta を初期化する直前に .is-active を付与します。
   -------------------------------------------------------------------------- */
.page-bg {
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100vh;
}

.page-bg.is-active {
  background-color: var(--color-slate-100);
}

/* トップ：ページ上部に固定（スクロールで流れる） */
.page-bg--home {
  position: absolute;
  background-color: var(--color-blue-100);
}

.page-bg--company {
  background-color: var(--color-gray-900);
}

.page-bg--contact,
.page-bg--policy {
  background-color: var(--color-slate-100);
}


/* --------------------------------------------------------------------------
   7. サイトヘッダー
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  color: #000;
}

/* 暗い背景のページ用（白文字） */
.site-header--light {
  color: #fff;
}

@media screen and (min-width: 641px) {
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

.site-header__logo {
  display: block;
  width: fit-content;
  padding: 1rem;
}

@media screen and (max-width: 640px) {
  .site-header__logo {
    padding: 1rem 1rem 0;
  }
}

.site-header__lead {
  font-size: 12px;
}

@media screen and (max-width: 640px) {
  .site-header__lead {
    padding-left: 1rem;
    font-size: 2.8vw;
    font-weight: 300;
  }
}

@media screen and (min-width: 641px) {
  .site-header__lead {
    padding-top: 0.3em;
    padding-right: 15%;
  }
}


/* --------------------------------------------------------------------------
   8. グローバルナビゲーション
      画面右上の三角形。マウスを乗せる（スマホはタップ）と左へスライドして開きます。
      開閉は JS（common.js）が .is-open を付け外しします。
   -------------------------------------------------------------------------- */
.global-nav {
  position: fixed;
  top: 0;
  left: calc(100% - 33vw);
  z-index: 999;
  display: grid;
  place-items: start end;
  width: 200vw;
  height: 100vw;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: transform 0.7s var(--ease-nav);
}

/* タブレット */
@media screen and (min-width: 641px) and (max-width: 959px) {
  .global-nav {
    left: calc(100% - 20vw);
    width: 200vw;
    height: 100vw;
  }
}

/* 横長の画面（PC） */
@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .global-nav {
    left: calc(100% - 185px);
    place-items: center;
    width: 1366px;
    height: 700px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
}

.global-nav.is-open {
  transform: translateX(calc(33vw - 200vw));
}

@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .global-nav.is-open {
    transform: translateX(calc(185px - 1366px + 120px));
  }
}

.global-nav__bg {
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(122deg, rgba(37, 60, 128, 0.98) 30%, rgba(62, 255, 203, 0.98) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%);
}

@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .global-nav__bg {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
}

/* メニューアイコン（2本線） */
.global-nav__toggle {
  position: absolute;
  top: 3.6vw;
  left: 20vw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 5vw;
  height: 2vw;
}

@media screen and (min-width: 641px) and (max-width: 959px) {
  .global-nav__toggle {
    top: 1.6vw;
    left: 12vw;
    width: 2.5vw;
    height: 1vw;
  }
}

@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .global-nav__toggle {
    top: 20px;
    left: 125px;
    width: 20px;
    height: 10px;
  }
}

.global-nav__toggle i {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: 0.5s var(--ease-nav);
}

.global-nav__toggle i:nth-child(2) {
  width: 70%;
  margin-left: auto;
}

.global-nav.is-open .global-nav__toggle i:nth-child(1) {
  width: 100%;
  transform: rotate(210deg);
}

.global-nav.is-open .global-nav__toggle i:nth-child(2) {
  width: 100%;
  transform: rotate(160deg);
}

.global-nav__menu {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 60px;
}

@media screen and (max-width: 640px) {
  .global-nav__menu {
    margin: 5vw;
    gap: 8vw;
  }
}

@media screen and (min-width: 641px) {
  .global-nav__menu {
    top: 60px;
    right: 210px;
  }
}

/* ホームアイコン（開くとフェードイン） */
.global-nav__home {
  display: block;
  width: fit-content;
  cursor: pointer;
  opacity: 0;
}

.global-nav__home svg {
  width: 5.2vw;
  fill: #fff;
  transition: fill 0.3s var(--ease-default);
}

@media screen and (min-width: 641px) {
  .global-nav__home svg {
    width: 36px;
  }
}

@media (hover: hover) {
  .global-nav__home svg:hover {
    fill: var(--color-teal-400);
  }
}

/* 縦の区切り線（開くと上から伸びる） */
.global-nav__line {
  position: absolute;
  left: 9vw;
  width: 1px;
  height: 35vw;
  background-color: #fff;
  transform: scaleY(0);
  transform-origin: center top;
}

@media (min-width: 768px) {
  .global-nav__line {
    left: 70px;
    height: 170px;
  }
}

@media (min-width: 1024px) {
  .global-nav__line {
    height: 200px;
  }
}

.global-nav__list {
  padding-left: 0;
}

/* メニュー項目（開くと右上から順番にスライドイン） */
.global-nav__item {
  margin-bottom: 0.5rem;
  font-size: 7vw;
  line-height: 1;
  opacity: 0;
  transform: translateX(100px) translateY(-30px);
}

@media screen and (min-width: 1024px) {
  .global-nav__item {
    font-size: 60px;
  }
}


/* --------------------------------------------------------------------------
   9. 下層ページ
   -------------------------------------------------------------------------- */

/* ページ全体（会社概要では黒背景） */
.page {
  width: 100%;
  min-height: 100vh;
}

.page--company {
  background-color: var(--color-black);
}

/* メインコンテンツ（背景アニメーションの上に半透明の黒を重ねる） */
.page-content {
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
}

.page-content--subtle {
  background-color: rgba(0, 0, 0, 0.1);
}

/* メインビジュアル（ページタイトル） */
.page-hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
}

.page-hero--light {
  color: var(--color-white);
}

.page-hero--navy {
  color: var(--color-navy);
}

.page-hero__title {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin-right: auto;
  margin-left: 5%;
}

@media (min-width: 768px) {
  .page-hero__title {
    margin-left: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .page-hero__title {
    margin-left: 50px;
  }
}

.page-hero__en {
  display: block;
  font-size: 13vw;
  line-height: 0.8;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .page-hero__en {
    font-size: 8vw;
  }
}

@media (min-width: 1024px) {
  .page-hero__en {
    font-size: 90px;
  }
}

@media (min-width: 1280px) {
  .page-hero__en {
    font-size: 120px;
  }
}

.page-hero__ja {
  display: block;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
}

@media (min-width: 768px) {
  .page-hero__ja {
    font-size: 18px;
  }
}


/* --------------------------------------------------------------------------
   10. スクロールライン（上から下へ流れる細い線）
   -------------------------------------------------------------------------- */
.scroll-line {
  position: absolute;
  bottom: 5vh;
  display: block;
  width: 1px;
  height: 12vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .scroll-line {
    bottom: 5vh;
    height: 20vh;
  }
}

.scroll-line::after {
  content: "";
  position: relative;
  display: block;
  width: 1px;
  height: 200%;
  /* 上半分が白・下半分が透明。上から下向きに書く（下から上向きに書くと境目の 1px の描画が変わるため） */
  background: linear-gradient(#fff 0, #fff 50%, transparent 50%);
  will-change: transform;
  animation: scrollLine 4s cubic-bezier(0.22, 0.04, 0.59, 0.97) 0s infinite both;
}


/* --------------------------------------------------------------------------
   11. ナビゲーションリンク
       ホバーすると文字が左へ抜け、同じ文字（data-text）が右から入れ替わります。
   -------------------------------------------------------------------------- */
.nav-link-heading {
  position: relative;
  display: block;
  width: fit-content;
  padding-right: 0.1em;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 10vw;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.018em;
}

@media (min-width: 768px) {
  .nav-link-heading {
    font-size: 50px;
  }
}

@media (min-width: 1024px) {
  .nav-link-heading {
    font-size: 60px;
  }
}

@media (hover: hover) {
  .nav-link-heading:hover {
    color: rgb(45 212 191);
  }
}

.nav-link-heading::before,
.nav-link-heading::after {
  position: absolute;
  top: 93%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  pointer-events: none;
}

/* 下線 */
.nav-link-heading::before {
  content: "";
  top: calc(100% - 5px);
  height: 2px;
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s var(--ease-link);
}

@media (hover: hover) {
  .nav-link-heading:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
  }
}

/* 右から入ってくる文字 */
.nav-link-heading::after {
  content: attr(data-text);
  top: 0;
  height: 100%;
  background: none;
  transform-origin: 100% 50%;
  transform: translate3d(150%, 0, 0);
  transition: transform 0.3s var(--ease-link);
}

@media (hover: hover) {
  .nav-link-heading:hover::after {
    transform: translate3d(0, 0, 0);
  }
}

/* 左へ抜けていく文字 */
.nav-link-heading span {
  display: inline-block;
  color: #fff;
  transition: transform 0.3s var(--ease-link);
}

@media (hover: hover) {
  .nav-link-heading:hover span {
    color: #fff;
    transform: translate3d(-150%, 0, 0);
  }
}


/* --------------------------------------------------------------------------
   12. サイトフッター
       メインコンテンツ末尾の余白（.footer-space）に重なるよう、
       ネガティブマージンで上に引き上げています。
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100vw;
  margin-top: -100vw;
  overflow: hidden;
}

/* 正方形より横長の画面 */
@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .site-footer {
    height: 700px;
    margin-top: -700px;
  }
}

/* フッターが重なる分の余白（各ページのメイン要素に付与） */
.footer-space {
  padding-bottom: 100vw;
}

@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .footer-space {
    padding-bottom: 700px;
  }
}

.site-footer__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(122deg, rgba(37, 60, 128, 0.8) 30%, rgba(62, 255, 203, 0.8) 100%);
  clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
}

@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .site-footer__bg {
    width: 1366px;
    height: 700px;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
  }
}

.site-footer__nav {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.site-footer__list {
  margin-top: 35%;
  margin-right: auto;
  margin-left: 3rem;
  padding-left: 1rem;
  border-left: 1px solid #fff;
}

@media screen and (min-aspect-ratio: 1/1), screen and (min-width: 960px) {
  .site-footer__list {
    margin-top: 10%;
  }
}

.site-footer__list li {
  margin-bottom: 0.5em;
}

.site-footer__list li:last-child {
  margin-bottom: 0;
}

/*
  フッターのリンクは、ホバー時も親要素の文字色（黒）を引き継ぎます。
  （下線と右から入る文字が黒になる、従来サイトと同じ見た目）
*/
.site-footer .nav-link-heading,
.site-footer .nav-link-heading:hover {
  color: inherit;
}


/* --------------------------------------------------------------------------
   13. コピーライト（画面左下に縦書きで固定）
   -------------------------------------------------------------------------- */
#copyright {
  position: fixed;
  bottom: 9em;
  left: 0.5em;
  z-index: 5;
  font-size: 12px;
  transform: rotate(90deg);
  transform-origin: left bottom;
}


/* --------------------------------------------------------------------------
   14. スクロール連動アニメーションの初期状態
       <html> に .js が付いている（= JavaScript が有効）場合のみ非表示にします。
       表示アニメーションは assets/js/common.js が担当します。
   -------------------------------------------------------------------------- */
.js [data-inview] {
  opacity: 0;
  transform: translateY(30px);
}


/* --------------------------------------------------------------------------
   15. キーフレーム
   -------------------------------------------------------------------------- */
@keyframes scrollLine {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(50%);
  }
}