/***************************************************
  Zoho Sites Custom CSS（最適化・整理版 / 2026-01-21）
  方針：A（CSS固定値で“下層だけ”ヘッダー分の余白を確保）
***************************************************/

/* =========================
   0) 変数（ここだけ触ればOK）
========================= */
:root{
  /* Header */
  --header-pad-y-pc: 2px;
  --header-pad-y-sp: 8px;

  --header-inner-max-pc: 1200px;
  --header-inner-pad-x-pc: 16px;
  --header-inner-pad-x-sp: 16px;

  --header-glass-bg: rgba(255,255,255,0.14);
  --header-glass-bg-strong: rgba(255,255,255,0.22);
  --header-glass-blur: 14px;
  --header-glass-border: rgba(255,255,255,0.22);
  --header-glass-shadow: 0 18px 50px rgba(0,0,0,0.10);

  --header-glass-extend-top-pc: 28px;
  --header-glass-extend-top-sp: 18px;

  /* 下層の本文オフセット（A：固定値） */
  --zs-header-h: 96px;

  /* Tag heading */
  --tag-heading-max: 1200px;
  --tag-heading-pad-x: 20px;
  --tag-heading-mt: 50px;
  --tag-heading-mb: 40px;
  --tag-heading-gap: 14px;

  /* Accent */
  --accent: #AFD147;

  /* Service Tabs */
  --svc-accent:#AFD147;
  --svc-menu-w:280px;
  --svc-gap:40px;
  --svc-card-r:10px;

  /* ✅ 追加：カード（画像）高さ＝メニュー高さの基準 */
  --svc-card-h: 520px; /* ←ここだけ調整すればOK */

  --svc-overlay-pad-x:18px;
  --svc-overlay-pad-b:16px;
  --svc-grad: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}

/* =========================
   0.1) ガタつき（横ズレ）対策
========================= */
html{ scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}

/* 横方向のはみ出し保険（Service Tabs のabsolute等で横スクロールが出るのを抑止） */
html, body{ max-width:100%; }
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

/* =========================
   1) NEWS タグページ（/blogs/tag/news）
========================= */
body.news-tag-page #thememaincontent[data-zs-app="blogs"] .theme-blog-category-column{ display:none !important; }
body.news-tag-page #thememaincontent[data-zs-app="blogs"] .theme-blog-container-column{
  flex:0 0 100% !important;
  max-width:100% !important;
}
body.news-tag-page #thememaincontent[data-zs-app="blogs"] .theme-blog-container-column .zpcol-md-6,
body.news-tag-page #thememaincontent[data-zs-app="blogs"] .theme-blog-container-column .zpcol-sm-12{
  flex:0 0 100% !important;
  max-width:100% !important;
}
body.news-tag-page .theme-blog-container{
  max-width:780px;
  margin:0 auto 32px;
  padding:16px 20px;
  border:1px solid #E5E5E5;
  border-radius:6px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.04);
}
body.news-tag-page h1.theme-blog-list-seo{ margin-bottom:24px; }
body.news-tag-page .theme-blog-heading{
  font-size:1.5rem !important;
  line-height:1.6;
  margin:0 0 8px;
  font-weight:700;
}
body.news-tag-page .theme-blog-heading a{ color:#1F1F1F; text-decoration:none; }
body.news-tag-page .theme-blog-heading a:hover{ opacity:0.7; }
body.news-tag-page .theme-blog-readmore{ margin-top:12px; }
body.news-tag-page .theme-blog-readmore a{ color:var(--accent); font-weight:600; }
body.news-tag-page .theme-blog-date-container{
  margin-top:16px;
  padding-top:10px;
  border-top:1px solid #F0F0F0;
  font-size:0.85rem;
  color:#555;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
@media (max-width:768px){
  body.news-tag-page .theme-blog-container{
    max-width:100%;
    padding:18px 16px;
    margin-bottom:24px;
    box-shadow:0 4px 12px rgba(0,0,0,0.04);
  }
  body.news-tag-page .theme-blog-heading{ font-size:1.25rem !important; }
  body.news-tag-page .theme-blog-date-container{ flex-direction:column; gap:4px; }
}

/* =========================
   2) ACHIEVEMENTS タグページ（/blogs/tag/achievements）
========================= */
.achievements-tag-page .theme-blog-category-column{ display:none !important; }
.achievements-tag-page .theme-blog-container-column{
  width:100% !important;
  max-width:1200px;
  margin:0 auto;
  float:none;
}
.achievements-tag-page .theme-blog-container-column > .zprow[data-zs-app="blog_comments"]{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:40px 28px;
}
.achievements-tag-page .theme-blog-container-column > .zprow[data-zs-app="blog_comments"] > .zpcol-md-6{
  width:100% !important;
  max-width:none !important;
  float:none !important;
}
.achievements-tag-page .theme-blog-container{
  height:100%;
  display:flex;
  flex-direction:column;
  background:#ffffff;
  border-radius:16px;
  padding:16px 16px 20px;
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
  box-sizing:border-box;
}
.achievements-tag-page .theme-blog-heading{ font-size:1.1rem; line-height:1.5; margin:0 0 10px; }
.achievements-tag-page .theme-blog-summary-image{ margin:0 0 10px; }
.achievements-tag-page .theme-blog-summary-image img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}
.achievements-tag-page .theme-blog-container .theme-blog-part .theme-blog-summary-image + p,
.achievements-tag-page .theme-blog-container .theme-blog-part .theme-blog-summary-image + p ~ *{
  display:none !important;
}
.achievements-tag-page .theme-blog-readmore{ margin-top:auto; }
.achievements-tag-page .theme-blog-readmore a{
  display:inline-block;
  padding:4px 14px;
  border-radius:999px;
  font-size:0.8rem;
  text-decoration:none;
  background:#222;
  color:#fff;
  transition:opacity 0.2s ease;
}
.achievements-tag-page .theme-blog-readmore a:hover{ opacity:0.8; }
.achievements-tag-page .theme-blog-date-container{ font-size:0.7rem; opacity:0.6; margin-top:6px; }
.achievements-tag-page .theme-blog-list-seo{ font-size:1.4rem; margin-bottom:24px; }
@media (max-width:1024px){
  .achievements-tag-page .theme-blog-container-column > .zprow[data-zs-app="blog_comments"]{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:767px){
  .achievements-tag-page .theme-blog-container-column > .zprow[data-zs-app="blog_comments"]{
    grid-template-columns:1fr;
  }
  .achievements-tag-page .theme-blog-container{ border-radius:12px; padding:14px 14px 18px; }
}

/* =========================
   3) カスタム見出し（Companyページ合わせ）
========================= */
.achievements-tag-page h1.theme-blog-list-seo,
.news-tag-page h1.theme-blog-list-seo{ display:none !important; }

.achievements-custom-heading,
.news-custom-heading{
  text-align:left;
  max-width: var(--tag-heading-max);
  margin: var(--tag-heading-mt) auto var(--tag-heading-mb) !important;
  padding-left: var(--tag-heading-pad-x);
  padding-right: var(--tag-heading-pad-x);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap: var(--tag-heading-gap);
}
.achievements-custom-heading .en-title,
.news-custom-heading .en-title{ order:-1; }

.achievements-custom-heading .en-title,
.news-custom-heading .en-title{
  font-family:"Inter", sans-serif;
  font-size:52px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:0.01em;
  color:#1F1F1F;
  margin:0;
}
.achievements-custom-heading .en-title .initial,
.news-custom-heading .en-title .initial{ color:var(--accent); font-weight:800; }

.achievements-custom-heading .jp-title,
.news-custom-heading .jp-title{
  font-size:18px;
  font-weight:600;
  line-height:1.7;
  color:#1F1F1F;
  margin:0;
}
@media (max-width:767px){
  :root{
    --tag-heading-pad-x: 16px;
    --tag-heading-mt: 36px;
    --tag-heading-mb: 28px;
    --tag-heading-gap: 10px;
  }
  .achievements-custom-heading .en-title,
  .news-custom-heading .en-title{ font-size:40px; }
  .achievements-custom-heading .jp-title,
  .news-custom-heading .jp-title{ font-size:16px; }
}

/* =========================
   4) 共通：不要要素の非表示
========================= */
[data-zs-app="blogs"] .theme-blog-author,
[data-zs-app="blogpost"] .theme-blog-author,
.theme-blog-author-cont{ display:none !important; }
.zpsocialicon-floater{ display:none !important; }
.theme-single-blog-social-cat-tag-group{ display:none !important; }

/* =========================
   5) ブログ詳細：タグの見た目
========================= */
[data-zs-app="blogpost"] .theme-singlepost-tags-container ul li a{
  display:inline-block;
  padding:4px 10px;
  border-radius:3px;
  background:#4F6C96;
  color:#ffffff !important;
  text-decoration:none;
}
[data-zs-app="blogpost"] .theme-singlepost-tags-container ul li a:hover{ opacity:0.85; }

/* =========================
   6) フッターリンクホバー（全ページ共通）
========================= */
.theme-footer-area a{
  color:#1F1F1F !important;
  text-decoration:none;
  transition:color 0.3s ease, opacity 0.3s ease, text-decoration-color 0.3s ease;
}
.theme-footer-area a:hover{
  color:var(--accent) !important;
  opacity:0.8;
  text-decoration:underline;
}

/* =========================
   7) contactsc：ホバーで背景切替
========================= */
.contactsc{
  background:#000;
  background-size:cover;
  background-position:center;
  transition:background 0.6s ease, opacity 0.6s ease;
}
.contactsc:hover{
  background-image:url("/トップページ_画像最適化/contactbg.png");
  background-size:cover;
  background-position:center;
}
.contactsc img{ pointer-events:none; }

/* =========================
   8) コメント機能を非表示（一覧＋詳細）
========================= */
[data-zs-app="blogs"] .theme-blog-comment,
[data-zs-app="blogs"] .theme-blog-comments,
[data-zs-app="blogs"] .theme-blog-comment-count,
[data-zs-app="blogs"] .theme-blog-comment-count-container,
[data-zs-app="blogs"] a[href*="comment"],
[data-zs-app="blogs"] a[href*="#comment"],
[data-zs-app="blogs"] a[title*="コメント"],
[data-zs-app="blogs"] a[aria-label*="コメント"]{ display:none !important; }

[data-zs-app="blogpost"] .theme-blog-comments,
[data-zs-app="blogpost"] .theme-blog-comment,
[data-zs-app="blogpost"] .theme-blog-comment-count,
[data-zs-app="blogpost"] .theme-blog-comment-box,
[data-zs-app="blogpost"] .theme-blog-comment-form,
[data-zs-app="blogpost"] .theme-blog-comment-container,
[data-zs-app="blogpost"] [id*="comment"],
[data-zs-app="blogpost"] [class*="comment"],
[data-zs-app="blogpost"] a[href*="#comment"]{ display:none !important; }

/* =========================
   9) Header（PC固定 + Glass 1箇所集約 + jitter対策）
========================= */
body{ padding-top: 0 !important; }

/* PC: ヘッダー外枠固定（Zohoがtransform/transitionで揺らすのを抑止） */
@media (min-width: 992px){
  [data-headercontainer="zptheme-data-headercontainer"]{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    width: 100% !important;      /* 100vw は避ける */
    margin: 0 !important;

    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  [data-headercontainer="zptheme-data-headercontainer"].theme-header-animate{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Topbar: 追従状態なら確実に畳む（クラス付与される環境向け） */
@media (min-width: 992px){
  body.is-header-stuck
  .theme-header-topbar.theme-topbar-not-in-header-05[data-theme-topbar="zptheme-topbar"]{
    display:none !important;
  }
}

/* Header 本体：Glass（重複させない） */
:where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area,.theme-header-container,.theme-header-wrapper){
  position: relative !important;
  isolation: isolate;
  background: transparent !important;
  background-image: none !important;
  overflow: visible !important;
}

:where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area,.theme-header-container,.theme-header-wrapper)::before{
  content:"" !important;
  display:block !important;

  position:absolute !important;
  top: calc(-1 * var(--header-glass-extend-top-sp)) !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  z-index:0 !important;
  pointer-events:none !important;

  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), rgba(255,255,255,0.08)),
    linear-gradient(to bottom, var(--header-glass-bg-strong), var(--header-glass-bg)) !important;
  border-bottom:1px solid var(--header-glass-border) !important;
  box-shadow: var(--header-glass-shadow) !important;
}

@media (min-width:992px){
  :where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area,.theme-header-container,.theme-header-wrapper)::before{
    top: calc(-1 * var(--header-glass-extend-top-pc)) !important;
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area,.theme-header-container,.theme-header-wrapper)::before{
    backdrop-filter: blur(var(--header-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--header-glass-blur)) !important;
  }
}

