@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Light.woff2") format("woff2"),
    url("../fonts/satoshi/Satoshi-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Regular.woff2") format("woff2"),
    url("../fonts/satoshi/Satoshi-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Bold.woff2") format("woff2"),
    url("../fonts/satoshi/Satoshi-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "Satoshi", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  font-weight: 400; /* Regular */
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.fade-in {
  opacity: 1;
}

body.fade-out {
  opacity: 0;
}

h1 {
  font-weight: 700; /* Bold */
}

p.light {
  font-weight: 300; /* Light */
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

@media (min-width: 769px) {
  body {
    padding-top: 8.819vw;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 23.467vw;
  }
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: auto;
}

.site-main {
  position: relative;
}

.to-pc {
  display: block;
}

.to-sp {
  display: none;
}

@media (max-width: 768px) {
  .to-pc {
    display: none;
  }

  .to-sp {
    display: block;
  }
}

@media (min-width: 769px) {
  .header-bg-shape {
    color: #232323;
    width: 30.764vw;
    height: 12.361vw;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
  }
}

@media (max-width: 768px) {
  .header-bg-shape {
    position: absolute;
    width: 64vw;
    height: 23.467vw;
    top: 0;
    right: 0;
  }
}

/* ヘッダー */
@media (min-width: 769px) {
  .site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: opacity 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
  }

  /* スクロール時に追従する状態 */
  .site-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
/*
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0.069vw 0.208vw rgba(0, 0, 0, 0.1);
*/
  }

  /* スクロール時の contact ボタン文字色 */
  .site-header.is-fixed .header-contact span {
    color: #232323;
  }

  .site-header .bg-shape svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.667vw 3.889vw;
    z-index: 1;
  }

  .site-logo svg {
    width: 10.417vw;
    height: auto;
  }

  .site-nav-sp {
    display: none;
  }

  .sp-menu {
    display: none;
  }

  /* グローバルナビ */
  .site-nav .nav-list {
  }

  .site-nav .nav-list ul {
    display: flex;
    align-items: center;
    gap: 1.667vw;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav .nav-list ul li {
    font-size: 0.972vw;
    list-style: none;
    font-weight: 400;
  }

  .site-nav .nav-list ul li a {
    text-decoration: none;
    color: #232323;
    display: block;
  }

  .header-contact .contact-btn {
    font-size: 0.972vw;
    color: #ffffff;
  }
}

@media (max-width: 768px) {
  body.nav-open {
    overflow: hidden;
    height: 100%;
  }

  /* ヘッダー全体 */
  .site-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 23.467vw;
    margin-bottom: 6.4vw;
    z-index: 1000;
    transition: opacity 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
  }

  /* スクロール時に追従する状態 */
  .site-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
/*
    background: #fff;
    box-shadow: 0 0.267vw 0.8vw rgba(0, 0, 0, 0.1);
*/
  }

  /* ヘッダー内部の調整 */
  .site-header .header-inner {
    padding: 5.333vw 4.267vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ロゴ */
  .site-header .site-logo img {
    width: 17.6vw;
    height: auto;
  }

  /* PCナビは非表示 */
  .site-header .site-nav,
  .header-contact {
    display: none;
  }
}

