@charset "utf-8";
/* =====================================================================
   メニューボタンとドロワー（PHP サイトと WordPress で共用）

   このファイルは2箇所から読み込まれます。
     - PHP サイト  : inc/header.php
     - WordPress   : wp-content/mu-plugins/hitokara-nav.php
   どちらか一方だけ直すと見た目がずれるので、必ずここを編集してください。
   ===================================================================== */

/* 読み込み先のリセット CSS に左右されないよう、自分の要素だけ揃えます。
   WordPress 側はテーマの状態が読めないため、ここで閉じておきます。 */
.c-burger,.c-burger *,#site-drawer,#site-drawer *{box-sizing:border-box}
#site-drawer ul{list-style:none}
#site-drawer p,#site-drawer ul,#site-drawer li{margin:0;padding:0}
#site-drawer a{text-decoration:none}
#site-drawer img{max-width:100%;height:auto}

/* 開いているあいだ背面を固定し、画面全体を覆います */
html.drawer-locked{overflow:hidden}
#site-drawer{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;transition:opacity .3s ease,visibility .3s ease}
#site-drawer.is-open{opacity:1;visibility:visible;pointer-events:auto}

/* ===== モバイルメニュー（ドロワー）=====================================
   マークアップは inc/drawer.php。項目は inc/nav.php の $NAV から作られます。
   ------------------------------------------------------------------- */
#site-drawer .drawer-panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:420px;height:100%;margin-left:auto;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;box-shadow:-2px 0 24px rgba(0,0,0,.18);transform:translateX(24px);opacity:0;transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
#site-drawer.is-open .drawer-panel{transform:none;opacity:1}

/* 見出し：ロゴと閉じるボタン。スクロールしても残ります */
#site-drawer .drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid #e8eaed}
#site-drawer .drawer-logo{display:flex;align-items:center;min-height:44px;line-height:0}
#site-drawer .drawer-logo img{width:132px;height:auto}
#site-drawer .drawer-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:50%;background:none;color:#1B1464;cursor:pointer;transition:background .2s ease}
#site-drawer .drawer-close:hover,#site-drawer .drawer-close:focus-visible{background:#f2f4f7}

/* ナビ */
#site-drawer .drawer-nav{padding:4px 0}
#site-drawer .drawer-nav__list{margin:0;padding:0;list-style:none}
#site-drawer .drawer-nav__item{border-bottom:1px solid #eef0f3}
#site-drawer .drawer-nav__link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:14px 20px;color:#1B1464;font-size:15px;font-weight:700;line-height:1.4;text-decoration:none;transition:background .2s ease}
#site-drawer .drawer-nav__link:hover{background:#f7fafc}
#site-drawer .drawer-nav__chevron{flex:none;color:#c3cbd6}
/* 現在地：左に色帯を出して、文字色も変えます */
#site-drawer .drawer-nav__link.is-current{position:relative;color:#0FA9DA;background:#f2fbff}
#site-drawer .drawer-nav__link.is-current::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:#32D2FF}
#site-drawer .drawer-nav__link.is-current .drawer-nav__chevron{color:#32D2FF}

/* 子を持つ項目：親は見出し、子はその下にぶら下げます */
#site-drawer .drawer-nav__parent{margin:0;padding:16px 20px 6px;color:#8a93a3;font-size:12px;font-weight:700;letter-spacing:.06em}
#site-drawer .drawer-nav__parent.is-current{color:#0FA9DA}
#site-drawer .drawer-nav__sub{margin:0 0 8px;padding:0;list-style:none}
#site-drawer .drawer-nav__sub a{position:relative;display:flex;align-items:center;min-height:48px;padding:10px 20px 10px 34px;color:#1B1464;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s ease}
#site-drawer .drawer-nav__sub a::before{content:"";position:absolute;top:50%;left:20px;width:6px;height:1px;background:#c3cbd6}
#site-drawer .drawer-nav__sub a:hover{background:#f7fafc}
#site-drawer .drawer-nav__sub a.is-current{color:#0FA9DA;background:#f2fbff}
#site-drawer .drawer-nav__sub a.is-current::before{background:#32D2FF;width:10px;height:2px}

/* 問い合わせ導線 */
#site-drawer .drawer-cta{padding:20px 20px 4px}
#site-drawer .drawer-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:12px 16px;border-radius:6px;font-size:15px;font-weight:700;text-decoration:none;transition:opacity .2s ease}
#site-drawer .drawer-btn:hover{opacity:.85}
#site-drawer .drawer-btn--mail{background:#32D2FF;color:#fff}
#site-drawer .drawer-btn--tel{margin-top:10px;border:1px solid #32D2FF;color:#0FA9DA;background:#fff}
#site-drawer .drawer-btn__num{font-size:19px;letter-spacing:.02em}
#site-drawer .drawer-note{margin:8px 0 0;color:#8a93a3;font-size:12px;text-align:center}