:where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area,.theme-header-container,.theme-header-wrapper) > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Header inner spacing */
:where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area) :where(.zpcontainer,.zpcontainer-fluid){
  padding-top: var(--header-pad-y-sp) !important;
  padding-bottom: var(--header-pad-y-sp) !important;
  background: transparent !important;
  background-image: none !important;
  box-sizing: border-box !important;
}

@media (min-width:992px){
  :where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area) :where(.zpcontainer,.zpcontainer-fluid){
    padding-top: var(--header-pad-y-pc) !important;
    padding-bottom: var(--header-pad-y-pc) !important;

    max-width: var(--header-inner-max-pc) !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left: var(--header-inner-pad-x-pc) !important;
    padding-right: var(--header-inner-pad-x-pc) !important;
  }
}

@media (max-width:991px){
  :where(#themeheader,#header,header,.zpheader,.theme-header,.theme-header-area) :where(.zpcontainer,.zpcontainer-fluid){
    padding-left: var(--header-inner-pad-x-sp) !important;
    padding-right: var(--header-inner-pad-x-sp) !important;
  }
}

:where(#themeheader,#header,header) img{ height:auto !important; width:auto !important; max-height:44px; }

/* 追従アニメ（theme-header-animate）が height/padding 等を動かして揺れる場合の抑止 */
[data-headercontainer="zptheme-data-headercontainer"].theme-header-animate .theme-header{
  animation: none !important;
}

/* 追従中は glass を軽量化 */
@media (min-width: 992px){
  [data-headercontainer="zptheme-data-headercontainer"].theme-header-animate .theme-header::before{
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  }
}

/* =========================
   10) PC用：グローバルヘッダー（メニュー演出 / 統合・修正版）
   - 親→子の隙間で閉じる問題を解消（隙間ゼロ + hover bridge）
   - ノッチ（二重：白＋黒）を“1つ（黒#1f1f1f・中央）”に統一
========================= */
@media (min-width: 992px){

  /* =========================
     0) 変数（ここだけ触れば調整OK）
  ========================= */
  :root{
    /* --- Parent (Global Nav) --- */
    --p-gap: 10px;
    --p-pill-r: 999px;
    --p-pill-py: 10px;
    --p-pill-px: 14px;

    --p-ja-size: 15px;
    --p-ja-weight: 700;
    --p-en-size: 10px;
    --p-en-weight: 600;

    --p-text: #161616;
    --p-text-sub: rgba(0,0,0,.58);

    --p-bg: transparent;
    --p-bg-hover: rgba(0,0,0,.04);
    --p-bg-selected: rgba(0,0,0,.06);

    --p-shadow-hover: 0 12px 30px rgba(0,0,0,.10);
    --p-shadow-selected: 0 14px 36px rgba(0,0,0,.12);

    /* 共通アクセント */
    --accent: #1f1f1f;

    /* --- Dropdown (Sub menu) --- */
    --dd-bg: #fff;
    --dd-border: rgba(0,0,0,.08);
    --dd-shadow: 0 18px 50px rgba(0,0,0,.18);

    /* 子カード：コンパクト設計（右余白詰め） */
    --dd-r: 14px;
    --dd-pad-y: 8px;
    --dd-pad-x: 10px;

    /* 子項目 */
    --dd-item-r: 12px;
    --dd-item-py: 9px;
    --dd-item-pl: 12px; /* 左 */
    --dd-item-pr: 10px; /* 右（←詰めたいなら 8px へ） */

    --dd-font: 13px;
    --dd-lh: 1.18;

    --dd-text: #161616;
    --dd-hover-bg: rgba(0,0,0,.06);

    /* 親→子のホバー切れ防止 */
    --hover-bridge-h: 14px; /* 隙間を跨ぐ透明エリアの高さ */

    /* ✅ ノッチ（ひし形）統一設定 */
    --dd-notch-size: 10px;      /* ひし形サイズ */
    --dd-notch-top: -6px;       /* カード上からの出っ張り量（負数） */
    --dd-notch-color: #1f1f1f;  /* ひし形色 */
  }

  /* =========================================================
     1) 親メニュー：Zoho既存装飾の無効化（線/矢印/擬似要素など）
  ========================================================= */
  .theme-header .theme-menu ul[data-zs-menu-container] > li,
  .theme-header .theme-menu ul[data-zs-menu-container] > li:hover,
  .theme-header .theme-menu ul[data-zs-menu-container] > li.theme-menu-selected,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a:hover,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a:focus,
  .theme-header .theme-menu ul[data-zs-menu-container] > li.theme-menu-selected > a{
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li::after,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a::after{
    content: none !important;
    display: none !important;
    border: none !important;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li > a svg,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a .zsmenu-down-arrow,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a i[class*="down"],
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a
    > .theme-sub-li-menu.theme-non-responsive-menu.theme-submenu-down-arrow{
    display: none !important;
  }

  /* =========================================================
     2) 親メニュー：レイアウト（gapで整列）
  ========================================================= */
  .theme-header .theme-menu ul[data-zs-menu-container]{
    display: flex !important;
    align-items: center;
    gap: var(--p-gap);
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li{
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* =========================================================
     3) 親メニュー：ピル化
  ========================================================= */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a{
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: var(--p-pill-py) var(--p-pill-px) !important;
    border-radius: var(--p-pill-r) !important;

    background: var(--p-bg) !important;
    color: var(--p-text) !important;
    text-decoration: none !important;

    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    transform: translateZ(0);
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li:hover > a{
    background: var(--p-bg-hover) !important;
    box-shadow: var(--p-shadow-hover) !important;
    transform: translateY(-1px);
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li.theme-menu-selected > a{
    background: var(--p-bg-selected) !important;
    box-shadow: var(--p-shadow-selected) !important;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li > a:focus-visible{
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31,31,31,.16), var(--p-shadow-hover) !important;
    background: var(--p-bg-hover) !important;
  }

  .theme-header .theme-menu-name{
    display: inline-block;
    font-size: var(--p-ja-size);
    font-weight: var(--p-ja-weight);
    line-height: 1.1;
    letter-spacing: .02em;
    color: var(--p-text) !important;
  }

  .theme-header .theme-menu-name::after{
    content: "";
    display: block;
    margin-top: 4px;
    font-size: var(--p-en-size);
    font-weight: var(--p-en-weight);
    letter-spacing: .12em;
    line-height: 1.1;
    color: var(--p-text-sub) !important;
    text-transform: uppercase;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li > a .theme-menu-name{
    position: relative;
    padding-bottom: 2px;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li > a .theme-menu-name::before{
    content:"";
    position:absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    transform: translateX(-50%);
    transition: width .18s ease;
    opacity: .9;
  }
  .theme-header .theme-menu ul[data-zs-menu-container] > li:hover > a .theme-menu-name::before{
    width: 28px;
  }
  .theme-header .theme-menu ul[data-zs-menu-container] > li.theme-menu-selected > a .theme-menu-name::before{
    width: 36px;
  }

  .theme-header .theme-menu-name[data-theme-menu-name="メッセージ"]::after{ content:"Message"; }
  .theme-header .theme-menu-name[data-theme-menu-name="事業内容"]::after{ content:"Services"; }
  .theme-header .theme-menu-name[data-theme-menu-name="実績紹介"]::after{ content:"Work"; }
  .theme-header .theme-menu-name[data-theme-menu-name="会社案内"]::after{ content:"About"; }
  .theme-header .theme-menu-name[data-theme-menu-name="お問い合わせ"]::after{ content:"Contact"; }
  .theme-header .theme-menu-name[data-theme-menu-name="お知らせ"]::after{ content:"News"; }

  /* =========================================================
     4) 子メニュー：箱（カード）＋位置（親の真下センター）
     - 隙間を作らない（margin-top を使わず top で密着）
     - 右余白を詰める（width:max-content）
     - ノッチを “1つだけ（黒・中央）” に統一
  ========================================================= */

  /* ✅ 注意：
     ここで「li ul::before/::after を全削除」すると、
     自前ノッチも潰れて競合が起きるため、”サブメニュー本体” 以外だけを潰す。
  */

  /* (A) テーマが別要素に付ける矢印/ノッチをできるだけ潰す（保険） */
  .theme-header .theme-menu ul[data-zs-menu-container] li .theme-submenu::before,
  .theme-header .theme-menu ul[data-zs-menu-container] li .theme-submenu::after,
  .theme-header .theme-menu ul[data-zs-menu-container] li .theme-submenu-container::before,
  .theme-header .theme-menu ul[data-zs-menu-container] li .theme-submenu-container::after{
    content: none !important;
    display: none !important;
  }

  /* (B) 子メニュー本体（ul.theme-sub-menu も含む） */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul.theme-sub-menu,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu-container{
    position: absolute !important;
    top: calc(100% - 2px) !important;         /* 親の直下に“密着” */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;                 /* 隙間の原因を排除 */

    width: max-content !important;            /* 右側の空白を詰める */
    min-width: 0 !important;
    max-width: 300px !important;

    padding: var(--dd-pad-y) var(--dd-pad-x) !important;
    background: var(--dd-bg) !important;
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-r) !important;
    box-shadow: var(--dd-shadow) !important;

    overflow: hidden !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* ✅ (C) ノッチ（二重問題の根本対策）
     - “白ひし形” が ul::after で来るケースが多いので ::after を殺す
     - ノッチは ul::before 1個で統一（黒・中央）
  */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul::after,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul.theme-sub-menu::after,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu::after,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu-container::after{
    content: none !important;
    display: none !important;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul.theme-sub-menu::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu-container::before{
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 50% !important;
    top: var(--dd-notch-top) !important;

    width: var(--dd-notch-size) !important;
    height: var(--dd-notch-size) !important;

    transform: translateX(-50%) rotate(45deg) !important;
    background: var(--dd-notch-color) !important;

    border: 0 !important;
    box-shadow: none !important;
    border-radius: 2px !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  /* 子：リスト素の装飾を全削除 */
  .theme-header .theme-menu ul[data-zs-menu-container] li ul > li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .theme-header .theme-menu ul[data-zs-menu-container] li ul > li::marker{
    content: "" !important;
  }

  /* 子：リンク（行） */
  .theme-header .theme-menu ul[data-zs-menu-container] li ul > li > a{
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;

    padding: var(--dd-item-py) var(--dd-item-pr) var(--dd-item-py) var(--dd-item-pl) !important;
    border-radius: var(--dd-item-r) !important;

    color: var(--dd-text) !important;
    font-size: var(--dd-font) !important;
    font-weight: 650 !important;
    line-height: var(--dd-lh) !important;
    letter-spacing: .01em;

    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;

    transition: background-color .16s ease, transform .16s ease;
  }

  /* 子：左アクセントバー（hover時だけ） */
  .theme-header .theme-menu ul[data-zs-menu-container] li ul > li > a::before{
    content:"";
    position:absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: var(--accent);
    transform: translateY(-50%);
    opacity: .9;
    transition: height .16s ease;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] li ul > li:hover > a{
    background: var(--dd-hover-bg) !important;
    transform: translateX(2px);
  }
  .theme-header .theme-menu ul[data-zs-menu-container] li ul > li:hover > a::before{
    height: 18px;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] li ul > li > a:focus-visible{
    outline: none !important;
    background: var(--dd-hover-bg) !important;
    box-shadow: 0 0 0 3px rgba(31,31,31,.16) !important;
  }

  /* =========================================================
     5) 親→子の“隙間で閉じる”対策（hover bridge）
  ========================================================= */
  .theme-header .theme-menu ul[data-zs-menu-container] > li::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--hover-bridge-h);
    background: transparent;
    pointer-events: auto;
  }

  /* =========================================================
     6) 子メニュー：出現アニメ（hoverで開く場合）
  ========================================================= */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul{
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px) !important;
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    pointer-events: none;
  }

  .theme-header .theme-menu ul[data-zs-menu-container] > li:hover > ul,
  .theme-header .theme-menu ul[data-zs-menu-container] > li:focus-within > ul{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto;
  }
}

/* =========================
   11) Hero overlay SAFE版（Zoho向け）
========================= */
.hero-has-overlay{ position: relative !important; isolation: isolate; }
.hero-has-overlay .zpsection-bg,
.hero-has-overlay .zpbackground,
.hero-has-overlay .zpsection-bg-image,
.hero-has-overlay .zpsection-bg-video,
.hero-has-overlay .zpsection-bg-overlay,
.hero-has-overlay [data-zs-bg]{ z-index: 0 !important; }
.hero-has-overlay .zpcontainer,
.hero-has-overlay .zpcontainer-fluid,
.hero-has-overlay .zprow,
.hero-has-overlay .zpcol{ position: relative !important; z-index: 1 !important; }
.hero-has-overlay .svc-circle--overlay{ position: absolute !important; z-index: 2 !important; pointer-events: auto; }

/* =========================
   12) Service Tabs（左メニュー + 右オーバーレイ）
   対象：data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"
========================= */
[data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]{ overflow:visible !important; }

/* Tabs残骸（枠/線/背景/三角）をピンポイントで無効化 */
[data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}
[data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container::before,
[data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container::after{
  content:none !important;
  display:none !important;
}

/* SP/accordion 用に content側へ複製されるヘッダは PC では非表示 */
@media (min-width: 992px){
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container > .zptab,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container > .zptabheader,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptabheader{
    display:none !important;
  }
}

/* =========================
   ✅ PC：左右を「同じ高さ」に揃える
   - 右カード（画像）高さ = --svc-card-h
   - 左メニューも stretch で同じ高さ
   - 矢印は active の時だけ常時表示（理想画像の挙動）
========================= */
@media (min-width: 992px){
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabelem-inner-container{
    display:flex;
    align-items:stretch;                 /* ✅ 重要：左右を同じ高さにする */
    gap:var(--svc-gap);
  }

  /* 左：メニュー（高さは右カードに合わせて stretch される） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container{
    width:var(--svc-menu-w);
    flex:0 0 var(--svc-menu-w);
    height:var(--svc-card-h);            /* ✅ 右に合わせる基準 */
    display:flex;
    flex-direction:column;
    justify-content:flex-start;          /* ✅ space-between をやめて自然配置 */
    gap:34px;                            /* ✅ メニュー間隔（お好みで） */
    padding:12px 0;                      /* ✅ 上下の余白 */
    margin:0;
    counter-reset: svc;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* Zoho既定のインジケーター/三角を消す */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container::before,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container::after{
    content:none !important;
    display:none !important;
  }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="indicator"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="pointer"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="caret"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="triangle"]{
    display:none !important;
  }

  /* 右：カード領域（高さを固定して「画像と同じ縦幅」にする） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container{
    flex:1;
    min-width:0;
    position:relative;
    height:var(--svc-card-h);            /* ✅ 右カード高を固定 */
  }

  /* メニュー見た目 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab{
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    background:transparent !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    position:relative;                   /* ✅ 矢印を外側に出すため */
  }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab .zptabicon{ display:none !important; }

  /* 左の 01/02/… */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab::before{
    counter-increment: svc;
    content: counter(svc, decimal-leading-zero);
    width:40px;
    font-weight:700;
    font-size:1.1rem;
    color:#aaa;
    transition:color .25s ease;
  }

  /* タイトル（日本語＋英語） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab .zptab-name{
    display:block;
    font-family:"Noto Sans JP", sans-serif;
    font-size:1.1rem;
    font-weight:700;
    color:#1f1f1f;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab[data-tab-name="販売促進"] .zptab-name::after{ content:"Sales Promotion"; }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab[data-tab-name="販売ルートの提案"] .zptab-name::after{ content:"Sales Channel Proposal"; }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab[data-tab-name="イベント企画・運営"] .zptab-name::after{ content:"Event Management"; }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab[data-tab-name="広告代理"] .zptab-name::after{ content:"Advertising"; }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab[data-tab-name="出版物"] .zptab-name::after{ content:"Publishing"; }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab .zptab-name::after{
    display:block;
    margin-top:2px;
    font-family:"Inter", sans-serif;
    font-size:.85rem;
    font-weight:500;
    color:#777;
    letter-spacing:.02em;
  }

  /* active の色 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab.zptab-active::before,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab.zptab-active .zptab-name,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab.zptab-active .zptab-name::after{
    color:var(--svc-accent) !important;
  }

  /* active panel（右）カード */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content{
    position:relative !important;
    height:100% !important;              /* ✅ 右カードを container 高に完全追従 */
    border-radius:var(--svc-card-r);
    overflow:hidden;
    background:transparent !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
  }

  /* グラデ */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--svc-grad);
    z-index:1;
    pointer-events:none;
  }

  /* 行余白を潰す */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zprow,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zprow-container{
    margin:0 !important;
  }

  /* 画像列（md-4系）を背景化 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-md-4"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-lg-4"]{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    z-index:0 !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-md-4"] img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* テキスト列（md-8系）を下部オーバーレイ化 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-md-8"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-lg-8"]{
    position:absolute !important;
    left:var(--svc-overlay-pad-x) !important;
    right:var(--svc-overlay-pad-x) !important;
    bottom:var(--svc-overlay-pad-b) !important;
    width:auto !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    z-index:2 !important;
  }

  /* active内のテキストは白 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zpheading,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zpheading *,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content h1,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content h2,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content h3{
    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zptext,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zptext *,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content p,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content li{
    color:rgba(255,255,255,.95) !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* =========================
   SP：横スクロールピル + 縦積み（現行方針を維持）
========================= */
@media (max-width: 768px){
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabelem-inner-container{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container{
    display:flex;
    flex-direction:row;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:6px 2px 10px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    height:auto;
    counter-reset: svc;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab{
    scroll-snap-align:start;
    flex:0 0 auto;
    min-width:210px;
    padding:10px 12px !important;
    border:1px solid #e5e5e5 !important;
    border-radius:999px;
    background:#fff !important;
    box-shadow:0 1px 0 rgba(0,0,0,.03);
    position:relative;
  }

  /* SPは矢印不要（ピルUI優先） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab::after{
    content:none !important;
    display:none !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab .zptab-name::after{ display:none !important; }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab.zptab-active{
    background:var(--svc-accent) !important;
    border-color:var(--svc-accent) !important;
  }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab.zptab-active .zptab-name,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab.zptab-active::before{
    color:#1f1f1f !important;
  }

  /* SPはオーバーレイ解除 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content{
    position:relative !important;
    overflow:visible !important;
    border-radius:14px;
  }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content::after{ display:none !important; }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-md-4"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-md-8"]{
    position:static !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-md-4"] img{
    height:auto !important;
    aspect-ratio:16/9;
    border-radius:14px;
    width:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content [class*="zpcol-md-8"]{
    margin-top:10px !important;
    padding:14px 14px 16px !important;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(17,17,17,.92), rgba(17,17,17,.78)) !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content h2{ border-bottom:2px solid var(--svc-accent); }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zpheading,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zpheading *{ color:var(--svc-accent) !important; }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zptext,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container .zptab-active-content .zptext *{ color:rgba(255,255,255,.95) !important; }
}

/* =========================
   13) 下層ページだけ：本文（thememaincontent）にヘッダー分の余白
   + 露出する領域を白で固定（A：固定値）
========================= */
@media (min-width: 992px){
  /* トップは現状維持 */
  html.zs-home #thememaincontent{
    padding-top: 0 !important;
  }

  /* 下層：メインコンテンツの先頭に余白を作る（固定値） */
  html:not(.zs-home) #thememaincontent{
    padding-top: calc(var(--zs-header-h) + env(safe-area-inset-top, 0px)) !important;
    background: #fff !important;   /* 黒の露出対策：最重要 */
  }

  /* テーマ側が黒背景でも白を優先 */
  html:not(.zs-home),
  html:not(.zs-home) body{
    background:#fff !important;
  }

  /* アンカー遷移時に見出しがヘッダーに隠れない保険 */
  html:not(.zs-home) :where(h1,h2,h3,h4,h5,h6,[id]){
    scroll-margin-top: calc(var(--zs-header-h) + 12px);
  }
}



/* =========================================
   矢印（Tabsメニュー）を完全に無効化
   - 三角矢印 / V字矢印 / Zoho既定の装飾もまとめて殺す
   - 最後に置いて「後勝ち」にする
========================================= */
@media (min-width: 992px){
  /* 対象ブロック（あなたが指定しているTabs） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container > .zptab::after,
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab::after{
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* 念のため：Zohoが差し込む矢印/ポインタ/インジケータ類 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="indicator"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="pointer"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="caret"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container [class*="triangle"],
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zsmenu-down-arrow{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* =========================================
   FIX（確定版）：サービスTabの見出し/本文が消える/はみ出す問題
   - Zoho側で列に付けたクラスで確実にターゲティング
     画像列   : svc-media
     テキスト列: svc-body
========================================= */
@media (min-width: 992px){

  /* 0) 以前の誤判定CSS（md-4/md-8やfirst/last等）が残っていても潰す“保険” */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content :where([class*="zpcol"], .svc-media, .svc-body){
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 1) 右側カードは丸角 + クリップ（外に出た本文を見せない） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container{
    border-radius: var(--svc-card-r) !important;
    overflow: hidden !important;
    position: relative !important;
    height: var(--svc-card-h) !important; /* 右カード高を確実に固定 */
  }

  /* 2) Active panel はカード領域いっぱいに */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content{
    position: relative !important;
    height: 100% !important;
    border-radius: var(--svc-card-r) !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  /* 3) 画像列（svc-media）を全面背景化 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-media{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 0 !important;
  }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 4) グラデ（テキストの背後に敷く） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content::after{
    content:"";
    position:absolute;
    inset:0;
    background: var(--svc-grad);
    z-index: 1;
    pointer-events: none;
  }

  /* 5) テキスト列（svc-body）を下部オーバーレイ化（ここが“確定”なので消えない） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body{
    position: absolute !important;
    left: var(--svc-overlay-pad-x) !important;
    right: var(--svc-overlay-pad-x) !important;
    bottom: var(--svc-overlay-pad-b) !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: 2 !important;

    /* 長文でもカード内に収める */
    max-height: calc(100% - (var(--svc-overlay-pad-b) + 24px)) !important;
    overflow: hidden !important; /* 全文見せたいなら auto に */
  }

  /* 6) 見出し/本文の余計なmarginで押し出されるのを抑制 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body :where(h1,h2,h3,p){
    margin: 0 0 10px !important;
  }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body p:last-child{
    margin-bottom: 0 !important;
  }

  /* 7) （任意）本文が長いときの行数制限 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body .zptext p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 2〜5で調整 */
    overflow: hidden;
  }

  /* 8) テキスト色（既に別CSSで指定済みなら重複OK） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body :where(.zpheading, .zpheading *, h1,h2,h3){
    color:#fff !important;
  }
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body :where(.zptext, .zptext *, p, li){
    color: rgba(255,255,255,.95) !important;
  }
}

/* =========================================
   ノッチ（白ひし形）を
   - カード中央へ
   - 色 #1f1f1f
   に変更（消さない）
========================================= */
@media (min-width: 992px){

  :root{
    --notch-color: #1f1f1f;
    --notch-size: 10px;     /* 8〜12で調整 */
    --notch-top: -6px;      /* 上への出し量（-5〜-8） */
  }

  /* A) 擬似要素ノッチ（ul側） */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul::after,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu::after,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu-container::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu-container::after{
    /* 「ノッチっぽい見た目」の最小セットを上書き */
    left: 50% !important;
    right: auto !important;
    top: var(--notch-top) !important;

    width: var(--notch-size) !important;
    height: var(--notch-size) !important;

    transform: translateX(-50%) rotate(45deg) !important;

    background: var(--notch-color) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* B) 実要素ノッチ（テーマが挿入する arrow/caret/pointer 等） */
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="arrow"],
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="caret"],
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="pointer"],
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="triangle"],
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="notch"],
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="tip"]{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: var(--notch-top) !important;
    transform: translateX(-50%) rotate(45deg) !important;

    width: var(--notch-size) !important;
    height: var(--notch-size) !important;

    background: var(--notch-color) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* SVGで描かれている場合（fill/stroke を黒へ） */
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="arrow"] svg,
  .theme-header .theme-menu ul[data-zs-menu-container] > li ul [class*="caret"] svg{
    fill: var(--notch-color) !important;
    stroke: var(--notch-color) !important;
  }
}

/* =========================================================
   FIX：子メニューのノッチを「中央＆#1f1f1f」に統一（確実版）
   - テーマ由来の白ノッチ（実要素）を殺す
   - 自前ノッチを擬似要素で再生成（中央・黒）
   - 親→子で閉じる“隙間”を a::after の bridge で解消
========================================================= */
@media (min-width: 992px){

  :root{
    --dd-notch-size: 10px;     /* ノッチサイズ（8〜12） */
    --dd-notch-top: -6px;      /* ノッチの出っ張り（-5〜-8） */
    --dd-notch-color: #1f1f1f; /* ノッチ色 */

    --bridge-w: 320px;         /* 親→子の“当たり”横幅（子カード幅より広めに） */
    --bridge-h: 18px;          /* 親→子の“当たり”高さ */
  }

  /* 1) テーマが挿入する白ノッチ（実要素）を広めに潰す */
  .theme-header .theme-menu ul[data-zs-menu-container] > li :is(
    [class*="arrow"], [class*="caret"], [class*="pointer"],
    [class*="triangle"], [class*="notch"], [class*="tip"]
  ){
    /* ノッチ以外まで消えるのが怖い場合は、次の 2) で自前ノッチが出るのを確認してから
       ここを「display:none」→「background/色変更」に切り替えます */
    display: none !important;
  }

  /* 2) 子メニュー本体に「自前ノッチ」を付ける（中央・黒） */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu-container{
    position: absolute !important; /* 既存の指定があっても念のため */
  }

  /* 既存で ::before/::after を殺していても “復活” させる */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > ul::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu::before,
  .theme-header .theme-menu ul[data-zs-menu-container] > li .theme-submenu-container::before{
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 50% !important;
    top: var(--dd-notch-top) !important;

    width: var(--dd-notch-size) !important;
    height: var(--dd-notch-size) !important;

    transform: translateX(-50%) rotate(45deg) !important;
    background: var(--dd-notch-color) !important;

    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  /* 3) 親→子の移動で閉じる問題：li::after ではなく a::after を“子カード幅”まで広げる */
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a{
    position: relative !important;
  }
  .theme-header .theme-menu ul[data-zs-menu-container] > li > a::after{
    content:"" !important;
    position:absolute !important;
    left: 50% !important;
    top: 100% !important;

    width: var(--bridge-w) !important;
    height: var(--bridge-h) !important;

    transform: translateX(-50%) !important;
    background: transparent !important;
    pointer-events: auto !important; /* hover を切らさない */
  }
}

@media (min-width: 992px){
  :root{
    --dd-bg: #fff;                 /* カード背景を白 */
    --dd-border: rgba(0,0,0,.08);  /* 枠線（好みで） */
  }
}

/* =========================================
   Service Tabs：画像上テキストを“程よく”収める（最終上書き）
   - 箱化（padding + 背景）
   - 高さを割合で制限
   - 行数制限（見出し/本文）
========================================= */
@media (min-width: 992px){

  :root{
    /* ここだけ触ればOK */
    --svc-overlay-pad-b: 18px;          /* 下からの距離（上に上げたい→増やす） */
    --svc-overlay-max-h: 44%;          /* 画像上テキストの最大占有率（38〜50%推奨） */

    --svc-box-pad: 14px;               /* 箱の内側余白 */
    --svc-box-bg: rgba(0,0,0,.46);     /* 箱背景（濃さ） */
    --svc-box-r: 10px;                 /* 箱角丸 */
    --svc-box-max-w: 560px;            /* 箱の最大幅（右端ベタ付きを防ぐ） */

    --svc-title-lines: 2;              /* 見出しの最大行数 */
    --svc-body-lines: 3;               /* 本文の最大行数 */
  }

  /* 1) まず “カード内で必ずクリップ” を担保（保険） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content{
    overflow: hidden !important;
  }

  /* 2) テキスト列（svc-body）を「箱」にする + 高さ制限 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body{
    /* 既存の absolute はそのまま活かしつつ、見た目と制限だけ上書き */
    padding: var(--svc-box-pad) !important;
    border-radius: var(--svc-box-r) !important;
    background: var(--svc-box-bg) !important;
    max-width: var(--svc-box-max-w) !important;

    /* ✅ “程よく”＝カードの一定割合以上は占有しない */
    max-height: var(--svc-overlay-max-h) !important;
    overflow: hidden !important;
  }

  /* 3) 見出し/本文の「デフォルトmargin」で押し出されるのを抑止 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body :where(h1,h2,h3,.zpheading,p){
    margin: 0 !important;
  }

  /* 4) 見出し：2行までで止める（長見出し対策） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body :where(h1,h2,h3){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--svc-title-lines);
    overflow: hidden;

    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  /* 5) 本文：3行までで止める（はみ出し防止の本丸） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body .zptext p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--svc-body-lines);
    overflow: hidden;

    line-height: 1.7 !important;
  }

  /* 6) svc-body 内に divider/hr 等が居ると“謎の灰色線”になりやすいので消す（保険） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body :is(hr,.zpdivider,[class*="divider"]){
    display:none !important;
  }
}

/* =========================================================
   Service Tabs：992〜1199px は「PCレイアウトのまま」
   ただし崩れる部分（幅/余白/文字/オーバーレイ）だけ補正
   ※ 必ずCSS最下部に置く（後勝ち）
========================================================= */
@media (min-width: 992px) and (max-width: 1199px){

  /* 1) この帯域だけ“窮屈さ”を緩和する値に調整 */
  :root{
    --svc-menu-w: 240px;    /* 280→240（左メニューを少し細く） */
    --svc-gap: 24px;        /* 40→24（左右の間を詰める） */
    --svc-card-h: 460px;    /* 520→460（高さを少し下げて詰まり軽減） */

    /* テキスト箱（あなたの最終上書き部分と整合させる） */
    --svc-overlay-max-h: 46%;   /* 44%が窮屈なら46〜52%で調整 */
    --svc-box-max-w: 520px;     /* 横幅を少し詰めて“右端ベタ付き”回避 */
    --svc-title-lines: 2;
    --svc-body-lines: 3;
  }

  /* 2) ここが重要：
        “縦積み”にされたり、別挙動にならないよう
        PCの2カラム構造をこの帯域で明示的に固定する */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabelem-inner-container{
    display:flex !important;
    flex-direction:row !important;  /* ←PCのまま固定 */
    align-items:stretch !important;
    gap: var(--svc-gap) !important;
  }

  /* 3) 左：メニュー（高さ・幅をPC基準で合わせる） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container{
    width: var(--svc-menu-w) !important;
    flex: 0 0 var(--svc-menu-w) !important;
    height: var(--svc-card-h) !important;
    gap: 26px !important;           /* メニュー間隔も少し詰める */
    padding: 10px 0 !important;
  }

  /* 4) 左：文字が大きすぎて崩れるのを防ぐ（992〜1199pxだけ少し縮小） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab::before{
    width: 34px !important;
    font-size: 1.0rem !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab .zptab-name{
    font-size: 1.0rem !important;   /* 1.1rem→1.0rem */
    line-height: 1.25 !important;
  }

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-container .zptab .zptab-name::after{
    font-size: .78rem !important;   /* .85rem→.78rem */
    line-height: 1.2 !important;
    margin-top: 2px !important;
  }

  /* 5) 右：カード高さをこの帯域で明示（親の固定が負けるケース対策） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"] .zptabs-content-container{
    height: var(--svc-card-h) !important;
  }

  /* 6) 右：テキスト箱が“詰まりすぎ/はみ出し”を起こす場合の保険
        - max-height%は root 変数で統制
        - 行数制限は既存の最終上書きが効く前提 */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content .svc-body{
    max-height: var(--svc-overlay-max-h) !important;
    max-width: var(--svc-box-max-w) !important;
  }

  /* 7) 右：見出しの下線が“高さを食う”場合は少し薄く/短く（任意） */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container .zptab-active-content h2{
    margin: 0 0 8px !important;
    padding-bottom: 5px !important;
  }
}