/* SPメニュー（ハンバーガー） */
@media (max-width: 768px) {
  .hamburger-btn {
    position: relative;
    width: 12.8vw;
    height: 12.8vw;
    border: none;
    border-radius: 50%;
    background-color: #000; /* 黒い円 */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.067vw;
    transition: background-color 0.3s ease;
    z-index: 1000;
  }

  .hamburger-btn span {
    display: block;
    width: 3.733vw;
    height: 0.533vw;
    background-color: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease,
      background-color 0.3s ease;
  }

  /* 開いた状態 */
  .hamburger-btn.active {
    background-color: #fff; /* 円が白に */
  }

  .hamburger-btn.active span {
    background-color: #000; /* 線を黒に */
  }

  .hamburger-btn.active span:nth-child(1) {
    transform: translateY(0.8vw) rotate(-30deg);
  }

  .hamburger-btn.active span:nth-child(2) {
    transform: translateY(-0.8vw) rotate(30deg);
  }

  /* SPメニュー（ドロワー） */
  .sp-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none; /* 初期は操作不可 */
    overflow: hidden;
  }

  /* 背景（せり上がり用） */
  .sp-menu-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #767676;
    transform: translateY(100%); /* 画面外上に隠す */
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

  /* 中身 */
  .sp-menu-inner {
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 0s; /* 初期は遅延なし */
    height: 100%;
    overflow-y: auto; /* 必要ならスクロール */
  }

  /* 開いた状態 */
  .sp-menu.open {
    pointer-events: auto;
  }

  /* 開いた時 */
  .sp-menu.open .sp-menu-bg {
    transform: translateY(0); /* 下からせり上がる */
  }

  .sp-menu.open .sp-menu-inner {
    opacity: 1;
    transition-delay: 0.5s; /* 背景が出た後にフェードイン */
  }

  /* 閉じる */
  .sp-menu.closing .sp-menu-inner {
    opacity: 0;
    transition-delay: 0s; /* すぐフェードアウト */
  }

  /* 閉じる時 */
  .sp-menu.closing .sp-menu-bg {
    /* 上に上げる動き */
    transform: translateY(-100%);
    transition-delay: 0.5s;
  }

  /* SPメニュー上部（ロゴ＋ハンバーガー） */
  .sp-menu-header {
    padding: 5.333vw 4.267vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent; /* 必要に応じて */
    margin-bottom: 6.4vw;
  }

  /* ロゴ */
  .sp-menu-header .site-logo img {
    width: 17.6vw;
    height: auto;
  }

  .sp-menu .company-name {
    width: 66.133vw;
    margin: 0 6.4vw 18.667vw;
  }

  .sp-menu .company-name img {
    margin-bottom: 4.267vw;
  }

  .sp-menu .company-name .company-text {
    font-weight: 400;
    font-size: 3.467vw;
    line-height: 3.733vw;
    color: #fff;
  }

  /* 会社コピー全体 */
  .company-copy {
    position: absolute;
    top: 53.333vw;
    right: 11.733vw;
    width: 18.667vw;
  }

  /* テキスト */
  .company-copy p {
    font-size: 4.8vw;
    writing-mode: vertical-rl;
    color: #fff;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* SPメニュー本体 */
  .sp-menu ul {
    margin: 0 6.4vw 8.533vw;
  }

  .sp-menu ul li {
    margin-bottom: 4.8vw;
  }

  .sp-menu ul li:last-child {
    margin-bottom: 0;
  }

  .sp-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 4.267vw;
  }

  .contact-btn {
    margin: 0 6.4vw 6.4vw;
  }

  .contact-btn a {
    display: inline-block;
    padding: 3.2vw 4.8vw;
    background: #ffffff;
    border-radius: 11.2vw;
    font-size: 4.267vw;
    text-decoration: none;
    color: #000;
    transition: background 0.3s ease, color 0.3s ease;
  }
}

/* ページフッター */

/* フッター全体 */
@media (min-width: 769px) {
  .site-footer {
    color: #232323;
    font-size: 0.972vw;
    padding: 8.333vw 3.889vw 2.778vw;
  }

  /* フッター内側全体 */
  .site-footer .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 1.389vw;
  }

  /* フッター上段 */
  .site-footer .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.389vw;
    position: relative;
    height: 22.222vw;
  }

  /* 左：会社名 */
  .site-footer .company-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer .company-name img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 1.667vw;
  }

  .site-footer .company-name .company-text {
    font-size: 0.972vw;
    font-weight: 400;
    color: #232323;
  }

  /* 中央：コピー */
  .site-footer .footer-copy {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }

  .site-footer .footer-copy p {
    font-size: 1.667vw;
    line-height: 1.6;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
  }

  /* 右：縦並びメニュー */
  .site-footer .footer-nav .nav-list {
    display: flex;
    gap: 4.444vw; /* 左右カラム間 */
  }

  .site-footer .footer-nav .nav-list ul {
    display: flex;
    flex-direction: column;
    row-gap: 1.806vw; /* 縦の余白 */
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
  }

  .site-footer .footer-nav .nav-list ul li a {
    text-decoration: none;
    color: #232323;
    display: block;
  }

  /* フッター下段 */
  .site-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
  }

  .site-footer .footer-bottom p {
    font-size: 0.833vw;
    color: #232323;
  }

  .site-footer .footer-bottom .privacy p a {
    font-size: 0.833vw;
    color: #232323;
    text-decoration: none;
  }
}