/* 足元 */
#site-drawer .drawer-foot{margin-top:auto;padding:20px}
#site-drawer .drawer-sns{display:block;line-height:0;text-align:center}
#site-drawer .drawer-sns img{width:100%;max-width:240px;height:auto;border-radius:4px}
#site-drawer .drawer-copy{margin:16px 0 0;color:#9aa3b0;font-size:11px;text-align:center}

/* 画面が低いときは余白を詰めます */
@media (max-height:700px){
  #site-drawer .drawer-nav__link{min-height:48px;padding:10px 20px}
  #site-drawer .drawer-cta{padding-top:14px}
  #site-drawer .drawer-foot{padding:14px 20px}
}
/* 十分に広い画面ではパネルを右寄せのシートに */
@media (min-width:768px){
  #site-drawer .drawer-panel{max-width:380px}
}
#site-drawer.is-open .drawer-panel{transform:none;opacity:1}.uc_hamburger{display:inline-block}.uc_hamburger .uc_line{transition:transform .3s ease,opacity .2s ease}.uc_hamburger.is-active .uc_line:nth-child(1){transform:translateY(8px) rotate(45deg)}.uc_hamburger.is-active .uc_line:nth-child(2){opacity:0}.uc_hamburger.is-active .uc_line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.elementor-nav-menu .sub-menu{display:none;position:absolute;z-index:9997;min-width:12em}.elementor-nav-menu li.menu-item-has-children{position:relative}.elementor-nav-menu li.menu-item-has-children.is-open > .sub-menu{display:block}.elementor-nav-menu.sm-vertical li.menu-item-has-children > .sub-menu{position:static;min-width:0}.elementor-nav-menu .sub-arrow{display:inline-flex;align-items:center}.elementor-nav-menu .sub-arrow svg{width:.7em;height:.7em;fill:currentColor;transition:transform .2s ease}.elementor-nav-menu li.is-open > a .sub-arrow svg{transform:rotate(180deg)}#scroll-top{position:fixed;right:20px;bottom:20px;z-index:9999;display:none;align-items:center;justify-content:center;margin:0;padding:0;border:none;outline:none;background:none;box-shadow:none;opacity:0;cursor:pointer;transition:opacity .2s ease}#scroll-top.show{display:flex;opacity:.8}#scroll-top:hover{opacity:1}#scroll-top img{width:36px;height:36px}#scroll-top .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media print{#scroll-top,#site-drawer{display:none !important}}

/* ===== ハンバーガーボタン ============================================
   マークアップは inc/header.php。開閉は assets/js/site.js。
   PC ナビが出る幅でも表示します（全画面幅で常時表示）。
   ------------------------------------------------------------------- */
.c-burger{position:fixed;top:12px;right:12px;z-index:99;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:56px;height:56px;margin:0;padding:0;border:0;border-radius:12px;background:#1B1464;color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(27,20,100,.28);transition:background .2s ease,transform .15s ease}
.c-burger:hover{background:#2a2080}
.c-burger:active{transform:scale(.94)}
.c-burger:focus-visible{outline:3px solid #32D2FF;outline-offset:3px}

.c-burger__bars{position:relative;flex:none;width:22px;height:16px}
.c-burger__bars span{position:absolute;left:0;width:100%;height:2px;border-radius:1px;background:currentColor}
.c-burger__bars span:nth-child(1){top:0}
.c-burger__bars span:nth-child(2){top:7px}
.c-burger__bars span:nth-child(3){top:14px}
.c-burger__label{flex:none;font-size:9px;font-weight:700;letter-spacing:.12em;line-height:1}

/* 開いた状態のクラス（.c-burger.is-active）は site.js が付けますが、
   ドロワーがボタンごと覆うため見た目は変えていません。 */

/* 動きを減らす設定の端末では拡縮しません */
@media (prefers-reduced-motion:reduce){
  .c-burger{transition:none}
  .c-burger:active{transform:none}
}

/* ボタンは常に右上に浮いています。ヘッダーの中身が横いっぱいに広がる幅では
   Instagram アイコンとぶつかるので、その帯だけ右に余白を作って逃がします。
   （1146px 以上は元から間隔が空くため不要） */
@media (min-width:1025px) and (max-width:1145px){
  header .elementor-element-a1a6b16 > .e-con-inner{padding-right:80px}
}


/* --- WordPress 側の旧メニューボタンを隠す ---------------------------
   コラム記事は Elementor のヘッダーテンプレートを使っており、
   プラグイン製のハンバーガーが残っています。上のボタンと二重に出るため、
   こちらを隠します。PHP サイトには存在しないので影響しません。 */
.uc_animated_hamburger_icon_holder{display:none !important}