/* =========================================================
ロゴサイズ調整
========================================================= */
/* タブレット・スマホ */
@media screen and (max-width: 1024px) {
  [data-zs-logo-container] img {
    transform: scale(0.65);
    transform-origin: left center;
  }
}
/* =========================================================
カラム並び順変更（レスポンシブ）
========================================================= */
@media (max-width: 991px) {
  [data-element-id="elm_sC5UmvzsR6huvsXLQwb4iw"].zprow,
  [data-element-id="elm_jChpKHfLAmtdjSPAp67dIw"].zprow {
    flex-direction: column-reverse !important;
  }
}

@media (max-width: 991px){

  /* ✅ 空白の犯人：hero-container の min-height を無効化して潰す */
  #themebanner .zpcontent-container.hero-container,
  [data-themebanner] .zpcontent-container.hero-container{
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ✅ Tablet(768-991) でもヘッダーを追従させる */
@media (min-width: 768px) and (max-width: 991px){
  [data-headercontainer="zptheme-data-headercontainer"]{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    width: 100% !important;
    margin: 0 !important;

    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  [data-headercontainer="zptheme-data-headercontainer"].theme-header-animate{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ✅ SP（〜767px）でもヘッダーを追従 + 最前面（PC/Tabletと揃える追記） */
@media (max-width: 767px){
  [data-headercontainer="zptheme-data-headercontainer"]{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    width: 100% !important;
    margin: 0 !important;

    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  [data-headercontainer="zptheme-data-headercontainer"].theme-header-animate{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* =========================================================
  ✅ SP/Tablet（〜991px）
  1) ヘッダー高さ（JSが --zs-header-h を実測でセット）
  2) ヘッダーに被らないよう maincontent に上余白
  3) ハンバーガーボタンを「ガラス丸ボタン」化（3本線）
  4) ANYCOLOR風：右からスライドするガラスメニュー（#zsAnyOverlay）
  5) Zoho標準モバイルメニューを無効化（×が2つ出る原因を根絶）
========================================================= */

:root{
  --zs-header-h: 96px; /* JSで上書き。保険値 */
}

/* -----------------------------------------
  0) 0〜991pxでヘッダー分だけコンテンツを下げる
----------------------------------------- */
@media (max-width: 991px){
  #thememaincontent{
    padding-top: calc(var(--zs-header-h, 80px) + env(safe-area-inset-top, 0px)) !important;
  }

  :where(h1,h2,h3,h4,h5,h6,[id]){
    scroll-margin-top: calc(var(--zs-header-h, 80px) + 12px);
  }
}

/* -----------------------------------------
  1) Zoho標準のモバイルメニューを殺す（×2個の犯人）
  - “メニュー本体（ドロワー/オーバーレイ/close）”を非表示
  - ただしハンバーガーのクリック領域(.theme-responsive-menu-container)は残す
----------------------------------------- */
@media (max-width: 991px){

  /* よくある Zoho のモバイルメニュー系をまとめて無効化（※ボタンコンテナは除外） */
  :where(
    .theme-responsive-menu,
    .theme-responsive-menu-wrapper,
    .theme-responsive-menu-content,
    .theme-responsive-menu-overlay,
    .theme-mobile-menu,
    .theme-mobile-menu-overlay,
    .zp-responsive-menu,
    .zp-responsive-menu-overlay,
    .zpresponsive-menu,
    .zpresponsive-menu-overlay
  ){
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* “close”系（×）が別DOMで出るテーマもあるので保険で潰す */
  :where(
    .theme-responsive-close,
    .theme-responsive-menu-close,
    .theme-mobile-close,
    .zp-menu-close,
    .zp-responsive-close
  ){
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* -----------------------------------------
  2) ハンバーガーボタン（ガラス丸）
  - 中身(.theme-burger-icon)の描画は完全に消す
  - 外側コンテナに3本線を描く
  - ※開いてる時に×へ変形は “しない”（×2個感を避ける）
----------------------------------------- */
@media (max-width: 991px){

  /* 偽Gが残っていたら殺す（保険） */
  #gMenuBtn{ display:none !important; }

  /* Zohoのクリック領域（あなたのDOM確定セレクタ） */
  [data-zs-responsive-menu-area]
  .theme-responsive-menu-container[data-zp-burger-clickable-area="mymenu1"]{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:999px !important;

    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;

    position:relative !important;
    z-index:10060 !important;

    cursor:pointer !important;
    -webkit-tap-highlight-color: transparent !important;

    background-image:none !important;
    box-shadow:none !important;
  }

  /* Zoho側の“本来のハンバーガー描画”は完全に殺す（残骸対策） */
  [data-zs-responsive-menu-area]
  .theme-responsive-menu-container[data-zp-burger-clickable-area="mymenu1"]
  .theme-burger-icon{
    position:absolute !important;
    inset:0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events:none !important;

    mask: none !important;
    -webkit-mask: none !important;
  }

  /* 3本線を外側に描画 */
  [data-zs-responsive-menu-area]
  .theme-responsive-menu-container[data-zp-burger-clickable-area="mymenu1"]::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:2px;
    background:#111;
    transform: translate(-50%,-50%);
    box-shadow: 0 -6px 0 #111, 0 6px 0 #111;
    pointer-events:none;
  }

  /* 押した感（任意） */
  [data-zs-responsive-menu-area]
  .theme-responsive-menu-container[data-zp-burger-clickable-area="mymenu1"]:active{
    transform: scale(0.98);
  }
}

/* -----------------------------------------
  3) ANYCOLOR風：右スライドメニュー（#zsAnyOverlay）
  - ヘッダーは残す（パネルはヘッダー直下から）
  - パネルはガラス背景
  - “×” はパネル内の1つだけ
----------------------------------------- */
@media (max-width: 991px){

  /* オーバーレイ全体 */
  #zsAnyOverlay{
    position: fixed;
    inset: 0;
    z-index: 99990;          /* ヘッダーより上に出す */
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease;
  }

  #zsAnyOverlay[aria-hidden="false"]{
    pointer-events: auto;
    opacity: 1;
  }

  /* 背景の暗幕（ヘッダーも暗くしてOKならこれでOK） */
  #zsAnyOverlay .zs-any-backdrop{
    position:absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
  }

  /* パネル：右からスライド、ヘッダー直下 */
  #zsAnyOverlay .zs-any-panel{
    position:absolute;
    top: var(--zs-header-h, 88px);
    right: 0;
    bottom: 0;
    width: min(92vw, 420px);

    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-left: 1px solid rgba(0,0,0,0.08);

    transform: translateX(102%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);

    display:flex;
    flex-direction: column;
    overflow: hidden;
  }

  #zsAnyOverlay[aria-hidden="false"] .zs-any-panel{
    transform: translateX(0);
  }

  /* 内側 */
  #zsAnyOverlay .zs-any-inner{
    display:flex;
    flex-direction: column;
    height: 100%;
    padding: 12px 16px 18px;
  }

  /* 上部（ロゴ領域＋閉じる） */
  #zsAnyOverlay .zs-any-head{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding: 4px 0 10px;
  }

  /* 閉じるボタン（丸ガラス） */
  #zsAnyOverlay .zs-any-close{
    width:44px;
    height:44px;
    border-radius:999px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor:pointer;

    font-size: 0;
    position: relative;
  }
  #zsAnyOverlay .zs-any-close::before,
  #zsAnyOverlay .zs-any-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width: 18px;
    height: 2px;
    background:#111;
    transform-origin:center;
  }
  #zsAnyOverlay .zs-any-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  #zsAnyOverlay .zs-any-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

  /* ナビ領域：スクロールはパネル内のみ */
  #zsAnyOverlay .zs-any-nav{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 10px;
  }

  /* リンク（ANYCOLOR寄せ：大きめ、左寄せ、余白多め） */
  #zsAnyOverlay .zs-any-ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #zsAnyOverlay .zs-any-ul > li{
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  #zsAnyOverlay .zs-any-ul > li:last-child{
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  #zsAnyOverlay .zs-any-ul a{
    display: block;
    padding: 18px 6px;
    text-decoration:none;
    color:#111;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .02em;
  }

  #zsAnyOverlay .zs-any-ul a:hover{
    background: rgba(0,0,0,0.04);
  }

  /* 開いてる間の挙動（JSが固定するのでCSSは補助のみ） */
  html.zs-any-open,
  body.zs-any-open{
    overscroll-behavior: none;
  }
}