@media (max-width: 768px) {
  /* フッター全体 */
  .site-footer {
    padding: 21.333vw 6.4vw 6.4vw;
    position: relative;
  }

  /* フッター上段 */
  .site-footer .footer-top {
    display: block;
    position: relative;
    margin-bottom: 20.8vw;
    width: 87.2vw;
  }

  /* 会社名エリア */
  .site-footer .company-name {
    width: 66.133vw;
    margin-bottom: 17.6vw;
  }

  /* 会社名ロゴ */
  .site-footer .company-name img {
    margin-bottom: 4.267vw;
  }

  /* 会社名テキスト */
  .site-footer .company-name .company-text {
    font-weight: 400;
    font-size: 3.467vw;
    line-height: 3.733vw;
  }

  /* フッター中央コピー */
  .site-footer .footer-copy {
    position: absolute;
    top: 24vw;
    right: 0;
    width: 18.667vw;
  }

  .site-footer .footer-copy p {
    font-size: 4.8vw;
    line-height: 1.8;
    font-feature-settings: "vert" on;
    writing-mode: vertical-rl;
  }

  .site-footer .footer-nav .nav-list {
    display: block;
  }

  .site-footer .footer-nav .nav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer .footer-nav .nav-list ul li {
    margin-bottom: 6.4vw;
  }
  .site-footer .footer-nav .nav-list ul.right-column li:last-child {
    margin-bottom: 0;
  }

  .site-footer .footer-nav .nav-list ul li a {
    text-decoration: none;
    color: #333;
    font-size: 4.267vw;
  }

  .site-footer .footer-bottom {
    display: block;
  }
  .site-footer .footer-bottom .privacy {
    margin-bottom: 4.267vw;
  }
  .site-footer .footer-bottom p {
    font-size: 3.2vw;
  }
}

/* 黒背景ボタン */
@media (min-width: 769px) {
  .btn-black {
    display: inline-block;
    padding: 1.111vw 1.04vw;
    background: #232323;
    border-radius: 2.917vw;
    color: #fff;
    font-size: 1.111vw;
  }
}

@media (max-width: 768px) {
  .btn-black {
    display: block;
    padding: 3.2vw 0;
    background: #333;
    font-size: 4.267vw;
    color: #fff;
    text-decoration: none;
    border-radius: 11.2vw;
    text-align: center;
    font-family: "Satoshi";
  }
}

/* hover-roll共通 */
@media (min-width: 769px) {
  .hoverRoll {
    display: inline-block;
    position: relative;
    overflow: hidden;
  }

  .hoverRoll__text {
    display: block;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
    line-height: 1;
  }

  .hoverRoll__text > span {
    display: block;
    width: 100%;
  }

  .hoverRoll__text > span.duplicate {
    position: absolute;
    top: 100%; /* 元スパンの下に配置 */
    left: 0;
  }

  .hoverRoll.hover .hoverRoll__text > span {
    animation: textRollOver 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  }

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

/* 矢印ボタンのhover */
@media (min-width: 769px) {
  .arrow-btn {
    width: 3.333vw;
    height: 1.944vw;
    overflow: hidden; /* 流れる部分のはみ出しを隠す */
    border-radius: 42px;
    text-align: center;
  }

  .arrow-btn.black {
    background-color: #000;
  }

  .arrow-btn.white {
    background-color: #fff;
  }

  .arrow-roll {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 0.486vw;
    height: 100%;
  }

  .arrow-roll > span {
    display: block;
    width: 100%; /* 矢印の実寸 */
    height: 100%;
  }

  .arrow-btn.black .arrow-roll > span {
    background: url(../img/common/arrow_white.svg) no-repeat center / contain;
  }

  .arrow-btn.white .arrow-roll > span {
    background: url(../img/common/arrow_black.svg) no-repeat center / contain;
  }

  .arrow-roll > span.duplicate {
    position: absolute;
    top: 0;
    left: -100%;
  }

  .hover .arrow-roll > span {
    animation: arrowRollX 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  }

  @keyframes arrowRollX {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%); /* 親幅分だけ右へ移動 */
    }
  }
}

