/* ヘッダー上下をスリム化 */
.zpheader-style-01 .theme-header .zpcontainer {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
/* スマホ時：ロゴを小さくしてヘッダーをスリム化 */
@media (max-width: 768px) {
  .theme-branding-info img {
    max-width: 100px !important;
    height: auto !important;   
  }  
  .theme-branding-info {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* 2段表示のベース */
.theme-menu-name{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

/* メニューごとの英語 */
.theme-menu-name[data-theme-menu-name="ホーム"]::after {
  content: "HOME";
}
.theme-menu-name[data-theme-menu-name="サービス案内"]::after {
  content: "SERVICE";
}
.theme-menu-name[data-theme-menu-name="会社案内"]::after {
  content: "ABOUT";
}
.theme-menu-name[data-theme-menu-name="お問い合わせ"]::after {
  content: "CONTACT";
}

.theme-menu-name::after{
  font-size: 11px;
  opacity: .7;
  margin-top: 4px;
  letter-spacing: .06em;
}
@media screen and (max-width: 1024px){
  .theme-menu-name::after{
    display: none;
  }
}

/* ヒーローテキスト：黒い縁取り＋ブラー */
.shadow {
  color: #ffffff;

  text-shadow:
    /* 黒い縁取り（内側） */
    2px 0 3px rgba(0,0,0,0.95),
   -2px 0 3px rgba(0,0,0,0.95),
    0 2px 3px rgba(0,0,0,0.95),
    0 -2px 3px rgba(0,0,0,0.95),

    /* 外側ブラー */
    0 0 10px rgba(0,0,0,0.7),
    0 0 20px rgba(0,0,0,0.5);
}

.half_highlight{
  /* ハイライト（下側だけ） */
  background: linear-gradient(
    transparent 75%,
    rgba(255, 210, 80, 0.35) 75%
  );

  /* 横幅を文字幅にする（displayは変えない） */
  width: fit-content;
  max-width: 100%;

  /* ちょい余白（好みで） */
  padding: 0 0.06em;

  /* 複数行のときも自然に（保険） */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* 画像カラムの左右paddingを消す */
.image_no_padding {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.tel_box {
  position: relative;
  background: linear-gradient(135deg, #b30000, #e60000);
  color: #fff;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  overflow: hidden; /* キラン用 */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tel_box::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -150%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: skewX(-20deg);
}
.tel_box:hover::after {
  animation: shine 0.8s ease forwards;
}

@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
/* 送信ボタンを青系に */
.zfbtnSubmit {
  background: #1e5bd6 !important;
  color: #ffffff !important;
}

/* =========================
   CTA セクション（背景）
========================= */
.cta-bg {
  position: relative;
}

/* 背景を少し暗くするオーバーレイ */
.cta-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* 暗幕 */
  z-index: 0;
}

/* 中身を前面に */
.cta-bg > * {
  position: relative;
  z-index: 1;
}


/* =========================
   CTA テキスト（可読性UP）
========================= */
.cta-text,
.cta-text h2,
.cta-text h3,
.cta-text p {
  color: #ffffff !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}


/* =========================
   Premium お問い合わせボタン
========================= */
.premium a,
a.premium,
.premium .zpbutton,
.zpbutton.premium {
  position: relative !important;
  overflow: hidden !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  background: linear-gradient(
    180deg,
    #1e4fa8 0%,
    #163b7d 100%
  ) !important;

  color: #ffffff !important;
  text-decoration: none !important;

  padding: 14px 42px !important;
  border-radius: 3px !important; /* ほんのり丸角 */

  font-weight: 600 !important;
  letter-spacing: 0.05em !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
}


/* 光が走る演出 */
.premium a::before,
a.premium::before,
.premium .zpbutton::before,
.zpbutton.premium::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );

  transition: left 0.6s ease !important;
  pointer-events: none !important;
}


/* hover時 */
.premium a:hover,
a.premium:hover,
.premium .zpbutton:hover,
.zpbutton.premium:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  filter: brightness(1.05) !important;
}

/* hover時の光 */
.premium a:hover::before,
a.premium:hover::before,
.premium .zpbutton:hover::before,
.zpbutton.premium:hover::before {
  left: 140% !important;
}
/* ヒーロー背景を右→左へ */
.zphero-slide .zpslider-img {
  animation: heroScroll 40s linear infinite alternate;
  background-size: 120% auto; /* 少し拡大して動きを自然に */
}
@media (max-width: 768px){
  .zphero-slide .zpslider-img {
    background-size: 200% auto;
  }
}
@keyframes heroScroll {
  0% {
    background-position: right center;
  }
  100% {
    background-position: left center;
  }
}
/*  */
.zpicon-container.zpicon-align-left .zpicon-heading {
    padding-inline-start: 2px;
}


/* 画像がキラッと光る */
.kiran {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.kiran::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
}

.kiran:hover::before {
  animation: shine 0.8s ease;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* 遅れアニメーション */
.delay-slide01{
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInDelay 0.5s ease forwards;
  animation-delay:4s;
}
.delay-slide02{
  opacity: 0;
  transform: translateX(-1200px);
  animation: slideInDelay 0.5s ease forwards;
  animation-delay:8.3s;
}
/* アニメーション */
@keyframes slideInDelay {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}