@media (max-width: 991px){

  /* =========================================
     B) 重複して出ている “縦リストのタブ名” だけ消す
     - content-container直下に並ぶ tabheader を消す
     - tabcontainer(中身)は残す
  ========================================= */

  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container > [data-element-type="tabheader"]{
    display:none !important;
  }

  /* 念のため：tabheader が class で出ているケースも殺す */
  [data-element-id="elm_cWxqJxQHk-RFwibcmZ8-JA"]
  .zptabs-content-container > .zptab.zpelement[role="button"]{
    display:none !important;
  }
}
/* =========================================================
   ✅ ANYCOLOR/ZIGExN寄せ：Overlay Menu 最終（統一・洗練）
   - ×を必ず白に（黒化を根絶）
   - 事業内容だけ左ズレを根絶（row/aの余計なmargin/padding排除）
   - 子なし(li>a) と 子あり(.zs-any-row) を完全同一の行設計に統一
========================================================= */

/* =========================
   Overlay Root
========================= */
#zsAnyOverlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none; /* 閉じてる時はクリック透過 */
}
#zsAnyOverlay[aria-hidden="false"]{
  pointer-events: auto;
}

/* backdrop */
#zsAnyOverlay .zs-any-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s ease;
}
#zsAnyOverlay[aria-hidden="false"] .zs-any-backdrop{
  opacity: 1;
}

