/* ==================================================
   Base layout (Canopus) - stable & simple (no rounded / no shadow)
================================================== */

/* ------------------------------
   Reset / base
------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

body{
  margin: 0;
  line-height: 1.7;
  background-color: transparent;
  min-height: 100vh;
}

img,
video{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; }

html {
	height: 100%;
  scroll-behavior: smooth;
}

html, body{ overflow-x: clip; }
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

/* ------------------------------
   Wide container
------------------------------ */
.site-header__inner,
.site-content,
.site-footer__inner{
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
}

.site-header,
.site-footer{ padding: 1rem; }

/* ------------------------------
   Layout
------------------------------ */
.site-content{
  display: flex;
  gap: 2rem;
  padding: 1rem;
}

.site-main{ flex: 1; min-width: 0; }
.site-sidebar{ width: 280px; flex: 0 0 auto; }

.layout-one-column .site-content{ display: block; }

@media (max-width: 960px){
  .site-content{ display: block; }
  .site-sidebar{ width: 100%; }
}

/* ==================================================
   Header (layout)
================================================== */
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__left{ min-width: 0; }
.site-header__right{ display: flex; align-items: center; gap: .75rem; }

.site-branding .custom-logo{ height: auto; max-height: 56px; width: auto; }
.site-description{ margin: .25rem 0 0; font-size: .875rem; opacity: .8; }
.site-tagline{ margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; }

/* ==================================================
   Customizer variables (defaults)
================================================== */
:root{
  --cp-header-bg: transparent;
  --cp-header-text: inherit;
  --cp-header-panel-bg: #fff;
}

/* どのページでも色は変数に従う */
.site-header{
  background: var(--cp-header-bg);
  color: var(--cp-header-text);

  /* ★ z-indexを常に効かせるため */
  position: relative;
  z-index: 3000;
}
.site-header a{ color: inherit; }

body.home .site-content{ padding-top: 0; }

/* ==================================================
   Global Nav (desktop)
================================================== */
.cp-nav{ position: relative; }

.cp-nav ul,
.cp-nav ol{
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-nav a{
  display: inline-block;
  padding: .5rem .6rem;
  line-height: 1.2;
  text-decoration: none;
}

.cp-nav--desktop .cp-nav__list{
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
}
.cp-nav--desktop .cp-nav__list > li{ position: relative; }

/* ==================================================
   Desktop dropdown usability fix
   - hover切れ防止
   - カーソル移動時の猶予を確保
================================================== */
.cp-nav--desktop .sub-menu{
  position: absolute;
  top: 100%;               /* ← 隙間を作らない */
  right: 0;
  min-width: 12rem;

  /*background: var(--cp-submenu-bg, #fff);
  color: var(--cp-submenu-text, inherit);*/
  background: var(--cp-submenu-bg);
  color: var(--cp-submenu-text);
  border: 1px solid rgba(0,0,0,.15);

  opacity: 0;
  transform: translateY(-4px); /* 少しだけ上から */
  max-height: 0;
  overflow: hidden;
  pointer-events: none;

  /* ★ここが重要 */
  transition:
    opacity .18s ease,
    transform .18s ease,
    max-height .18s ease;
}

/* 念のためリンクも継承（テーマ側のa色上書き事故を防ぐ） */
.cp-nav--desktop .sub-menu a{
  color: inherit;
}

/* 親に hover / focus がある間は表示を維持 */
.cp-nav--desktop li.menu-item-has-children:hover > .sub-menu,
.cp-nav--desktop li.menu-item-has-children:focus-within > .sub-menu{
  opacity: 1;
  transform: translateY(0);
  max-height: 60vh;
  pointer-events: auto;
}

/* hover が外れても即消えない猶予 */
.cp-nav--desktop li.menu-item-has-children > .sub-menu{
  transition-delay: 0s, 0s, 0s;
}

.cp-nav--desktop .sub-menu li a{
  display: block;
  padding: .65rem .9rem;
  white-space: nowrap;
}

/* ==================================================
   Hamburger button (same position -> X)
   - Color follows Customizer text color
================================================== */
.cp-nav-toggle{
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: .5rem;
  cursor: pointer;
  line-height: 0;
  color: var(--cp-header-text);
  pointer-events: auto;

  /* ★ z-indexを効かせる */
  position: relative;
  z-index: 3100;
}

/* OPEN中はさらに強く（位置は変えない） */
.site-header.is-nav-open .cp-nav-toggle{
  z-index: 999999;
}


/* ==================================================
   FIX: Mobile menu top items clickable
   - Header overlaps visually but must not steal clicks
================================================== */

/* メニューOPEN中：ヘッダー全体はクリックを透過 */
.site-header.is-nav-open{
  pointer-events: none;
}

/* ただし ×（トグル）だけは必ず操作可能にする */
.site-header.is-nav-open .cp-nav-toggle{
  pointer-events: auto;
}

/* 念のため：トグル内部も明示 */
.site-header.is-nav-open .cp-nav-toggle *{
  pointer-events: auto;
}

.cp-nav-toggle:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.cp-nav-toggle__icon{
  display: inline-block;
  width: 28px;
  height: 20px;
  position: relative;
}

.cp-nav-toggle__icon::before,
.cp-nav-toggle__icon::after,
.cp-nav-toggle__icon span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: currentColor;
}

