/* --- ベーススタイル --- */
body {
  font-family: var(--site-font-family);
  line-height: 1.6;
  margin: 0;
  color: #333;
}
input, button, textarea, select { font-family: inherit; }

/* ★スクロール禁止（スマホメニュー用）★ */
body.is-locked{ 
  overflow:hidden !important; 
  position: fixed; 
  width: 100%; 
}

img { max-width: 100%; height: auto; }

/* コンテンツ枠（固定ページ等） */
.container{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}
@media (max-width:1024px){ .container{ max-width: 100%; padding: 20px 16px; } }
@media (max-width:768px){ .container{ padding: 16px 14px; } }
@media (max-width:480px){ .container{ padding: 14px 12px; } }

/* ===============================
   ヘッダー（全幅背景＋中央寄せ）
================================ */
.site-header{
  width: 100%;
  height: var(--header-h);
  position: fixed;
  top:0; left:0;
  z-index: 1800;
  border-bottom: 2px solid rgba(0,0,0,.06);
  box-sizing: border-box;
  transition: background 0.3s, border-bottom-color 0.3s;
}
/* ヘッダー固定対策：フロント以外は必ずヘッダー分だけ下げる */
main{
  padding-top: var(--header-h);
}

/* フロントページだけは被せる */
body.home main,
body.front-page main{
  padding-top: 0;
}

.header-inner {
  width: 100%;
  max-width: var(--container-width);
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display:flex;
  flex-direction: var(--header-flex-direction);
  align-items:center;
  justify-content:space-between;
}

/* ヘッダー背景・文字色 */
.site-header{ background: var(--header-bg-current); color: var(--header-fg-current); border-bottom-color: var(--header-border-current); }
.site-header a{ color: var(--header-fg-current); }

.logo-area{ display:flex; align-items:center; }
.logo-area a{ display:inline-flex; align-items:center; text-decoration:none; }
.logo-area img{ max-height: var(--logo-h); width:auto; height:auto; display:block; }
@media (max-width:768px){
  :root{ --logo-h: 40px; --header-h: calc(var(--logo-h) + 22px); }
}

/* PCナビ */
.pc-nav{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pc-nav ul{ display:flex; flex-wrap:nowrap; min-width:max-content; gap: var(--menu-gap); list-style:none; margin:0; padding:0; }
.pc-nav a{ white-space:nowrap; text-decoration:none; font-weight:700; opacity:.95; color:inherit; }
.pc-nav a:hover{ opacity:.75; }

/* ハンバーガー */
.menu-toggle{ 
  display:none; position: fixed; top: 14px; right: 14px; width: var(--ui-btn); height: var(--ui-btn); 
  background: var(--main-color); color:#fff; border:none; border-radius: var(--ui-radius); 
  font-size:22px; line-height: var(--ui-btn); text-align:center; cursor:pointer; z-index: 4000; 
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 2px 0 rgba(255,255,255,.12) inset; 
}
body.drawer-open .menu-toggle { background: #fff; color: var(--main-color); }

/* オーバーレイ */
.overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:.3s; z-index: 2400; }
.overlay.is-active{ opacity:1; visibility:visible; }

/* ===============================
   ★ 最新ドロワー（ダークすりガラス・余白なし）
================================ */
.drawer-nav {
  position: fixed; top: 0; right: 0; 
  width: min(320px, 80vw); height: 100vh;
  transform: translateX(110%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.8) !important; /* 濃い黒透明 */
  backdrop-filter: blur(15px);     /* 強いぼかし */
  z-index: 2500;
  padding: 0 !important; /* 余白を完全カット */
  box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
  box-shadow: -15px 0 45px rgba(0,0,0,0.5);
}
.drawer-nav.is-active { transform: translateX(0); }
@media (max-width: 768px) { .drawer-nav { height: 100dvh; } }

/* リスト部分を画面端まで広げる */
.drawer-nav ul { 
  list-style: none; margin: 0; padding: 0; 
  display: flex; flex-direction: column; 
}
.drawer-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } 

.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 18px; 
  text-decoration: none;
  color: #fff !important; 
  font-weight: 700;
  font-size: 1.0rem;
}
@media (max-width: 768px){
  .drawer-nav a{
    font-size: 0.85rem;
    padding: 12px 10px;
  }
}

.drawer-nav a:active { background: rgba(255, 255, 255, 0.1); }

/* 閉じるボタン（×）との干渉避け */
.drawer-nav ul::before {
  content: "";
  display: block;
  height: 70px; 
}
/* =========================================
   修正：ドロワー展開中は×ボタンを絶対に消さない
========================================= */
body.drawer-open .menu-toggle {
    display: block !important;
}

/* スクロール時の挙動 */

