/* ===================== sub-navi.css (Cleaned Final 2025-10-19) ===================== */
:root{
  /* colors */
 
 --sub-navi-bg: rgb(27, 8, 123);
 
 --sub-navi-fg: #fff;
  --sub-navi-fg-sub: #ff9999;

  /* layout */
  --gap-brand-menu: 100px; /* ロゴとメニューの間隔 */
  --gap-menu-items: 40px;  /* メニュー同士の間隔 */

  /* motion */
  --nav-text-duration: 800ms;
  --nav-text-delay: 20ms;
}

/* ===================== PC表示 ===================== */
@media (min-width: 769px){

  /* ===== 1) ベース配置 ===== */
  #globalNavi{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    background: transparent;
    height: 75px;
  }
  #globalNavi .global-navi__inner{ position: relative; z-index: 30; }

  /* ===== 2) 背景パネル ===== */
  #globalNavi::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sub-navi-bg);
    z-index: 20;
    transform: translateY(-102%);
    backface-visibility: hidden;
    pointer-events: none;
    transition: transform var(--nav-text-duration) cubic-bezier(.25,.8,.25,1);
  }
  #globalNavi.reveal-active::before{ transform: translateY(0); }

  /* ===== 3) センター配置 ===== */
  .global-navi__row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-brand-menu);
  }
  #globalNavi .global-navi__links{ position: relative; overflow: hidden; }
  #globalNavi .global-navi__links ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-menu-items);
    text-align: center;
    transform: translateZ(0);
    transition: transform var(--nav-text-duration) ease-in-out;
  }

  /* ===== 4) トップ透過時 ===== */
  #globalNavi:not(.is-scrolled):not(.is-sub){
    background: transparent !important;
  }
  #globalNavi:not(.is-scrolled):not(.is-sub)::before{
    background: transparent !important;
  }
  #globalNavi:not(.is-scrolled):not(.is-sub) .global-navi__links a{
    font-size: 12px;
    font-weight: 700;
    color: #fff !important;
    text-shadow: 0 0 6px rgba(0,0,0,.6);
  }
  #globalNavi:not(.is-scrolled):not(.is-sub) .global-navi__links a span{
    font-size: 11px;
    font-weight: 400;
    color: #fff !important;
    opacity: .95;
    text-shadow: 0 0 6px rgba(0,0,0,.5);
  }

  /* ===== 5) 黒帯時（スクロール後） ===== */
  #globalNavi.is-sub,
  #globalNavi.is-scrolled{
    background: var(--sub-navi-bg);
  }
  #globalNavi.is-sub::before,
  #globalNavi.is-scrolled::before{
    background: var(--sub-navi-bg) !important;
    transform: translateY(0) !important;
    transition: none !important;
  }
  #globalNavi.is-sub .global-navi__links a,
  #globalNavi.is-scrolled .global-navi__links a{
    font-size: 12px;
    font-weight: 700;
    color: var(--sub-navi-fg) !important;
  }
  #globalNavi.is-sub .global-navi__links a span,
  #globalNavi.is-scrolled .global-navi__links a span{
    font-size: 11px;
    font-weight: 400;
    color: var(--sub-navi-fg-sub) !important;
    opacity: .95;
  }

  /* ===== 6) currentメニュー表示 ===== */
  #globalNavi .global-navi__links li.current-menu-item > a,
  #globalNavi .global-navi__links li.current_page_item > a{
    position: relative;
  }
  #globalNavi .global-navi__links li.current-menu-item > a::after,
  #globalNavi .global-navi__links li.current_page_item > a::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  /* ===== 7) ホバー／フォーカス色（全状態共通） ===== */
  #globalNavi .global-navi__links li a:hover,
  #globalNavi .global-navi__links li a:focus-visible,
  #globalNavi.is-sub .global-navi__links li a:hover,
  #globalNavi.is-scrolled .global-navi__links li a:hover,
  #globalNavi.reveal-active .global-navi__links li a:hover,
  #globalNavi:not(.is-scrolled):not(.is-sub) .global-navi__links li a:hover {
    color: #ffd86b !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #ffd86b !important;
    outline: none;
  }
  #globalNavi .global-navi__links li a:focus-visible{
    box-shadow: 0 0 0 3px rgba(255,216,107,.35);
    border-radius: 6px;
  }

  /* ===== 8) 落下アニメ ===== */
  #globalNavi.reveal-start .global-navi__links ul{
    transform: translate3d(0, -36px, 0);
    transition: none !important;
  }
  #globalNavi.reveal-start .global-navi__links li{
    transform: translateY(-16px);
    transition: none !important;
  }
  #globalNavi.reveal-active .global-navi__links ul{
    transform: translate3d(0, 0, 0);
    transition: transform var(--nav-text-duration) cubic-bezier(.25,.8,.25,1);
    transition-delay: var(--nav-text-delay);
  }
  #globalNavi.reveal-active .global-navi__links li{
    transform: translateY(0);
    transition: transform var(--nav-text-duration) cubic-bezier(.25,.8,.25,1);
  }

  /* ===== 9) 段階ディレイ ===== */
  #globalNavi .global-navi__links li:nth-child(1){ transition-delay: calc(var(--nav-text-delay) * 0); }
  #globalNavi .global-navi__links li:nth-child(2){ transition-delay: calc(var(--nav-text-delay) * 1); }
  #globalNavi .global-navi__links li:nth-child(3){ transition-delay: calc(var(--nav-text-delay) * 2); }
  #globalNavi .global-navi__links li:nth-child(4){ transition-delay: calc(var(--nav-text-delay) * 3); }
  #globalNavi .global-navi__links li:nth-child(5){ transition-delay: calc(var(--nav-text-delay) * 4); }
  #globalNavi .global-navi__links li:nth-child(6){ transition-delay: calc(var(--nav-text-delay) * 5); }
  #globalNavi .global-navi__links li:nth-child(7){ transition-delay: calc(var(--nav-text-delay) * 6); }
  #globalNavi .global-navi__links li:nth-child(8){ transition-delay: calc(var(--nav-text-delay) * 7); }
}