/* panel */
#zsAnyOverlay .zs-any-panel{
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: #2f3640; /* 深いグレー */
  transform: translateX(100%);
  transition: transform .22s ease;
  box-shadow: -18px 0 60px rgba(0,0,0,.25);
}
#zsAnyOverlay[aria-hidden="false"] .zs-any-panel{
  transform: translateX(0);
}

#zsAnyOverlay .zs-any-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* =========================
   Header（背景四角なし / MENU視認性UP / ×白）
========================= */
#zsAnyOverlay .zs-any-head{
  position: sticky;
  top: 0;
  z-index: 2;

  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* MENU（左） */
#zsAnyOverlay .zs-any-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255,255,255,.92);
}

/* close（×が黒くなる問題を根絶するため強制白） */
#zsAnyOverlay .zs-any-close{
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22) !important;
  background: transparent !important;

  color: rgba(255,255,255,.92) !important; /* ✅ */
  fill: rgba(255,255,255,.92) !important;  /* ✅ SVG対策 */
  stroke: rgba(255,255,255,.92) !important;/* ✅ SVG対策 */

  font-size: 22px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#zsAnyOverlay .zs-any-close *{
  color: rgba(255,255,255,.92) !important; /* ✅ 内部要素があっても白 */
  fill: rgba(255,255,255,.92) !important;
  stroke: rgba(255,255,255,.92) !important;
}
#zsAnyOverlay .zs-any-close:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.32) !important;
}
#zsAnyOverlay .zs-any-close:active{
  transform: scale(.98);
}