/* toggle時：ヘッダー全体をフェードで出し引き（JSで is-hidden / is-shown を付与） */
.site-header{
  transition: background 0.3s, border-bottom-color 0.3s, transform .25s ease, opacity .25s ease;
}
.site-header.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.site-header.is-shown{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 旧scrolled制御（PCナビだけ消す）は無効化：ヘッダー本体制御に一本化 */
.site-header.scrolled .pc-nav{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-header.scrolled ~ .menu-toggle{
  display: block;
}
/* toggle時：ヘッダーが隠れていてもハンバーガーは常に表示・操作可能にする */
.site-header.is-hidden ~ .menu-toggle{
  display: block;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width:1024px){ .pc-nav{ display:none; } .menu-toggle{ display:block; } }

/* その他スタイル */
body.page .entry-title,
body.page .page-title,
body.page .page-header .page-title{
  display: var(--page-title-display);
}

main img, main video{ max-width:100%; height:auto; }
main iframe{ max-width:100%; }

@media(max-width:1024px){ .alignwide, .alignfull{ max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } }

/* スクロールトップ設定（ベース） */
.scroll-top{
  position: fixed;
  right: 14px;
  bottom: calc(var(--scroll-top-bottom) + env(safe-area-inset-bottom));
  display: none;
  z-index: 2600;
  background: var(--main-color);
  color: var(--header-fg-solid);
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 2px 0 rgba(255,255,255,.12) inset;

  place-items: center;
  padding: 0;
  line-height: 1;
  font-size: 0;
}

.scroll-top.is-show{ display: grid; }

.scroll-top svg{
  display:block;
  width:26px;
  height:26px;
  fill: currentColor;
  margin:auto;
}


.scroll-top{ width:var(--scroll-top-w);height:var(--scroll-top-h);border-radius:var(--scroll-top-radius);line-height:var(--scroll-top-h); }
body.drawer-open .scroll-top{ z-index: 1200; pointer-events: none; opacity: .65; }

/* ===============================
   フッターCSS（決定版：内側にゆとりを持たせた配置）
================================ */
.footer-menu-area{ 
  background: var(--footer-menu-bg, var(--main-color)); 
  color: var(--footer-text-color); 
  padding: 60px 0; 
}

.footer-menu-inner{ 
  max-width: var(--container-width);
  margin: 0 auto;
  box-sizing: border-box; 
  
  /* ▼ 修正：端に寄りすぎないよう、内側に大きなクッション(padding)を入れる */
  padding: 0 17%;  /* ← これで左右がギュッと内側に寄ります */

  /* 左右配置 */
  display: flex;
  justify-content: space-between; 
  align-items: flex-start;
  gap: 60px; /* 左右ブロック間の最低間隔 */
}

.footer-menu-area a{ color: inherit; text-decoration: none; }

/* --- 左側：会社情報 --- */
.footer-left{ 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; /* 左揃え */
  gap: 24px;
}
.footer-site-logo img{ height: 60px; width: auto; display: block; }
.footer-company .fc-name{ font-weight: 800; margin: 0; font-size: 1.6rem; line-height: 1.4; }
.footer-company .fc-lines{ display: grid; gap: 10px; font-size: 1.15rem; opacity: 1; line-height: 1.8; }

/* SNSアイコン */
.footer-sns{ display: flex; gap: 12px; margin-top: 10px; }
.sns-icon{ width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: inherit; }

/* --- 右側：フッターメニュー（4つ縦積みで折り返し） --- */
.footer-right{
  padding-top: 10px; 
}

.footer-nav-list{ 
  /* ▼ Gridレイアウト：縦4行・自動列送り */
  display: grid;
  grid-template-rows: repeat(4, auto); 
  grid-auto-flow: column; 
  
  column-gap: 60px; /* 列同士の間隔 */
  row-gap: 10px;    /* 行同士の間隔 */
  
  list-style: none; margin: 0; padding: 0; 
}
.footer-nav-list li{ margin: 0; }
.footer-nav-list a{ font-weight: 700; font-size: 1.1rem; opacity: 0.95; white-space: nowrap; }

/* --- コピーライト（14px固定） --- */
.footer-copy-area{ 
  background: var(--main-color); 
  color: var(--footer-text-color); 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0; 
  font-size: 14px; 
  line-height: 1;
}
.footer-copy-area * { margin: 0 !important; padding: 0 !important; }

/* =========================================
   スマホ・タブレット対応（修正箇所）
   ★ここを「完全な1列」にして見やすくしました
========================================= */
@media (max-width: 900px){
  .footer-menu-area{ padding: 40px 0; }

  .footer-menu-inner{ 
    flex-direction: column; /* 縦並び */
    gap: 40px; 
    padding: 0 24px; /* スマホに適した左右余白 */
  }

  /* 会社情報エリア：幅100%確保 */
  .footer-left{ width: 100%; }

  /* メニューエリア：幅100%確保 */
  .footer-right{ width: 100%; padding-top: 0; }

  .footer-nav-list{
    /* ★ここを修正：Gridをやめて、シンプルな縦並び（Flex）にする */
    display: flex;
    flex-direction: column;
    gap: 16px; /* メニュー間の間隔 */
    
    /* 以前のGrid設定をリセット */
    grid-template-rows: unset;
    grid-auto-flow: unset;
    column-gap: 0;
  }

  .footer-nav-list a{
    display: block;
    padding: 8px 0;     /* タップしやすいように上下に少し余白 */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* 薄い線で区切る */
    width: 100%;
  }
}
/* ✅ ドロワー表示中はヘッダー＆PCメニューを絶対に出さない（復活バグ潰し） */
body.drawer-open .site-header{
  transform: translateY(-110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.drawer-open .pc-nav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}