.elementor-kit-24888{--e-global-color-primary:#0057D8;--e-global-color-secondary:#000000;--e-global-color-text:#333333;--e-global-color-accent:#000000;--e-global-color-c0dabe3:#FFFFFF;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Noto Sans JP";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Noto Sans JP";--e-global-typography-accent-font-weight:700;}.elementor-kit-24888 e-page-transition{background-color:#FFBC7D;}.elementor-kit-24888 h2{font-size:42px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== 共通ベース ===== */
.hero-reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;

  /* 初期状態 */
  transform: translateX(-120%);
  opacity: 0;
  text-shadow: none;

  /* アニメーション（delay は行ごとに data 属性で付与される） */
  animation:
    slide-fade 0.9s cubic-bezier(.77,0,.18,1) var(--delay-slide, 0s) forwards,
    glow-on 0.10s linear var(--delay-glow-on, 0s) forwards,
    glow-off 0.40s linear var(--delay-glow-off, 0s) forwards;
}

.hero-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff; /* 必要なら背景に合わせて変える */
  transform: translateX(0);
  z-index: 2;

  animation: mask-wipe 1s cubic-bezier(.77,0,.18,1) var(--delay-mask, 0s) forwards;
}

/* ===== キーフレーム ===== */
@keyframes slide-fade {
  0% { opacity: 0; transform: translateX(-120%); }
  10% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes glow-on {
  to { text-shadow: 0 0 25px rgba(255,255,255,.9); }
}

@keyframes mask-wipe {
  to { transform: translateX(105%); }
}

@keyframes glow-off {
  to { text-shadow: none; }
}
/* ----- レスポンシブ微調整（必要なら） -----
@media (max-width:767px){
  .hero-reveal{transform:translateX(-150%);}  ← スマホでオフセットを拡大 等
}
*/

/* ─── 固定ヘッダー ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent; /* 透過にする */
  transition: background .25s ease, backdrop-filter .25s ease;
}

/* ─── ヒーローを残り高さにフィット ─── */
.hero-fit{
  /* 100vh からヘッダー高を引いたぶんだけ高さを確保 */
  min-height:calc(100vh - var(--header-h));
  /* モダン端末では svh で上書き */
  min-height:calc(100svh - var(--header-h));

  display:flex;
  flex-direction:column;
  justify-content:flex-end;   /* 垂直：下寄せ  */
  align-items:flex-start;     /* 水平：左寄せ */

  /* 余白は足さない ── padding-top を削除 */
}

/* ── 追記するのはこの 1 行 ── */
.hero-reveal{
  font-size:clamp(28px, 5vw + 1rem, 96px);
}

#works-it{
  scroll-margin-top:var(--header-h);
}
#works-web{
  scroll-margin-top:var(--header-h);
}
#works-sns{
  scroll-margin-top:var(--header-h);
}

@media (max-width: 767px) {
  .mobile-text {
    font-size: clamp(12px, 3.5vw, 16px);
  }
}/* End custom CSS */