/*
 Theme Name: MtoA
 Version: 1.0.0
*/

/* ========== 共通レイアウト ========== */
.header-inner{
  display:flex;
  gap:123px;
  align-items: center;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.brand{justify-self:start;display:flex;align-items:center;gap:12px}
.brand .custom-logo,.brand .brand-logo{display:block;height:80px;width:auto}
.right-slot{justify-self:end}

/* ガラス風ピル（PCベース定義） */
.primary-nav{
  position:relative; z-index:2;
  padding:1.5rem 2.75rem;
  border-radius:999px;
  background:rgba(11,39,70,.8);
  box-sizing: border-box;
}

/* メニュー（PC横並び） */
.primary-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:2.8rem;
}
.primary-menu>li{ margin:0; }
.primary-menu a{
  color:#fff; text-decoration:none;
  font-size:0.937rem; font-weight:700; letter-spacing:.05em;
  display:inline-flex; align-items:center;
  padding:10px 20px; border-radius:999px; line-height:1;
  transition:background-color .2s ease, opacity .2s ease;
}
.primary-menu a:hover,.primary-menu a:focus-visible{
  background-color:rgba(255,255,255,.08); opacity:1; outline:none;
}

/* Fallback（backdrop未対応） */
@supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))){
  .primary-nav{background:linear-gradient(90deg,#0d2c4d 0%,#1a4263 60%,#255676 100%)}
}

/* ========== ハンバーガー ========== */
.nav-toggle{
  display:none; /* デフォは非表示（>960px） */
  position:relative;
  border:0; background:transparent !important;
  width:44px; height:44px; border-radius:999px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  z-index:1001;
}

/* 3本線：中央基準で等間隔（色 #374F63） */
.nav-toggle .burger,
.nav-toggle .burger::before,
.nav-toggle .burger::after{
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:6px;
  background:#072a47; border-radius:3px;
  transform:translate(-50%,-50%);
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
}
.nav-toggle .burger::before{ transform:translate(-50%,-50%) translateY(-8px); }
.nav-toggle .burger::after { transform:translate(-50%,-50%) translateY( 8px); }

/* ========== PC縮小調整（<=960pxで微調整） ========== */
/* ==== Fix: ハンバーガーをヘッダー右端・縦中央に ==== */
@media (max-width:960px){
  /* ハンバーガーの基準を .header-inner にする */
  .header-inner{ position:relative; height:60px; }

  /* nav を “基準にしない” & 幅を全体に（3カラムまたぎ） */
  .primary-nav{
    position:static !important;         /* ← これが超重要（relativeを打ち消す） */
    grid-column: 1 / -1;                /* ← 横幅をヘッダーいっぱいに */
  }
  .primary-nav.open .nav-toggle{
    position:absolute !important;           /* ← fixed をやめる */
    right:calc(12px + env(safe-area-inset-right, 0px)); /* 端に寄せつつiOSノッチ対応 */
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:1102;                            /* メニューオーバーレイより前 */
  }

  .brand .custom-logo,.brand .brand-logo{height:60px}

  /* ハンバーガーを右端・縦中央に配置 */
  .nav-toggle{
    position:absolute !important;       /* .header-inner を基準に */
    right:16px;                          /* 端からの距離（お好みで調整） */
    top:50%; transform:translateY(-50%);
  }
}
@media (max-width:640px){
  .header-inner{padding:0 12px}
  .primary-nav{padding:8px clamp(14px,4vw,28px)}
  .primary-menu{gap:.9rem}
  .primary-menu a{padding:8px 14px; font-size:.9rem}
  .brand .custom-logo,.brand .brand-logo{height:44px}
  .nav-ribbon::before{top:-28px; left:-40px; height:100px; width:86vw; transform:skewX(-20deg)}
}

/* ========== モバイル（<=960px でハンバーガー） ========== */
@media (max-width:960px){
  html, body{
    margin:0 !important;
    padding:0 !important;
    background:#fff;
  }

  /* ヘッダー: sticky + 下線は border で余白ゼロ */
  .site-header{
    position:sticky;
    top:0 !important;
    z-index:1000;
    background:#fff;
    padding:12px 0;
    margin-top:0 !important;
    border-bottom:1px solid #3F8DB6; /* ← 下線をborderに */
  }
  .site-header::after{ content:none; } /* ← 疑似要素の下線は無効化 */
  body.logged-in .site-header{ top:46px; }

  /* ハンバーガー：ヘッダー右端・縦中央 */
  .header-inner{ position:relative; }     /* アンカー */
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute;                    /* ← fixedから変更 */
    right:16px;
    top:50%; transform:translateY(-50%);  /* 縦中央 */
    width:44px; height:44px;
    z-index:1101;
  }

  /* メニューオープン時だけ画面固定（オーバーレイ上） */
  .primary-nav.open .nav-toggle{
    position:fixed;
    right:16px;
    top:16px;
    transform:none;
  }
  body.logged-in .primary-nav.open .nav-toggle{
    top:calc(46px + 16px);
  }

  /* PC用装飾オフ */
  .nav-ribbon::before{ display:none !important; }
  .primary-nav{
    background:none !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    padding:8px 12px;
  }

  /* メニューはデフォ非表示（=ハンバーガー） */
  .primary-menu{ display:none; }

  /* 開いたらフルスクリーン右揃え */
  .primary-nav.open .primary-menu{
    display:flex; position:fixed; inset:0; z-index:1000;
    background:rgba(38,125,160,.86);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    flex-direction:column; align-items:flex-end; text-align:right;
    padding:20% 24px 0; gap:24px; 
  }
  .primary-nav.open .primary-menu>li{
    width:100%; margin:0; padding-bottom:8px;
    border-bottom: solid 1px #fff;
  }
  .primary-nav.open .primary-menu>li+li{
    padding-top:16px; margin-top:8px;
  }
  .primary-nav.open .primary-menu a{
    display:block; color:#fff; text-decoration:none;
    font-size:var(--f40); font-weight:700; letter-spacing:.04em;
    padding:6px 0; border-radius:8px;
  }

  /* ハンバーガー → × */
  .primary-nav.open .nav-toggle .burger{ background:transparent; }
  .primary-nav.open .nav-toggle .burger::before,
  .primary-nav.open .nav-toggle .burger::after{ background:#fff; }
  .primary-nav.open .nav-toggle .burger::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }
  .primary-nav.open .nav-toggle .burger::after{
    transform:translate(-50%,-50%) rotate(-45deg);
  }

  /* 背景スクロール固定（JSで .menu-open を付与） */
  body.menu-open{ overflow:hidden; }
}


/* ==== Desktop fix (>=961px): PC表示＆absoluteを強制 ==== */
@media (min-width:961px){
  html{ margin-top:0 !important; }
  #wpadminbar{ position:fixed; }

  header.site-header{
    position:fixed;
    top:40px !important;
    left:0; width:100%;
    z-index:1000;
    margin:0 !important;
    background:transparent !important;
    padding:0 !important;
  }

  .nav-ribbon::before{
    display:block !important;
    z-index:1;
  }
  .primary-nav{
    z-index:2;
    border-radius:999px !important;
    background:rgba(11,39,70,.8);
    max-width: 654px;
    display: flex;
     max-height: 61px;
  }
  .primary-nav .primary-menu{
    display:flex !important;
    gap:2.8rem !important;
  }
  .primary-nav .primary-menu a{
    color:#fff !important;
    opacity:0.95;
  }
}

@media (962px <= width <= 1200px){
  header.site-header{
    top:12px !important;
  }
  .primary-nav{
    max-height: 50px;
  }
}

@media (min-width:961px){
  .privacy-poricy{ display:none; }
}