/* ===== フォント ===== */
:root{
  --font-base: "REPLACE_ME", system-ui, -apple-system, "Segoe UI",
               Roboto, Arial, "Helvetica Neue", sans-serif;
}
.sd :where(h1,h2,h3,h4,h5,h6,p,li,a,span,.text):not(.fa):not([class*="fa-"]) {
  font-family: var(--font-base) !important;
}
:root{ --font-base: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; }




/* ===== ローディング ===== */
:root{
/* 好みで色を調整 */
--bg:#e5e5e5;     /* プリロード背景 */
--fg:#fff;     /* テキスト/ロゴ */
--accent:#6dd5ff; /* アニメの差し色 */
--panel:#e5e5e5;  /* 開閉パネル色 */
--ease: cubic-bezier(.22,.61,.36,1);
--ink: #1e1e1e;   /* 黒っぽい線/塗り */
--ink-hi: #2a2a2a;/* 少しだけ明るい黒 */
}
/* ページ本体では .page を“普通の箱”に戻す（中央寄せはしない） */
.page{
  min-height: 100svh;
  padding: 0;
  display: block;               /* ← grid をやめる */
  /* place-items 等は不要（指定が残っていれば初期化してOK） */
}


  /* ===== Preloader ===== */
  .no-scroll{ overflow:hidden; }

  #preloader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:var(--bg);
    display:grid;
    place-items:center;
    isolation:isolate;
    transition:opacity .6s var(--ease), visibility .6s var(--ease);
  }
  #preloader[hidden]{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  /* 左右に開く“ムービー風”パネル */
  .pl-split{
    position:absolute;
    inset:0 50% 0 0;
    background:var(--panel);
    z-index:-1;
    transform:translateX(0);
    transition:transform .8s var(--ease);
  }
  .pl-split.right{
    inset:0 0 0 50%;
  }
  /* 退場時に左右へ開く */
  #preloader.done .pl-split.left { transform:translateX(-100%); }
  #preloader.done .pl-split.right{ transform:translateX(100%);  }

  .pl-wrap{
    text-align:center;
    color:var(--fg);
    display:grid;
    gap:24px;
    padding:24px;
  }
  .pl-logo{
    font-weight:700;
    letter-spacing:.18em;
    font-size:14px;
    opacity:.85;
  }

  /* SVG ローディング“ムービー” */
  .pl-svg{
    width:min(200px, 46vw);
    height:auto;
    display:block;
    margin:auto;
  }

  /* 1) 円形トラックのストローク描画 */
  .ring{
  stroke: var(--ink);
  stroke-dasharray:440;
  stroke-dashoffset:440;
  animation:ringDraw 1.2s var(--ease) forwards, ringPulse 1.8s ease-in-out 1s infinite;
  /* 黒でもわずかに立体感が出るように影は薄めに */
  filter: drop-shadow(0 0 6px rgba(0,0,0,.25));
  }
  @keyframes ringDraw{ to{ stroke-dashoffset:0; } }
  @keyframes ringPulse{
    0%,100%{ opacity:.95 }
    50%    { opacity:.65 }
  }

  /* 2) 中央の四角が回転しながら拡縮 */
  .cube{
    transform-origin:50% 50%;
    animation:cubeSpin 1.6s var(--ease) .15s infinite;
  }
  @keyframes cubeSpin{
    0%  { transform:rotate(0deg) scale(.92); }
    50% { transform:rotate(90deg) scale(1.05); }
    100%{ transform:rotate(180deg) scale(.92); }
  }

  /* 3) 3点ドットがウェーブ */
  .dot{ transform-origin:50% 50%; }
  .dot:nth-child(1){ animation:dot 1s ease-in-out .0s infinite;  }
  .dot:nth-child(2){ animation:dot 1s ease-in-out .15s infinite; }
  .dot:nth-child(3){ animation:dot 1s ease-in-out .30s infinite; }
  @keyframes dot{
    0%,100%{ transform:translateY(0); opacity:.9 }
    50%    { transform:translateY(-7px); opacity:.6 }
  }


  /* 退場時：中身をふわっと消す */
  #preloader.done .pl-wrap{
    transition: transform .6s var(--ease), opacity .6s var(--ease);
    transform:translateY(12px);
    opacity:0;
  }

  /* モーション軽減: 最小限のフェードのみ */
  @media (prefers-reduced-motion: reduce){
    .ring, .cube, .dot{ animation:none !important; }
    .pl-split{ transition:none; }
    #preloader, #preloader.done .pl-wrap{ transition:opacity .3s ease; }
  }

  /* 小さめ画面の微調整 */
  @media (max-width:480px){
    .pl-note{ display:none; }
  }
  


/* ===== Header (nx-*) ? trimmed ===== */
:root{
  --nx-header-h: 80px;
  --nx-bg: #EEE;
  --nx-txt: #000;
  --nx-accent: #000;
  --nx-ghost-bg: #575757;
  --nx-solid-bg: #000;
  --nx-tr: cubic-bezier(0.445,0.05,0.55,0.95);
}

/* Layout */
.nx-header{ position:fixed; inset:0 0 auto 0; height:var(--nx-header-h); background:var(--nx-bg); z-index:9999; }
.nx-header__inner{
  width:100%; height:100%;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:0; padding:0 0 0 40px;
}

/* Logo */
.nx-logo{ display:inline-flex; align-items:center; width:250px; }
.nx-logo img{ width:150%; height:auto; display:block; }