/* ===================== 動き軽減 ===================== */
@media (min-width: 769px) and (prefers-reduced-motion: reduce){
  #globalNavi{ background: var(--sub-navi-bg) !important; }
  #globalNavi::before{ content: none; }
  #globalNavi .global-navi__links ul,
  #globalNavi .global-navi__links li{
    transform: none !important;
    transition: none !important;
  }
}


/* === FINAL: 2025-10-19 モバイルナビ統合（センターロゴ・左上赤トグル・ロゴ80%） === */

/* ラベルは常に非表示（保険） */
.gnav-toggle__label{ display:none !important; }

@media (max-width: 1024px){

  /* ===== ヘッダー帯 ===== */
  #globalNavi{
    display:block !important;
    visibility:visible !important;
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    background: transparent;
    min-height:56px;
  }

  /* ===== 内側レイアウト（センターロゴ仕様） ===== */
  #globalNavi .global-navi__inner{
    position: relative;                 /* トグル配置の基準 */
    display: flex;
    align-items: center;
    justify-content: center;            /* ロゴを中央に */
    padding: 8px 16px 8px 72px;         /* 左にトグル分の余白（36+12+α） */
  }

    /* ===== ロゴ中央配置＆縮小（競合上書き版） ===== */
  #globalNavi .site-branding,
  #globalNavi .site-branding .brand{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* テーマの .custom-logo, .site-logo, img をすべて上書き */
  #globalNavi .site-branding img,
  #globalNavi .site-branding .custom-logo,
  #globalNavi .site-branding .site-logo img,
  #globalNavi .site-branding a img{
    height: 100% !important;     /* ここで自由に調整できるようになる */
    max-height: none !important;
    width: auto !important;
    display: block;
    object-fit: contain;
  }







  /* ===== トグル（左上・赤系四角） ===== */
  .gnav-toggle{
    all: unset;
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 24px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    z-index: 1010;

    /* 赤系背景ボタン */
    background:transparent;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
  }

  /* 三本線（白） */
  .gnav-toggle__bar{
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
  }

  /* ===== メニュー本体は非表示（仕様通り） ===== */
  #globalNavi .global-navi__links{ display:none !important; }

  /* ===== 親テーマ等の既定トグルを強制非表示 ===== */
  #globalNavi .menu-toggle,
  #globalNavi .elementor-menu-toggle,
  #globalNavi .navbar-toggle,
  #globalNavi .toggle,
  #globalNavi .hamburger,
  header.site-header .menu-toggle{
    display:none !important;
  }
}