.cp-nav-toggle__icon::before{ top: 3px; }
.cp-nav-toggle__icon span{ top: 50%; transform: translateY(-50%); }
.cp-nav-toggle__icon::after{ bottom: 3px; }

.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__icon::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__icon::after{
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__icon span{
  opacity: 0;
}

/* ==================================================
   Mobile nav (FULL SCREEN overlay)
================================================== */
.cp-nav--mobile{
  position: fixed;
  inset: 0;

  /* ✅ FIX: ヘッダー(3000)より上に出す（トップ以外で隠れる問題を解消） */
  z-index: 3500;

  background: var(--cp-header-panel-bg);
  color: var(--cp-header-text);

  padding: calc(1rem + 64px) 1rem 1rem;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cp-nav--mobile[hidden]{ display: none !important; }

.cp-nav--mobile a{ color: inherit; }

.cp-nav--mobile .cp-nav__list a{
  display: block;
  padding: .85rem .25rem;
  border-top: 1px solid rgba(0,0,0,.12);
}
.cp-nav--mobile .cp-nav__list > li:first-child > a{ border-top: 0; }

.cp-nav--mobile .sub-menu{
  max-height: 0;
  overflow: hidden;
}
.cp-nav--mobile li.is-open > .sub-menu{
  max-height: 80vh;
}

/* ==================================================
   Responsive switch (auto)
================================================== */
@media (max-width: 960px){
  .cp-nav--desktop{ display: none; }
  .cp-nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }
}

/* ==================================================
   Nav mode (Customizer)
================================================== */
body.cp-nav-mode-hamburger .cp-nav--desktop{ display: none !important; }
body.cp-nav-mode-hamburger .cp-nav-toggle { display: inline-flex !important; }

body.cp-nav-mode-desktop .cp-nav-toggle{ display: none !important; }
body.cp-nav-mode-desktop .cp-nav--desktop{ display: block !important; }
body.cp-nav-mode-desktop #cp-mobile-nav{ display: none !important; }

/* ==================================================
   Scroll mode (Customizer)
================================================== */
body.cp-header-scroll-static .site-header{
  position: relative;
  top: auto;
}

body.cp-header-scroll-sticky .site-header{
  position: sticky;
  top: 0;
}

body.cp-header-scroll-hide .site-header{
  position: sticky;
  top: 0;
  will-change: transform;
  transition: transform .22s ease;
}
body.cp-header-scroll-hide .site-header.is-hidden{
  transform: translateY(-105%);
}

/* ==================================================
   Overlay mode (Customizer)
================================================== */
body.cp-header-overlay .site-header{
  left: 0;
  right: 0;
}

body.admin-bar.cp-header-overlay .site-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar.cp-header-overlay .site-header{ top: 46px; }
}

body.cp-header-overlay .site-content{ padding-top: 0 !important; }

body.cp-header-overlay.cp-header-scroll-sticky .site-header{
  position: fixed;
  top: 0;
}

body.cp-header-overlay.cp-header-scroll-hide .site-header{
  position: fixed;
  top: 0;
  will-change: transform;
  transition: transform .22s ease;
}
body.cp-header-overlay.cp-header-scroll-hide .site-header.is-hidden{
  transform: translateY(-105%);
}

body.cp-header-overlay.cp-header-scroll-static .site-header{
  position: absolute;
  top: 0;
  transform: none;
}

/* ==================================================
   Breadcrumb
================================================== */
.cp-breadcrumb-bar{ background: #f5f5f5; }

.cp-breadcrumb-bar__inner{
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding: .5rem 1rem;
}

.cp-breadcrumb__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.cp-breadcrumb__item::after{
  content: "›";
  margin-left: .5rem;
  opacity: .5;
}
.cp-breadcrumb__item:last-child::after{ content: ""; margin: 0; }

.cp-breadcrumb__link{ text-decoration: none; }
.cp-breadcrumb__current{ opacity: .8; }

/* ==================================================
   Mobile overlay menu content switch
================================================== */
#cp-mobile-nav .cp-nav__list--primary{ display: none; }
#cp-mobile-nav .cp-nav__list--mobile { display: block; }

@media (min-width: 960px){
  #cp-mobile-nav .cp-nav__list--primary{ display: block; }
  #cp-mobile-nav .cp-nav__list--mobile { display: none; }
}

/* ==================================================
   Mobile Nav Toggle PORTAL (FINAL FIX)
================================================== */

/* body直下に置かれるトグル専用レイヤー */
.cp-nav-toggle-portal{
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
  right: 12px;
  z-index: 1000000;
  pointer-events: none; /* 中身だけ有効化 */
}

/* トグル本体は操作可能 */
.cp-nav-toggle-portal .cp-nav-toggle{
  pointer-events: auto;
}

/* header内に残っているトグルは不可視（DOM保持） */
.site-header .cp-nav-toggle{
  visibility: hidden;
}