/* Desktop Nav */
.nx-nav{ display:block; margin:0 20px 0 0; }
.nx-nav__list{ display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.nx-nav__item{ position:relative; height:var(--nx-header-h); display:flex; align-items:center; }
.nx-nav__link{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px 6px; height:100%; text-decoration:none; color:var(--nx-txt);
}
.nx-nav__en{
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  font-size:20px; font-weight:800; line-height:1; transition:opacity .26s var(--nx-tr);
}
.nx-nav__ja{
  position:absolute; top:45%; transform:translateY(10px);
  font-size:14px; font-weight:800; opacity:0; transition:all .26s var(--nx-tr);
}
.nx-underline{
  position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--nx-accent);
  transform:scaleX(0); transform-origin:left center; transition:transform .28s var(--nx-tr);
}
.nx-nav__link:hover .nx-nav__en{ opacity:0; }
.nx-nav__link:hover .nx-nav__ja{ opacity:1; transform:translateY(-2px); }
.nx-nav__link:hover .nx-underline{ transform:scaleX(1); }

/* Career arrow */
.nx-nav__link--career{ display:flex; flex-direction:row; gap:6px; }
.nx-nav__link--career .nx-nav__ja{ left:0; right:0; text-align:center; }
.nx-arrow{ display:inline-flex; align-items:center; }