/* =========================
   Nav
========================= */
#zsAnyOverlay .zs-any-nav{
  padding: 6px 18px 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   UL/LI reset（カード感を完全排除）
========================= */
#zsAnyOverlay .zs-any-ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
#zsAnyOverlay .zs-any-ul > li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* =========================================================
   ✅ 行設計を統一（子なし/子あり）
   - ここが「事業内容だけ頭がズレる」対策の本丸
========================================================= */

/* 共通：行の高さ・下線 */
#zsAnyOverlay .zs-any-row,
#zsAnyOverlay .zs-any-ul > li > a{
  min-height: 72px;                 /* ✅ 高さ統一 */
  padding: 18px 0 !important;       /* ✅ 縦余白統一（過去のpaddingを潰す） */
  border-bottom: 1px solid rgba(255,255,255,.14);
}

/* 子なし（li>a）＝ 左テキストだけの行 */
#zsAnyOverlay .zs-any-ul > li > a{
  display: grid;                    /* ✅ 子ありと同じグリッド構造に */
  grid-template-columns: 1fr 44px;  /* ✅ 右列を固定（ズレ防止） */
  align-items: center;

  text-decoration: none;
  color: rgba(255,255,255,.92);

  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;

  margin: 0 !important;             /* ✅ ズレ要因排除 */
}

