@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700&family=Montserrat:wght@500;600&display=swap');
/* assets/fonts/zen-maru-gothic/ に置いた前提の例 */

/* @font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/Zen-Maru-Gothic/ZenMaruGothic-Regular.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 先に代替フォントを表示してFOIT回避 */
/* } */ 
@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/zen-maru-gothic/zenmaru-regular.woff2') format('woff2'),
       url('/assets/fonts/zen-maru-gothic/zenmaru-regular.ttf') format('truetype'); /* フォールバックとしてTTFも */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/Zen-Maru-Gothic/ZenMaruGothic-Medium.woff2') format('woff2'),
       url('/assets/fonts/zen-maru-gothic/zenmaru--Medium.ttf') format('truetype'); /* フォールバックとしてTTFも */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/Quicksand/Quicksand_aa.woff2') format('woff2');
       /* url('/assets/fonts/Quicksand/ZenMaruGothic-Bold.ttf') format('truetype'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}



/* ハンバーガーメニューアイコン */
.p-hamburger {
  position: fixed; /* 画面に固定 */
  top: 20px;
  right: 20px; /* 右上に配置 */
  width: 50px;
  height: 50px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  z-index: 1002; /* メニューよりも前に表示 */
  border-radius: 4px;
  transition: transform 0.3s ease;
}

/* ハンバーガーアイコンのライン */
.p-hamburger span {
  position: absolute;
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.p-hamburger span:nth-child(1) { top: 14px; }
.p-hamburger span:nth-child(2) { top: 23px; }
.p-hamburger span:nth-child(3) { top: 32px; }

/* メニュー開いた後のアニメーション */
.p-hamburger.is-active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.p-hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.3);
}

.p-hamburger.is-active span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}



/* =========================
   メニュー全体（オーバーレイ面）
   ========================= */
.p-gnav{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* background: #c3ead4;          全面の下地色。透過にしたいなら rgba(195,234,212,.92) 等に */
  background: #fff;  
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
}
.p-gnav.is-active{ opacity:1; visibility:visible; }

/* コンテンツの左右2カラム（左：ロゴ／右：メニュー） */
.p-gnavInnerWrapper{
  display: flex;
  align-items: center;
  gap: 2vw;
  width: 100%;
  height: 100%;
  padding: 0 3vw;               /* 全体の左右余白 */
}

/* 左カラム：ロゴ（割合は必要に応じて） */
.p-gnav .logo{
  flex: 0 0 52%;                /* ← ロゴ側の幅。小さくするとメニューが広がる */
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-gnav .logo img{
  max-width: 40%;
  height: auto;
  object-fit: contain;
}

/* 右カラム：メニュー領域（ここを広げたい時は数値を上げる） */
.p-gnavMenu{
  flex: 0 0 42%;                /* ← メニューの横幅。例：45% や 48% へ上げると左へ広がる */
  margin-left: auto;            /* 右寄せ維持 */
}


/* 好みの色 */
:root{
  --menu-text: #333;
  --menu-muted:#5a5a58;
  --menu-line: #305545;
  --dot:       #083a32;
  --dot-hover: #083a32;
  --line-hover:#305545;
  --hover-text:#04ec74;          /* 文字のホバー色 */
  /* 追加：ローカルにあり得る丸ゴ系 → 無ければ標準系 */
  /* --font-jp-rounded: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
                     "Yu Gothic", "メイリオ", Meiryo, "Yu Gothic UI",
                     system-ui, sans-serif;
  --font-en-rounded: "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;*/
} 

/* 1項目：ドット | [日本語 | 線 | 英語]（Flex 版） */
.p-gnavItem{
  display:flex;
  align-items:center;            /* 縦センター */
  gap:12px;
  padding:14px 0;
  background:transparent;
  border:0;
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* ドット（左） */
.p-gnavItem::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:var(--dot);
  flex:0 0 10px;
  transition:.25s ease;
}

/* クリック領域（日本語｜線｜英語） */
.p-gnavItem > a{
  display:flex;
  align-items:center;            /* ← 線が常に中央 */
  gap:12px;
  width:100%;
  min-width:0;
  text-decoration:none;
  color:var(--menu-text);
}

/* 日本語（左：丸め書体） */
/* .p-gnavItem .jp{
  order:0;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(20px, 2.1vw, 28px);
  letter-spacing:.06em;
  line-height:1;                 /* 縦ズレ防止 */
/* } */
/* 日本語（左：丸め書体） */
.p-gnavItem .jp{
  order:0;
  /* font-family: var(--font-jp-rounded); */
  /* font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', system-ui, sans-serif; */
  /* font-family: 'ZenMaruGothic', 'ヒラギノ丸ゴ ProN', 'メイリオ', system-ui, sans-serif; */
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif !important;
  /* font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important; */


  font-weight:700 !important;;
  font-size:clamp(20px, 2.1vw, 28px);
  letter-spacing:.06em;
  line-height:1;               /* 縦ズレ防止 */
  transition: color 0.25s ease, opacity 0.25s ease;
}




/* 伸縮する横線（中央） */
.p-gnavItem > a::before{
  content:"";
  order:1;
  flex:1 1 auto;                 /* ← これが“伸びる線” */
  height:0.5px;
  background:var(--menu-line);
  transition:.25s ease;
  /* transform: translateY(0.5px); 0.5px 上下にずらして実ピクセルへ寄せる */
  /* transform: translateY(0);    念のためリセット */
}

/* 英語（右） */
/* .p-gnavItem .en{
  order:2;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(13px, 1.4vw, 18px);
  color:var(--menu-muted);
  white-space:nowrap;            /* 折り返し防止＝消えない */
  /* line-height:1; */
/* } */

/* 英語（右） */
.p-gnavItem .en{
  order:2;
  /* font-family: var(--font-en-rounded); */
  /* font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', system-ui, sans-serif !important; */
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
  font-weight:400 !important;;
  font-size:clamp(13px, 1.4vw, 18px);
  color:var(--menu-muted);
  white-space:nowrap;
  line-height:1;
}



/* ホバー演出（← カンマ抜けを修正） */
.p-gnavItem:hover::before{ background:var(--dot-hover); }
.p-gnavItem:hover > a::before{ background:var(--line-hover); }
.p-gnavItem:hover .jp,
.p-gnavItem:hover .en{ 
  color:var(--hover-text); 
  /* transition: color 0.25s ease; */
  transition: color 0.28s ease-in-out;


}

/* キーボード操作でも色が変わるように（任意） */
.p-gnavItem > a:focus-visible .jp,
.p-gnavItem > a:focus-visible .en{ color:var(--hover-text); outline:none; }



/* オーバーレイ（必要なら使用） */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  z-index: 999;
}
.overlay.is-active{ opacity:1; visibility:visible; }