@media (max-width: 768px) {
  .arrow-btn {
    width: 11.733vw;
    height: 7.467vw;
    overflow: hidden;
    border-radius: 11.2vw;
    text-align: center;
  }

  .arrow-btn.black {
    background-color: #000;
  }

  .arrow-btn.white {
    background-color: #fff;
  }

  .arrow-roll {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 1.867vw;
    height: 100%;
  }

  .arrow-roll > span {
    display: block;
    width: 100%; /* 矢印の実寸 */
    height: 100%;
  }

  .arrow-btn.black .arrow-roll > span {
    background: url(../img/common/arrow_white.svg) no-repeat center / contain;
  }

  .arrow-btn.white .arrow-roll > span {
    background: url(../img/common/arrow_black.svg) no-repeat center / contain;
  }
}

/* フェードイン① */
/* 横書き用 */
[data-scroll-trigger="text"] {
  overflow: hidden;
  line-height: 1.2;
  display: inline-block;
}

[data-scroll-trigger="text"] [data-text-animation] {
  opacity: 0;
  transform: translateY(100%) rotate(5deg); /* 少し反時計回りに */
  transition: transform 1.95s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 1.95s ease;
}

[data-scroll-trigger="text"] [data-text-animation].is-active {
  opacity: 1;
  transform: translateY(0) rotate(0deg); /* 元の位置に回転を戻す */
}

/* 縦書き用 */
[data-scroll-trigger="text-vertical"] [data-scroll-trigger="text-p-small"] {
  opacity: 0;
  transform: translateX(40%); /* 右から左 */
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.2s ease;
}

[data-scroll-trigger="text-vertical"]
  [data-scroll-trigger="text-p-small"].is-active {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s; /* 見出しより少し早めに表示したい場合 */
}

[data-scroll-trigger="text-vertical"] [data-text-animation] {
  overflow: hidden;
  opacity: 0;
  transform: translateX(40%) rotate(5deg); /* 右から左へ */
  transition: transform 1.95s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 1.95s ease;
}

[data-scroll-trigger="text-vertical"] [data-text-animation].is-active {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

/* 1行ずつ遅延をつけたい場合 */
[data-scroll-trigger="text"] [data-text-animation].is-active:nth-child(1) {
  transition-delay: 0.1s;
}
[data-scroll-trigger="text"] [data-text-animation].is-active:nth-child(2) {
  transition-delay: 0.2s;
}
[data-scroll-trigger="text"] [data-text-animation].is-active:nth-child(3) {
  transition-delay: 0.3s;
}

/* --- 小タイトル（p[data-scroll-trigger="text-p-small"]） --- */
[data-scroll-trigger="text-p-small"] {
  opacity: 0;
  transform: translateY(40%);
  transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1s ease;
}

[data-scroll-trigger="text-p-small"].is-active {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* 見出しより先に出したいなら小さめ */
}

/* --- 本文（p[data-scroll-trigger="text-p"]） --- */
[data-scroll-trigger="text-p"] {
  opacity: 0;
  transform: translateY(10%);
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.2s ease;
}

[data-scroll-trigger="text-p"].is-active {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; /* h2 の後に出るように遅延 */
}

/* フェードイン③ */
/* 下から上に上がるフェードイン（大きめ） */
.fade-in-block {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.3s ease;
}

.fade-in-block.is-active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-block-lg {
  opacity: 0;
  transform: translateY(80px); /* 下から上 */
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.3s ease;
}

/* 横スライド用クラス */
.fade-in-block-lg.horizontal-left {
  transform: translateX(-40px); /* 左から右へ */
}

.fade-in-block-lg.horizontal-right {
  transform: translateX(40px); /* 右から左へ */
}

/* アクティブ時 */
.fade-in-block-lg.is-active {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(0deg);
}

/* フェードイン④ */
/* 初期状態：マスクで隠す */
[data-scroll-trigger="mask"] {
  -webkit-mask-image: url("../img/common/mask.webp"); /* マスク画像 */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto 350%;
  -webkit-mask-position: center bottom;

  mask-image: url("../img/common/mask.webp");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: auto 350%;
  mask-position: center bottom;
  opacity: 0;
  transition: mask-position 1.3s ease, -webkit-mask-position 1.3s ease,
    opacity 1.3s ease;
}

/* スクロールで発火したら表示 */
[data-scroll-trigger="mask"].is-active {
  -webkit-mask-position: center top;
  mask-position: center top;
  opacity: 1;
}

/* フェードイン③ */
.fade-in-block {
  opacity: 0;
  transform: translateY(20px); /* 下から上に */
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.3s ease;
}

.fade-in-block.is-active {
  opacity: 1;
  transform: translateY(0);
}