/* 子あり（親リンク+開閉） */
#zsAnyOverlay .zs-any-row{
  display: grid;
  grid-template-columns: 1fr 44px;  /* ✅ 完全固定 */
  align-items: center;
  gap: 0;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  margin: 0 !important;             /* ✅ ズレ要因排除 */
}

/* 親リンク（左） */
#zsAnyOverlay a.zs-any-parentlink{
  display: block;
  text-decoration: none;

  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;

  margin: 0 !important;             /* ✅ ズレ要因排除 */
  padding: 0 !important;            /* ✅ 余計な内側余白があると頭がズレる */
}

/* =========================
   +/−（丸囲いを完全撤去＝記号だけ）
========================= */
#zsAnyOverlay .zs-any-acc-btn{
  width: 44px !important;
  height: 44px !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#zsAnyOverlay .zs-any-acc-btn:hover{
  background: transparent !important;
}
#zsAnyOverlay .zs-any-acc-icon{
  color: rgba(255,255,255,.75);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1;
}
#zsAnyOverlay .zs-any-acc-btn[aria-expanded="true"] .zs-any-acc-icon{
  color: rgba(255,255,255,.92);
}

/* =========================
   Sub menu
========================= */
#zsAnyOverlay ul.zs-any-sub{
  list-style: none;
  margin: 0 0 10px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10);

  background: transparent !important;
  border-radius: 0 !important;
}

#zsAnyOverlay ul.zs-any-sub a{
  display: block;
  padding: 14px 0 14px 18px !important;

  text-decoration: none;
  color: rgba(255,255,255,.82);

  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
}
#zsAnyOverlay ul.zs-any-sub a:hover{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.04);
}

/* =========================
   SP
========================= */
@media (max-width: 480px){
  #zsAnyOverlay .zs-any-nav{
    padding: 4px 16px 18px;
  }

  #zsAnyOverlay .zs-any-row,
  #zsAnyOverlay .zs-any-ul > li > a{
    min-height: 68px;
    padding: 16px 0 !important;
  }

  #zsAnyOverlay a.zs-any-parentlink,
  #zsAnyOverlay .zs-any-ul > li > a{
    font-size: 20px;
  }
}

#zsAnyOverlay .zs-any-close{ color: rgba(255,255,255,.92) !important; }
#zsAnyOverlay .zs-any-close::before,
#zsAnyOverlay .zs-any-close::after{
  content:none !important; display:none !important;
}
#zsAnyOverlay .zs-any-close svg,
#zsAnyOverlay .zs-any-close path{
  stroke: rgba(255,255,255,.92) !important;
}

/* ✅ 開いたときに左端が見えない：パネルをフルスクリーン化 */
#zsAnyOverlay .zs-any-panel{
  width: 100vw !important;
  max-width: none !important;
  right: 0 !important;
  left: 0 !important; /* 念のため */
}

/* backdrop は“演出”だけなので、フルスクリーン時は透明でもOK */
#zsAnyOverlay .zs-any-backdrop{
  background: rgba(0,0,0,.35); /* 好みで */
}

/* =========================================================
   ✅ Premium Overlay Menu CSS（丸ごと差し替えOK）
   - パネル：軽い“スケール + スライド” + 反発感
   - 項目：メイン/サブ共通の「段々出現」(stagger) を統一
   - サブ：開いた瞬間に子も段々（同じ質感・同じ動き）
   - [hidden] 前提で制御（JSの既存挙動に合わせる）
========================================================= */

:root{
  --zsMenuPanelW: min(440px, 92vw);
  --zsMenuRadius: 18px;

  /* Premium motion */
  --zsEaseOut: cubic-bezier(.16, 1, .22, 1);
  --zsEaseBack: cubic-bezier(.18, 1.35, .22, 1);
  --zsStaggerStep: 60ms;

  /* Color */
  --zsPanelBg: rgba(18, 22, 28, .78); /* ガラス系 */
  --zsPanelBorder: rgba(255,255,255,.12);
  --zsPanelGlow: rgba(255,255,255,.06);

  --zsTextMain: rgba(255,255,255,.92);
  --zsTextSub:  rgba(255,255,255,.78);
  --zsLine:     rgba(255,255,255,.12);
}