/* =========================
   メニュー背景画像設定
   ========================= */
.p-gnav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* background-color: #c3ead4; 背景色（画像が透ける補助色） */
  background-color: #fff; /* 背景色（画像が透ける補助色） */
  background-image: url("/assets/img/logo_tanaka_back.png"); /* ← 画像の相対パスに変更 */
  background-repeat: no-repeat;
  background-size: cover;       /* 全面に拡大してフィット */
  background-position: center;  /* 中央揃え */
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
}

/* 表示中（メニュー開いたとき） */
.p-gnav.is-active {
  opacity: 1;
  visibility: visible;
}

/* ============ モバイル（～768px）だけ縦並び ============ */
/* ===== Mobile layout (例: 〜768px) ====================== */
@media (max-width: 768px) {

  /* オーバーレイ内を縦レイアウトにして中央寄せ */
  .p-gnavInnerWrapper{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 24px;
  }

  /* ロゴ：上に置いて少し小さめに（端末幅の6割を上限） */
  .p-gnav .logo{
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
  }
  .p-gnav .logo img{
    width: min(62vw, 180px); /* 見え方に応じて 160〜200px で微調整可 */
    height: auto;
  }

  /* メニュー領域は全幅で、横スクロールはさせない */
  .p-gnavMenu{
    width: 100%;
    margin: 0;
    padding: 0 2px;
  }

  /* 行レイアウト：線とドットを消してシンプルに */
  .p-gnavItem{ 
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: transparent;
  }
  .p-gnavItem:last-child{ border-bottom: none; }
  .p-gnavItem::before,
  .p-gnavItem > a::before{ display: none !important; }

  /* 行中の並びは「JP —— EN」だけ */
  .p-gnavItem > a{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;               /* モバイルのはみ出し防止 */
    text-decoration: none;
  }

  /* 親項目（見出し）を大きく・太く */
  .p-gnavItem.parent .jp{
    /* font-family: "Zen Maru Gothic","M PLUS Rounded 1c",system-ui,sans-serif; */
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
    font-weight: 700  !important;
    font-size: 22px;            /* 20〜24pxで好み調整 */
    letter-spacing: .02em;
    line-height: 1.15;
  }
  .p-gnavItem.parent .en{
    margin-left: auto;
    font-family: Montserrat,system-ui,sans-serif;
    font-weight: 600 !important;
    font-size: 14px;
    color: #9aa0a6;
  }

  /* 子項目は少し小さく、左インデント */
  .p-gnavItem.child{ padding-left: 8px; }
  .p-gnavItem.child .jp{
    /* font-family: "Zen Maru Gothic","M PLUS Rounded 1c",system-ui,sans-serif; */
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
    font-weight: 500;
    font-size: 18px;            /* 16〜18px推奨 */
    line-height: 1.2;
  }
  .p-gnavItem.child .en{
    margin-left: auto;
    /* font-family: Montserrat,system-ui,sans-serif; */
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
    font-weight: 600;
    font-size: 13px;
    color: #9aa0a6;
  }

  /* 保険：横はみ出し抑止 */
  .p-gnav{ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .p-gnavInnerWrapper, .p-gnavMenu, .p-gnavItem > a{ box-sizing: border-box; }
}

/* スクロールを無効化 */
body.no-scroll {
  overflow: hidden;
}