/* CTAs */
.nx-cta{ display:flex; align-items:center; gap:0; }
.nx-cta__ghost, .nx-cta__solid{
font-size: 15px;
letter-spacing: 1px;
text-align: center;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--nx-header-h); width:120px; padding:0 8px;
  text-decoration:none; overflow:hidden; font-weight:700; cursor:pointer;
  color:#fff;                               /* 通常は白文字 */
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;                  /* ← hoverで100%に */
  transition:background-size .28s var(--nx-tr), color .2s ease;
}
.nx-cta__ghost{ background-color:var(--nx-ghost-bg); background-image:linear-gradient(#fff,#fff); }
.nx-cta__solid{ background-color:var(--nx-solid-bg); background-image:linear-gradient(#fff,#fff); }

/* 子要素は親の色に追従 */
.nx-cta__ghost *,.nx-cta__solid *{ color:inherit; }
.nx-cta__ghost svg,.nx-cta__solid svg{ stroke:currentColor; fill:none; }

/* hover/focus で白く反転＋文字は黒 */
.nx-cta__ghost:hover,
.nx-cta__ghost:focus-visible,
.nx-cta__solid:hover,
.nx-cta__solid:focus-visible{
  background-size:100% 100%;
  color:#000;
}





/* Hamburger */
.nx-burger{ display:none; width:60px; height:60px; border:0; background:#fff; cursor:pointer; place-content:center; }
.nx-burger__bar{ display:block; width:28px; height:1px; background:#000; margin:4px auto; transition:transform .28s var(--nx-tr), opacity .2s; }

/* Drawer */
.nx-drawer{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.nx-drawer__inner{
  position:absolute; inset:0 0 0 auto; width:min(88vw,420px); height:100%;
  background:#dee7e6; transform:translateX(100%); transition:transform .35s var(--nx-tr);
  display:flex; flex-direction:column; padding:16px 18px 24px;
}
.nx-drawer__close{ border:0; background:transparent; align-self:flex-end; padding:10px; cursor:pointer; }
.nx-drawer__logo{ display:block; width:200px; margin:8px 0 8px 6px; }
.nx-drawer__logo img{ width:100%; height:auto; display:block; }
.nx-drawer__list{ list-style:none; padding:12px 0; margin:0; display:flex; flex-direction:column; gap:2px; }
.nx-drawer__list a{
  display:flex; align-items:baseline; justify-content:space-between; text-decoration:none; color:#000;
  padding:20px 8px; border-bottom:1px solid #000; font-weight:800;
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}
.nx-drawer__list a span{ font-size:14px; font-weight:700; opacity:.8; }
.nx-drawer__ctas{ margin-top:auto; display:grid; gap:10px; }

/* Open state */
.nx-header.is-open .nx-drawer{ opacity:1; pointer-events:auto; }
.nx-header.is-open .nx-drawer__inner{ transform:translateX(0); }
.nx-header.is-open .nx-burger .nx-burger__bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nx-header.is-open .nx-burger .nx-burger__bar:nth-child(2){ opacity:0; }
.nx-header.is-open .nx-burger .nx-burger__bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Responsive */
@media (max-width:1140px){ .nx-logo{ width:200px;margin: 0 0 0 7%; } }
@media (max-width:980px){
  .nx-nav,.nx-cta{ display:none; }
  .nx-burger{ display:grid; }
  .nx-header__inner{ grid-template-columns:auto 1fr auto; padding:0 14px; }
  :root{ --nx-header-h:60px; }
}
@media (max-width:360px){
  .nx-logo{ width:180px;margin: 0 0 0 7%;}
  .nx-burger{ width:50px; height:50px; }
  .nx-burger__bar{ width:30px; }
}

/* Page overlap & touch feedback */
body{ scroll-behavior:smooth; }
body.nx-scroll-lock{ overflow:hidden; }
@media (hover:none){
  .nx-cta__ghost:active,.nx-cta__solid:active{ background-size:100% 100%; color:#000; }
}

/* === right actions（スマホ時の右寄せ＋メールボタン） === */
.nx-actions{
  display:none;            /* PCでは非表示 */
  align-items:center;
  gap:8px;
}

/* メールボタン（黒地に白アイコン） */
.nx-mail{
  display:grid; place-items:center;
  width:60px; height:60px;
  background:#000; color:#fff;
  text-decoration:none; border:0; border-radius:0;
}
.nx-mail svg{ stroke:currentColor; fill:none; }

/* スマホで表示＆右端に寄せる */
@media (max-width:980px){
  .nx-actions{ display:flex; justify-self:end; }        /* グリッドの右端へ */
  .nx-nav, .nx-cta{ display:none; }                     /* 既に指定済みでもOK（念押し） */
  .nx-header__inner{ grid-template-columns:auto 1fr auto; } /* 右カラム＝.nx-actions */
  :root{ --nx-header-h:60px; }
  .nx-mail{ width:60px; height:60px;margin: 0;}
}

/* さらに小さい端末のサイズ合わせ（任意） */
@media (max-width:360px){
  .nx-mail{ width:50px; height:50px; }
  .nx-burger{ width:50px; height:50px; }
  .nx-burger__bar{ width:30px; }
}

/* === スマホ時、右端まで寄せる（右パディングを0） === */
@media (max-width:980px){
  .nx-header__inner{
    /* 以前の padding: 0 14px; を上書き */
    padding: 0 0 0 0px !important; /* ←右0・左14 */
    grid-template-columns: auto 1fr auto; /* 念のため */
  }
  .nx-actions{
    justify-self: end;    /* 右端へ */
    margin-right: 0 !important;
  }
}

/* === スマホ：メールとバーガーの“間の余白”をゼロに === */
@media (max-width:980px){
  .nx-actions{
    gap: 0 !important;          /* ← これで間隔ゼロ */
  }
  .nx-actions > .nx-mail,
  .nx-actions > .nx-burger{
    margin: 0 !important;       /* 念のための保険 */
  }
  /* 2つを“正方形でピタッ”と並べる（サブピクセル誤差防止） */
  .nx-mail, .nx-burger{
    flex: 0 0 var(--nx-header-h);
    width: var(--nx-header-h);
    height: var(--nx-header-h);
    padding: 0;
  }
}





/* === スマホ：ドロワー内CTAを横並びに（50%/50%） === */
@media (max-width:980px){
  .nx-drawer__ctas{
    display: flex !important;
    flex-direction: row;
    gap: 10px;               /* 間隔。ピタッと密着にしたい場合は 0 に */
    margin-top: auto;        /* 下に固定（既定のまま念押し） */
  }
  .nx-drawer__ctas .nx-cta__ghost,
  .nx-drawer__ctas .nx-cta__solid{
    flex: 1 1 0;             /* 2つを等幅に */
    width: auto;             /* 固定幅(120px)を解除 */
    height: 56px;            /* ヘッダーより少し低め（好みで調整） */
    padding: 0 14px;         /* 文字の左右余白 */
    border-radius: 0;
  }
  /* 文字＆アイコンは親の色に追従（既定の再確認） */
  .nx-drawer__ctas .nx-cta__ghost *,
  .nx-drawer__ctas .nx-cta__solid *{
    color: inherit;
  }
  .nx-drawer__ctas .nx-cta__ghost svg,
  .nx-drawer__ctas .nx-cta__solid svg{
    stroke: currentColor; fill: none;
  }
}

/* タッチ操作での反応（押した時の反転） */
@media (hover:none){
  .nx-drawer__ctas .nx-cta__ghost:active,
  .nx-drawer__ctas .nx-cta__solid:active{
    background-size: 100% 100%;
    color: #000;
  }
}






/* リセット：前に入れたオフセットはゼロに戻す */
body { padding-top: 0 !important; }
header.nx-header + main#pagetop{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
header.nx-header + main#pagetop > :first-child{
  margin-top: 0 !important;  /* 先頭要素の上マージン潰し */
}

/* 仕上げ：見た目を詰めるための“少しだけ”マイナス余白 */
:root{
  --nx-tighten-pc: 14px;  /* PCでどれだけ詰めるか（調整可） */
  --nx-tighten-sp: 15px;  /* SPでどれだけ詰めるか（調整可） */
}
@media (min-width: 981px){
  header.nx-header + main#pagetop{
    margin-top: calc(-1 * var(--nx-tighten-pc)) !important;
  }
}
@media (max-width: 980px){
  header.nx-header + main#pagetop{
    margin-top: calc(-1 * var(--nx-tighten-sp)) !important;
  }
}

/* 任意：ページ内リンクの到達位置はヘッダー分だけ確保 */
[id]{ scroll-margin-top: var(--nx-header-h); }







/* === ボタン群(.sec-54 / .sec-58)をヘッダーCTAと同じホバーに === */

/* 旧マスクレイヤーは使わない */
.sd.sec-57, .sd.sec-60 { display: none !important; }

/* ベース（通常時：背景はグレー/黒、文字は白） */
.sd.sec-54, .sd.sec-58{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  /* 子要素の色を親に追従させる */
  color: #fff;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: left center;

  /* 左→右に広がる白のグラデーション（ヘッダーと同じ方式） */
  background-image: linear-gradient(#fff, #fff);
  background-size: 0% 100%;
  transition:
    background-size .28s cubic-bezier(0.445,0.05,0.55,0.95),
    color .2s ease;
}

/* 子要素は親の color を継承（Material Icons も含む） */
.sd.sec-54 .sd.sec-55,
.sd.sec-54 .sd.sec-56,
.sd.sec-58 .sd.sec-59 {
  color: inherit !important;
}

/* ホバー/フォーカス時：白マスクが全域に → 文字は黒に反転 */
.sd.sec-54:hover,
.sd.sec-54:focus-visible,
.sd.sec-58:hover,
.sd.sec-58:focus-visible{
  background-size: 100% 100%;
  color: #000;
}

/* タッチ端末の“押した感” */
@media (hover: none){
  .sd.sec-54:active,
  .sd.sec-58:active{
    background-size: 100% 100%;
    color: #000;
  }
}





/* about上横スクロール */
/* 器とはみ出し制御＆重ね基準 */
.sd.sec-66{ overflow: hidden; }
.sd.sec-67{ position: relative; }

/* Studio側のスライドは“見た目だけ”消す（レイアウトは維持） */
.sd.sec-67[data-type="carousel"] .sec-68,
.sd.sec-67[data-type="carousel"] .sec-69{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* レスポンシブ係数（高さ・速度・比率） */
:root{
  /* 帯の高さ：18?96pxを画面幅で自動スケール。好みに調整可 */
  --ticker-h: clamp(18px, 8vw, 120px);
  /* 画像のアスペクト：300/18 = 16.6667（拡縮しても継ぎ目なし） */
  --tile-ratio: 16.6667;
  /* 流れる速さ（小さいほど速い） */
  --ticker-speed: 26s;
}

/* 帯本体：親の中央に疑似要素で重ねる */
.sd.sec-67[data-type="carousel"]::after{
  content:"";
  position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%);
  height:var(--ticker-h);
  z-index: 5;                    /* 子スライドより前に出す */
  pointer-events:none;           /* クリックを邪魔しない */
  background-color: transparent; /* 余計な色帯が出ないよう明示 */
  background-image:url("../img/s-300x18_8d89fea7-de19-4c42-8710-fdb81649a594.svg");
  background-repeat:repeat-x;
  background-size: calc(var(--ticker-h) * var(--tile-ratio)) var(--ticker-h);
  background-position: 0 50%;
  animation: nx-ticker var(--ticker-speed) linear infinite;
  will-change: background-position;
}

/* タイル1枚ぶんずらしてシームレスループ（右→左） */
@keyframes nx-ticker{
  from { background-position: 0 50%; }
  to   { background-position: calc(-1 * var(--ticker-h) * var(--tile-ratio)) 50%; }
}

/* 好みでSPだけ速くする等（任意） */
@media (max-width:540px){
  :root{ --ticker-speed: 12s; }
}

/* まず“スマホ優先（モバイルファースト）”で可変高さ */
:root{
  /* 例：18px?120pxの範囲で、画面幅に応じて自動スケール */
  --ticker-h: clamp(48px, 10vw, 140px);
}

/* PC（デスクトップ）は高さを固定 180px に */
@media (min-width: 981px){
  :root{
    --ticker-h: 170px;
    /* （任意）大きくした分、少しゆっくりにしたい場合
       --ticker-speed: 24s;  などに調整してもOK */
  }
}






/* ===== ファーストビュー：ロード後にアニメ（最小構成） ===== */

/* アニメ用カーブ */
:root { --nx-ease: cubic-bezier(0.22,0.61,0.36,1); }

/* 初期状態：テキストは右から、ボタンは下から */
.sec-45 .sec-49,  /* 小見出し */
.sec-45 .sec-51,  /* H1 */
.sec-45 .sec-52 { /* 説明文 */
  opacity: 0;
  transform: translateX(36px);
  will-change: transform, opacity;
}
.sec-45 .sec-54,  /* 資料DL */
.sec-45 .sec-58 { /* お問い合わせ */
  opacity: 0;
  transform: translateY(22px);
  will-change: transform, opacity;
}

/* 再生トリガー（プリロード完了で body に .nx-loaded を付与） */
body.nx-loaded .sec-45 .sec-49 { animation: nx-slide-in-right .70s var(--nx-ease) .00s forwards; }
body.nx-loaded .sec-45 .sec-51 { animation: nx-slide-in-right .80s var(--nx-ease) .12s forwards; }
body.nx-loaded .sec-45 .sec-52 { animation: nx-slide-in-right .80s var(--nx-ease) .24s forwards; }
body.nx-loaded .sec-45 .sec-54 { animation: nx-slide-up       .70s var(--nx-ease) .38s forwards; }
body.nx-loaded .sec-45 .sec-58 { animation: nx-slide-up       .70s var(--nx-ease) .54s forwards; }

/* キーフレーム（重複定義は削除） */
@keyframes nx-slide-in-right {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nx-slide-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Studioの .appear を“ロード後だけ”無効化（このセクション限定） */
body.nx-loaded .sec-45 .appear {
  opacity: 1 !important;
  transition: none !important;
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  .sec-45 .sec-49,
  .sec-45 .sec-51,
  .sec-45 .sec-52,
  .sec-45 .sec-54,
  .sec-45 .sec-58 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}




/* === 共通：タイトル・マスクスライド（全セクション使い回し） === */
:root{ --nx-ease: cubic-bezier(.22,.61,.36,1); }

.nx-title{
  position: relative; overflow: hidden; contain: paint;
}
/* Studioの .appear をこの範囲では無効化（チラつき防止） */
.nx-title .appear{ opacity:1 !important; transform:none !important; transition:none !important; }

/* タイトル文字は不透明のまま。入るときだけ軽く持ち上げる */
.nx-title__text{ position:relative; z-index:1; display:inline-block; }
.nx-title.nx-animate .nx-title__text{ transform: translateY(10px); }
.nx-title.nx-in      .nx-title__text{ animation: nx-title-up .6s var(--nx-ease) var(--nx-delay,0s) forwards; }

/* 擬似要素の“板”で全面マスク → 横へスライドして外す */
.nx-title::before{
  content:""; position:absolute; inset:-1px 0 -1px 0; z-index:2; pointer-events:none;
  background: var(--nx-mask, #000);
  will-change: transform; transform: translateX(0) translateZ(0);
}
.nx-title.nx-in::before{
  animation: nx-mask-ltr .8s var(--nx-ease) var(--nx-delay,0s) forwards;
}
/* 右→左に抜きたいとき */
.nx-title[data-dir="rtl"].nx-in::before{ animation-name: nx-mask-rtl; }

/* キーフレーム */
@keyframes nx-title-up{ from{transform:translateY(10px)} to{transform:translateY(0)} }
@keyframes nx-mask-ltr{ from{transform:translateX(0)} to{transform:translateX(101%)} }
@keyframes nx-mask-rtl{ from{transform:translateX(0)} to{transform:translateX(-101%)} }

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .nx-title::before, .nx-title__text{ animation:none !important; transform:none !important; }
}





/* ===== nx-reveal：最小＆安定（transition一本化） ===== */
:root { --nx-ease: cubic-bezier(.22,.61,.36,1); }

/* 初期は隠す＋フェード/スライドの遷移を定義 */
.nx-reveal{
  opacity: 0 !important;
  transform: translate3d(var(--nx-x,0), var(--nx-y,24px), 0) scale(var(--nx-scale,1)) !important;
  transition-property: opacity, transform !important;
  transition-duration: var(--nx-dur, 1s) !important;   /* 既定（下の最終上書きでPC/SP別に） */
  transition-timing-function: var(--nx-ease) !important;
  transition-delay: var(--nx-delay, 0s) !important;
  will-change: transform, opacity;
}

/* 方向ユーティリティ */
.nx-up    { --nx-x: 0;    --nx-y: 24px; }
.nx-down  { --nx-x: 0;    --nx-y:-24px; }
.nx-left  { --nx-x: 36px; --nx-y: 0; }
.nx-right { --nx-x:-36px; --nx-y: 0; }
.nx-zoom  { --nx-scale: 1.04; }

/* 画面に入ったら最終状態へ */
.nx-reveal.nx-inview{
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

/* Studioの .appear がトランジションを壊さないように */
.nx-reveal.appear,
.nx-reveal.appear-active{ transition: inherit !important; }

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .nx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* === FINAL OVERRIDE: PC/SPの速度だけ最後に強制上書き === */
@media (min-width: 981px){
  .nx-reveal,
  .nx-reveal.appear,
  .nx-reveal.appear-active,
  .nx-reveal.nx-inview{
    animation: none !important;                                /* 過去のanimation方式を無効化 */
    transition-property: opacity, transform !important;
    transition-duration: 1.20s !important;                     /* ★PCの速度：ここを調整 */
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    /* 任意：少し“間”を置くなら有効化 */
    /* transition-delay: .20s !important; */
  }
}
@media (max-width: 980px){
  .nx-reveal,
  .nx-reveal.appear,
  .nx-reveal.appear-active,
  .nx-reveal.nx-inview{
    animation: none !important;
    transition-property: opacity, transform !important;
    transition-duration: 0.95s !important;                     /* ★SPの速度：ここを調整 */
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    /* transition-delay: .12s !important; */
  }
}




/* ========================
   nx-wipeBtn（汎用横塗りボタン）
   ======================== */
.nx-wipeBtn{
  /* カスタム可能な変数（必要に応じてHTMLの style= で上書き） */
  --btn-bg:   #000;      /* 初期背景（黒） */
  --btn-fg:   #fff;      /* 初期文字色（白） */
  --btn-wipe: #575757;   /* 横塗りの色（グレー） */
  --btn-h:    60px;      /* 高さ */
  --btn-px:   18px;      /* 左右パディング */
  --btn-wipe-duration: .28s;
  --btn-ease: cubic-bezier(0.445,0.05,0.55,0.95);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  text-decoration: none;
  border-radius: 0;

  position: relative;
  overflow: visible;             /* 右の装飾線を切らない */
  background: var(--btn-bg);
  color: var(--btn-fg);

  /* 横塗り（背景サイズを伸ばす） */
  background-image: linear-gradient(var(--btn-wipe), var(--btn-wipe));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size var(--btn-wipe-duration) var(--btn-ease);
}

.nx-wipeBtn:hover,
.nx-wipeBtn:focus-visible{ background-size: 100% 100%; }

.nx-wipeBtn, .nx-wipeBtn *{ color: inherit; } /* 子も親の色に追従 */

.nx-wipeBtn__label{ font-weight: 600; letter-spacing: .03em; }

/* 右の装飾線（白/黒 1px） */
.nx-wipeBtn--hasMark{ padding-right: calc(var(--btn-px) + 40px); } /* マーク分の余白 */
.nx-wipeBtn__mark{
  position: absolute; right: -20px; top: 50%;
  width: 40px; height: 1px; transform: translateY(-50%);
  display: flex; z-index: 3; pointer-events: none;
}
.nx-wipeBtn__mark span{ flex:1; }
.nx-wipeBtn__mark span:first-child{ background: #fff; }
.nx-wipeBtn__mark span:last-child { background: #000; }

/* 幅いっぱいにしたいとき */
.nx-wipeBtn--block{ display:flex; width:100%; }

/* SPの高さ/余白微調整（任意） */
@media (max-width:540px){
  .nx-wipeBtn{ --btn-h: 56px; --btn-px: 14px; }
}

/* === nx-reveal 併用時：FINAL OVERRIDEが background-size を殺す問題への対策 === */
.nx-wipeBtn.nx-reveal,
.nx-wipeBtn.nx-reveal.appear,
.nx-wipeBtn.nx-reveal.appear-active,
.nx-wipeBtn.nx-reveal.nx-inview{
  transition-property: opacity, transform, background-size !important;
  transition-duration:
    var(--nx-dur,1s), var(--nx-dur,1s), var(--btn-wipe-duration,.28s) !important;
  transition-timing-function:
    var(--nx-ease), var(--nx-ease), var(--btn-ease) !important;
}

/* タッチ端末：押下で横塗りを即表示（任意） */
@media (hover:none){
  .nx-wipeBtn:active{ background-size:100% 100%; }
}

/* === nx-wipeBtn：色と幅の最終パッチ === */
/* 1) 文字色を常にボタン指定色に（上書きに強く） */
.nx-wipeBtn,
.nx-wipeBtn:link,
.nx-wipeBtn:visited,
.nx-wipeBtn:hover,
.nx-wipeBtn:focus-visible{
  color: var(--btn-fg, #fff) !important;
  text-decoration: none;
  -webkit-text-fill-color: currentColor; /* Safari対策 */
}
.nx-wipeBtn *{ color: inherit !important; }

/* 2) 幅を変えられるように（デフォはauto） */
.nx-wipeBtn{
  width: var(--btn-w, auto);       /* 固定幅にしたい時は --btn-w:260px など */
  min-width: var(--btn-minw, auto);/* 最低幅を持たせたい時は --btn-minw:240px など */
}

/* 幅計算を安定化 */
.nx-wipeBtn{
  box-sizing: border-box;
  width: var(--btn-w, auto);       /* 固定したい時だけ --btn-w を指定 */
  min-width: var(--btn-minw, auto);
}

/* 旧ボタン相当のサイズ（PC:260px / SP:200px） */
.nx-wipeBtn--md{ --btn-minw: 260px; }
@media (max-width:540px){
  .nx-wipeBtn--md{ --btn-minw: 200px; }
}

/* さらに大きい/小さいバリエーション（お好みで） */
.nx-wipeBtn--sm{ --btn-minw: 200px; }
.nx-wipeBtn--lg{ --btn-minw: 320px; }





/* === サービス行の矢印丸：黒→グレーの横スライド（全行に効く） === */

/* 丸のベース（黒） */
.sd.sec-129, .sd.sec-146, .sd.sec-163{
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #000;
}

/* グレーの“塗り”レイヤー（左→右にwipe） */
.sd.sec-130, .sd.sec-147, .sd.sec-164{
  position: absolute;
  inset: 0;
  background: #575757;                 /* ホバー後のグレー */
  transform: scaleX(0) !important;     /* 既存の scale(0,1) を確実に上書き */
  transform-origin: left center;
  transition: transform .28s cubic-bezier(0.445,0.05,0.55,0.95) !important;
  z-index: 0;
}

/* 各行（= 各 a.sec-115）をホバーしたら塗りを全開 */
a.sd.sec-115:hover .sd.sec-130,
a.sd.sec-115:hover .sd.sec-147,
a.sd.sec-115:hover .sd.sec-164{
  transform: scaleX(1) !important;
}

/* アイコンは常に白 */
.sd.sec-131, .sd.sec-148, .sd.sec-165{
  color: #fff !important;
  z-index: 1;
  transition: color .2s ease; /* お好みで */
}

/* タッチ端末：押下時にも反転を見せる */
@media (hover:none){
  a.sd.sec-115:active .sd.sec-130,
  a.sd.sec-115:active .sd.sec-147,
  a.sd.sec-115:active .sd.sec-164{
    transform: scaleX(1) !important;
  }
}





/* ========== RowLink（行リンク）最小・汎用セット ========== */

/* 本体 */
.nx-rowLink{
  display:flex; align-items:center; gap:20px;
  padding:30px 0; border-bottom:1px solid #000;
  color:inherit; text-decoration:none;
}

/* 左右ブロック */
.nx-rowLink__main{ display:flex; align-items:flex-start; gap:20px; flex:1; }
.nx-rowLink__left{ flex:1 1 50%; padding-right:20px; }
.nx-rowLink__right{ flex:1 1 50%; padding-left:20px; }

/* タイポ（元テンプレのフォント変数を尊重） */
.nx-rowLink__title{
  margin:0 0 10px;
  font-family: var(--s-font-daa8975e,
    ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif);
  font-size:28px; font-weight:600; line-height:1.4; color:#000;
}
.nx-rowLink__desc{
  margin:0;
  font-family: var(--s-font-cda1e569,
    ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif);
  font-size:16px; line-height:1.6; font-weight:400; color:#000;
}

/* 見出し「提供メニュー」 */
.nx-rowLink__menuHead{ display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.nx-rowLink__menuLine{ width:20px; height:1px; background:#000; }
.nx-rowLink__menuLabel{
  margin:0;
  font-family: var(--s-font-daa8975e,
    ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif);
  font-size:16px; font-weight:600; color:#000;
}

/* タグ群 */
.nx-rowLink__menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.nx-rowLink__menuItem{ margin:0; padding:0; }
.nx-tag{
  background:#EEE; color:#333; border-radius:24px;
  padding:4px 14px; margin:0;
  font-family: var(--s-font-daa8975e,
    ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif);
  font-size:15px; line-height:1.4;font-weight:600; 
}
.nx-rowLink:hover .nx-tag{ background:#dbe1e1; }

/* 右端CTA（テキスト＋丸アイコン） */
.nx-rowLink__cta{ display:flex; align-items:center; gap:20px; margin:0 20px; }
.nx-rowLink__ctaText{
  display:none; margin:0; font-size:16px; color:#000;
  font-family: var(--s-font-daa8975e,
    ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif);
  font-weight:400;
}

/* 丸チップ（黒→グレーの横ワイプ＋白矢印） */
.nx-rowLink__chip{
  position:relative; display:grid; place-items:center;
  width:70px; height:70px; border-radius:50%;
  background:#000; overflow:hidden; isolation:isolate; flex:0 0 auto;
}
.nx-rowLink__fill{
  position:absolute; inset:0; border-radius:inherit; background:#575757;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .28s cubic-bezier(0.445,0.05,0.55,0.95);
  pointer-events:none; z-index:0;
}
.nx-rowLink__icon{ position:relative; z-index:1; color:#fff; font-size:20px; line-height:1; }
.nx-rowLink:hover .nx-rowLink__fill,
.nx-rowLink:focus-visible .nx-rowLink__fill{ transform:scaleX(1); }

/* 区切り線ありバリエーション（必要な行だけ修飾子を付ける） */
.nx-rowLink--divide .nx-rowLink__left{ border-right:1px dotted #000; }

/* ====== レスポンシブ ====== */
@media (max-width: 840px){
  .nx-rowLink{ flex-direction:column; align-items:stretch; padding:40px 0 10px; }
  .nx-rowLink__main{ flex-direction:column; gap:20px; }
  .nx-rowLink__left{ padding-right:0; }
  .nx-rowLink__right{ padding-left:0; }
  .nx-rowLink__cta{ margin:10px 0 0; gap:12px; }
  .nx-rowLink--divide .nx-rowLink__left{ border-right:0; }
  .nx-rowLink--divide .nx-rowLink__right{ border-bottom:1px dotted #000; padding-bottom:30px; }
}

@media (max-width: 540px){
  .nx-rowLink__title{ font-size:22px; }
  .nx-rowLink__desc { font-size:14px; }
  .nx-tag{ font-size:14px; }

  /* CTAを“セット”で中央寄せ＋SP用サイズ */
  .nx-rowLink__cta{
    width:100%; justify-content:center; align-items:center; gap:10px; margin:10px 0 0;
  }
  .nx-rowLink__ctaText{
    display:inline-block; text-align:center; margin:0; width:auto;
  }
  .nx-rowLink__chip{ width:50px; height:50px; }
}



/* 自動スクロール用の軽い指定（速度は px/秒） */
.nx-as{
  --nx-as-speed: 40;             /* ← 好みで。例: 20?80 */
  display: flex;                  /* 念のため（Studioのsdがflexでも上書きOK） */
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: auto !important; /* 自動スクロールと競合しないように */
}

/* 端をうっすらマスク（不要なら削除OK） */
@supports (-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000)) {
  .nx-as{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
}


/* 画像枠：はみ出しを隠す */
.sd.sec-183{
  position: relative;
  overflow: hidden;
}

/* 画像本体：初期状態＋トランジション */
.sd.sec-183 .sd.sec-186{
  width:100%; height:100%;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center center !important;
  transition: transform .60s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
  /* 背景で使っている場合の保険 */
  background-size: cover;
  background-position: center;
}

/* カード全体にホバーでズーム */
.sd.sec-182:hover .sd.sec-186{
  transform: translateZ(0) scale(1.06) !important;
}

/* 画像エリアだけのホバーでも発火（保険） */
.sd.sec-183:hover .sd.sec-186{
  transform: translateZ(0) scale(1.06) !important;
}

/* モバイルは控えめ（任意） */
@media (max-width:540px){
  .sd.sec-182:hover .sd.sec-186,
  .sd.sec-183:hover .sd.sec-186{
    transform: translateZ(0) scale(1.03) !important;
  }
}

/* ===== カード内「詳しく見る」：ホバーでフェード＋スライド表示 ===== */

/* 画像ラッパ（はみ出し防止）? 既に指定済みならOK */
.sd.sec-183{ position: relative; overflow: hidden; }

/* 初期：隠す＋トランジション設定（appear競合に勝つため全状態で上書き） */
.sd.sec-184,
.sd.sec-184.appear,
.sd.sec-184.appear-active{
  opacity: 0 !important;
  transform: translateY(0) !important;                 /* 初期位置 */
  transition:
    opacity   .45s cubic-bezier(.22,.61,.36,1) !important,
    transform .45s cubic-bezier(.22,.61,.36,1) !important;
  pointer-events: none;                                 /* クリックの邪魔をしない */
  z-index: 3;                                           /* 画像の上に */
}

/* ホバー/フォーカスで表示＆少し上にスライド */
.sd.sec-182:hover .sd.sec-184,
.sd.sec-183:hover .sd.sec-184,
.sd.sec-182:focus-within .sd.sec-184{
  opacity: 1 !important;
  transform: translateY(-20px) !important;
}



/* ===== 丸いアロー：黒→グレーのワイプ（CONTACT/DOWNLOAD 両方に適用） ===== */

/* 丸チップ（黒の円） */
.sd.sec-252,
.sd.sec-264{
  position: relative;             /* fill の基準 */
  overflow: hidden;               /* 円外にはみ出さない */
  isolation: isolate;             /* レイヤー分離（にじみ防止） */
}

/* グレーの塗り（左→右に伸びる） */
.sd.sec-253,
.sd.sec-265{
  transform: scaleX(0);           /* 初期は非表示 */
  transform-origin: left center;  /* 左から伸びる */
  transition: transform .28s cubic-bezier(0.445,0.05,0.55,0.95);
  pointer-events: none;           /* クリックの邪魔をしない */
  z-index: 0;
  will-change: transform;
}

/* アローは常に白で前面 */
.sd.sec-254,
.sd.sec-266{
  color: #fff !important;         /* 以前の #dbe1e1 を白に統一 */
  position: relative;
  z-index: 1;
}

/* ホバー/フォーカス時に塗りを全幅へ（＝黒→グレーへ） */
/* CONTACT 側 */
.sd.sec-244:hover  .sd.sec-253,
.sd.sec-244:focus-within .sd.sec-253{ transform: scaleX(1); }
/* DOWNLOAD 側 */
.sd.sec-256:hover  .sd.sec-265,
.sd.sec-256:focus-within .sd.sec-265{ transform: scaleX(1); }


/* ========== CONTACT / DOWNLOAD の丸いアローを
   黒→グレーのワイプに統一（強制オーバーライド） ========== */

/* 円の器（黒い丸） */
.sd.sec-252,
.sd.sec-264{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* グレーの塗り（左→右に伸びる） */
.sd.sec-253,
.sd.sec-265{
  background: #575757 !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  transform: scaleX(0) !important;            /* 初期：見えない */
  transform-origin: left center !important;    /* 左から伸ばす */
  transition: transform .28s cubic-bezier(0.445,0.05,0.55,0.95) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  will-change: transform !important;
}

/* アイコン（常に白） */
.sd.sec-254,
.sd.sec-266{
  color: #fff !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hover/Focus で塗りを全幅へ ?? CONTACT 側 */
.sd.sec-244:hover .sd.sec-253,
.sd.sec-244:focus-within .sd.sec-253{
  transform: scaleX(1) !important;
}

/* Hover/Focus で塗りを全幅へ ?? DOWNLOAD 側 */
.sd.sec-256:hover .sd.sec-265,
.sd.sec-256:focus-within .sd.sec-265{
  transform: scaleX(1) !important;
}

/* （保険）もし下の方に旧指定があり競合しても勝てるように */
.sd.sec-244:hover .sd.sec-253,
.sd.sec-256:hover .sd.sec-265{ transition: transform .28s cubic-bezier(0.445,0.05,0.55,0.95) !important; }


.sec-275 a{
-webkit-transition: 0.2s ease-in-out!important;;
-moz-transition: 0.2s ease-in-out!important;;
-o-transition: 0.2s ease-in-out!important;;
transition: 0.2s ease-in-out!important;;
}
.sec-275 a:hover{
opacity: 0.5!important;;
}


/* 画像枠：オーバーレイや拡大がはみ出さない基準 */
.sd.sec-183{ position: relative; overflow: hidden; }

/* 画像：枠いっぱい＆アスペクト維持（letterbox/歪み防止） */
.sd.sec-186{ display: block; width: 100%; height: 100%; object-fit: cover; }




/* 流れる画像 */
/* デフォルト（入れ忘れ時の保険） */
:root{
  --nx-height: 64px;   /* 帯の高さ */
  --nx-speed: 26s;     /* 小さいほど速い */
}

/* 器：高さを決めて中身をはみ出させる */
.nx-ticker2{
  position: relative;
  width: 100%;
  height: var(--nx-height);
  overflow: hidden;
}

/* トラック：画像2枚を横並びにして “自分幅の50%” だけ左に流す → 無限ループ */
.nx-track{
  display: inline-flex;
  height: 100%;
  gap: 0;
  will-change: transform;
  animation: nx-marquee var(--nx-speed) linear infinite;
  transform: translateX(0);
}

/* 画像は帯の高さにフィット（横幅は自動） */
.nx-track img{
  height: 100% !important;
  width: auto !important;
  display: block;
  flex: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 2枚ぶんのうち “1枚ぶん” だけスライド（= 自幅の 50%） */
@keyframes nx-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ユーザーが動きを減らす設定なら停止 */
@media (prefers-reduced-motion: reduce){
  .nx-track{ animation: none; }
}
/* 旧ティッカー完全停止（このページ内だけに限定） */
.sd.sec-66 .sec-67[data-type="carousel"]::after,
.sd.sec-66 .sec-67::after{
  content: none !important;
  animation: none !important;
  background: none !important;
  height: 0 !important;
}

/* 旧スライドの中身も念のため無効化（表示させない） */
.sd.sec-66 .sec-68,
.sd.sec-66 .sec-69{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* スマホは少し低めに */
@media (max-width: 540px){
  .nx-ticker2{ --nx-height: clamp(28px, 8vw, 64px); --nx-speed: 12s; }
}