/* =========================
   Overlay Root
========================= */
#zsAnyOverlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  contain: layout paint style;
}
#zsAnyOverlay[aria-hidden="false"]{ pointer-events: auto; }

/* =========================
   Backdrop（奥行き：暗転 + ブラー + 微妙なビネット）
========================= */
#zsAnyOverlay .zs-any-backdrop{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .28s var(--zsEaseOut);

  background:
    radial-gradient(1200px 900px at 70% 20%, rgba(0,0,0,.30), rgba(0,0,0,.65)),
    rgba(0,0,0,.45);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

#zsAnyOverlay[aria-hidden="false"] .zs-any-backdrop{
  opacity: 1;
}

/* =========================
   Panel（“ガラス” + 反発スライド）
========================= */
#zsAnyOverlay .zs-any-panel{
  position: absolute;
  top: 0;
  right: 0;
  width: var(--zsMenuPanelW);
  height: 100%;

  background: var(--zsPanelBg);
  border-left: 1px solid var(--zsPanelBorder);

  /* 光の縁 */
  box-shadow:
    -24px 0 60px rgba(0,0,0,.35),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06);

  /* 初期：右外 + 少し縮む */
  transform: translate3d(18px, 0, 0) translateX(100%) scale(.98);
  opacity: 0;
  transform-origin: 100% 20%;
  transition:
    transform .44s var(--zsEaseBack),
    opacity .22s var(--zsEaseOut);
}

#zsAnyOverlay[aria-hidden="false"] .zs-any-panel{
  transform: translate3d(0, 0, 0) translateX(0) scale(1);
  opacity: 1;
}

/* パネル内の“艶” */
#zsAnyOverlay .zs-any-panel::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,.06) 55%,
      rgba(255,255,255,0) 78%);
  opacity: .45;
  mix-blend-mode: screen;
}

/* =========================
   Inner / Nav
========================= */
#zsAnyOverlay .zs-any-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

#zsAnyOverlay .zs-any-nav{
  padding: 18px 20px 22px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   UL/LI reset
========================= */
#zsAnyOverlay .zs-any-ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
#zsAnyOverlay .zs-any-ul > li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   ✅ 行（子なし / 子あり）を同一設計
========================================================= */
#zsAnyOverlay .zs-any-row,
#zsAnyOverlay .zs-any-ul > li > a{
  min-height: 72px;
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--zsLine);
}

/* 子なし：右余白の“見えない列”を確保して統一 */
#zsAnyOverlay .zs-any-ul > li > a{
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;

  text-decoration: none;
  color: var(--zsTextMain);

  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.12;

  margin: 0 !important;
}

/* 子あり：親リンク + ボタン */
#zsAnyOverlay .zs-any-row{
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  margin: 0 !important;
}

/* 親リンク */
#zsAnyOverlay a.zs-any-parentlink{
  display: block;
  text-decoration: none;
  color: var(--zsTextMain);

  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.12;

  margin: 0 !important;
  padding: 0 !important;
}

/* 開閉ボタン（“プレミアム”っぽく、控えめなホバーと発光） */
#zsAnyOverlay .zs-any-acc-btn{
  width: 44px !important;
  height: 44px !important;

  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.04) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .18s var(--zsEaseOut),
    background .18s var(--zsEaseOut),
    box-shadow .18s var(--zsEaseOut);
}
#zsAnyOverlay .zs-any-acc-btn:hover{
  background: rgba(255,255,255,.07) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
}
#zsAnyOverlay .zs-any-acc-btn:active{
  transform: scale(.98);
}

#zsAnyOverlay .zs-any-acc-icon{
  color: rgba(255,255,255,.86);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  transform: translateY(-.5px);
}
#zsAnyOverlay .zs-any-acc-btn[aria-expanded="true"] .zs-any-acc-icon{
  color: rgba(255,255,255,.95);
}

/* =========================
   Sub menu
========================= */
#zsAnyOverlay ul.zs-any-sub{
  list-style: none;
  margin: 0 0 12px 0 !important;
  padding: 6px 0 14px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10);

  background: transparent !important;
  border-radius: 0 !important;
}

#zsAnyOverlay ul.zs-any-sub a{
  display: block;
  padding: 14px 0 14px 18px !important;

  text-decoration: none;
  color: var(--zsTextSub);

  font-size: 16px;
  font-weight: 650;
  letter-spacing: .01em;

  border-radius: 12px;
  transition: background .18s var(--zsEaseOut), color .18s var(--zsEaseOut);
}
#zsAnyOverlay ul.zs-any-sub a:hover{
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.06);
}

/* =========================================================
   ✅ Premium Stagger（メイン/サブ共通の“段々出現”を統一）
   - メイン：overlay open で li が順番に出る
   - サブ：hidden が外れたタイミングで子 li が順番に出る
========================================================= */

/* ① 共通：出現アニメ（高級感：薄いブラー + 微回転 + 反発） */
@keyframes zsRevealPremium{
  0%{
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotateX(10deg) scale(.98);
    filter: blur(6px);
  }
  60%{
    opacity: 1;
    transform: translate3d(0, -2px, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

/* ② メイン：overlay open で段々 */
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li{
  animation: zsRevealPremium .62s var(--zsEaseOut) both;
  animation-delay: calc(var(--i, 0) * var(--zsStaggerStep));
}

/* メイン：--i を振る（必要な数だけ増やしてOK） */
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(1){  --i: 1; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(2){  --i: 2; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(3){  --i: 3; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(4){  --i: 4; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(5){  --i: 5; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(6){  --i: 6; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(7){  --i: 7; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(8){  --i: 8; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(9){  --i: 9; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(10){ --i: 10; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(11){ --i: 11; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(12){ --i: 12; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(13){ --i: 13; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(14){ --i: 14; }
#zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li:nth-child(15){ --i: 15; }

/* ③ サブ：hidden が外れたら “同じ動き”で段々 */
#zsAnyOverlay ul.zs-any-sub > li{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(3px);
}

/* sub が表示中（not([hidden])）のとき、子liを順番に */
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li{
  animation: zsRevealPremium .54s var(--zsEaseOut) both;
  animation-delay: calc(var(--si, 0) * 55ms);
}

/* sub：--si を振る（必要に応じて増やしてOK） */
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(1){ --si: 1; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(2){ --si: 2; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(3){ --si: 3; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(4){ --si: 4; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(5){ --si: 5; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(6){ --si: 6; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(7){ --si: 7; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(8){ --si: 8; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(9){ --si: 9; }
#zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li:nth-child(10){ --si: 10; }

/* =========================
   SP tweaks
========================= */
@media (max-width: 480px){
  :root{ --zsMenuPanelW: min(420px, 94vw); }

  #zsAnyOverlay .zs-any-nav{
    padding: 16px 18px 20px;
  }
  #zsAnyOverlay .zs-any-row,
  #zsAnyOverlay .zs-any-ul > li > a{
    min-height: 68px;
    padding: 16px 0 !important;
  }
  #zsAnyOverlay a.zs-any-parentlink,
  #zsAnyOverlay .zs-any-ul > li > a{
    font-size: 20px;
  }
}

/* =========================
   Reduced motion（保険）
========================= */
@media (prefers-reduced-motion: reduce){
  #zsAnyOverlay .zs-any-backdrop,
  #zsAnyOverlay .zs-any-panel{
    transition: none !important;
  }
  #zsAnyOverlay[aria-hidden="false"] .zs-any-ul > li,
  #zsAnyOverlay li.zs-has-sub > ul.zs-any-sub:not([hidden]) > li{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ✅ SP/Tablet：ServiceCarousel を“スワイプ前提”に */
@media (max-width: 991px){
  .ServiceCarousel{
    /* 縦スクロールは許可、横方向のジェスチャーはJSで判定 */
    touch-action: pan-y;
  }

  /* iOSで画像ドラッグが邪魔になるのを抑制 */
  .ServiceCarousel img{
    -webkit-user-drag: none;
    user-select: none;
  }
}


element.style {
}
.zphero.zpapply-height .zpcontainer, .zphero.zpapply-height .zprow:only-child {
    height: 100%;
}
.hero-has-overlay .zpcontainer, .hero-has-overlay .zpcontainer-fluid, .hero-has-overlay .zprow, .hero-has-overlay .zpcol {
    position: relative !important;
    z-index: 1 !important;
}
@media (min-width: 992px) {
    .zphero .zpcontainer, .zphero .zprow {
        padding: 1em;
    }
}
@media (min-width: 768px) {
    .zphero .zpcontainer, .zphero .zprow {
        padding: 1em;
    }
}
.zphero .zpcontainer, .zphero .zprow {
    padding: 20px 0;
}