/* ===== PCではトグル非表示維持 ===== */
@media (min-width: 769px){
  .gnav-toggle{ display:none !important; }
}



/* === モバイル専用テロップ（固定1文） === */
@media (max-width: 1024px){
  /* PC用テロップ非表示 */
  .hero-telops{ display: none !important; }

  /* モバイル固定テロップ */
  .hero-telops-sp{
    position: absolute;
    top: 30%;                     /* 画面高さの30%位置 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    z-index: 20;
  }

  .telop-sp-text{
    color: #fff;
    font-size: clamp(14px, 4vw, 22px);
    line-height: 1.6;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0,0,0,0.7);
    padding: 0 8px;
  }
}

/* PCでは非表示 */
@media (min-width: 1025px){
  .hero-telops-sp{ display: none !important; }
}



/* === モバイル降下メニュー：白背景＋緑枠＋黒文字 === */
@media (max-width: 1024px){
 /* :root{ --brand-:#2f6e4a; } */


  :root{ --brand-:#f3f7f5; } 



  /* 既存 .global-navi__links を非表示 */
  #globalNavi .global-navi__links{ display:none !important; }

  /* オーバーレイ */
  .sp-nav-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.4);
    z-index:9998;
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .sp-nav-overlay.is-open{ opacity:1; pointer-events:auto; }

  /* パネル本体 */
  .sp-nav-panel{
    position:fixed;
  
   top: 70px;
   left: 50px;
   right: 50px;
   bottom: 70px;

  
  /*  width:100vw; height:100vh; */
    background:rgba(0,0,0,0.9); 
    color:#fff;
   /* border:5px solid var(--brand-green); */
    border: 5px solid #fff;       /* ← 枠を白に変更 */
    border-radius:16px;      /* ← 丸みを追加（10～20pxで調整可） */

    z-index:10000;
    display:flex; flex-direction:column;
    align-items:center;
    padding:calc(env(safe-area-inset-top,0px) + 64px) 20px 20px;
    transform:translateY(-110%);
    transition:transform .45s ease;
  }
  .sp-nav-panel.is-open{ transform:translateY(0); }

  .sp-nav-close{
    position:absolute;
    top:18px; right:18px;
    font-size:28px;
    color:var(--brand-green);
    background:none; border:none;
    cursor:pointer;
    z-index:10001;
  }

  .sp-menu{
    list-style:none;
    padding:0; margin:0;
    width:100%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
  }
  .sp-menu a{
    display:block;
    font-size:0.9rem;
    font-weight:600;
    text-decoration:none;
    color:#fff;
    padding:10px;
    width:100%;
    text-align:center;
    transition:color .2s ease, background .2s ease;
  }
  .sp-menu a:hover{
    color:var(--brand-green);
    background:rgba(47,110,74,.08); 
    border-radius:6px;
  }
}

/* スマホ時のメニュー背景を黒系に変える */

/* サブページ：#globalNavi 一式を黒に塗る */
@media (max-width: 1024px){
  body:not(.home) #globalNavi,
  body:not(.home) #globalNavi::before,
  body:not(.home) #globalNavi .global-navi__inner{
    background: #040404 !important;
    background-image: none !important;
  }
}

/* サブページ：スマホ時に「ナビ直下の最初の要素」も黒くする力技 */
@media (max-width: 1024px){
  body:not(.home) #globalNavi + *{
    background: #040404 !important;
    background-image: none !important;
  }
}