/***** ================================
 *  Header (logo under title / nav right)
 *  対象HTML構造：
 *  <header class="header-section">
 *    <div class="header-inner1"><img class="site-logo" ...></div>
 *    <div class="header-inner2"><h1 class="service-title">...</h1></div>
 *    <nav class="global-nav"> ...（wp_nav_menuで<ul class="nav-list">）...</nav>
 *  </header>
 *================================= *****/

/* ルート（必要に応じてサイト全体の余白に合わせて調整） */
.header-section {
  /* 2カラムグリッド：左=ロゴ/タイトル列、右=ナビ */
  display: grid;
  grid-template-columns: auto 1fr;  /* 左は必要幅、右は余り */
  /* 行は自動で2行（ロゴ行・タイトル行）を作る想定 */
  align-items: center;              /* 行の縦位置を中央寄せ */
  column-gap: 28px;                 /* 左右の間隔 */
  row-gap: 8px;                     /* ロゴとタイトルの間隔 */
  padding: 24px 48px;               /* ヘッダー内の余白 */
  /* background: #ffffff63; */
  background-color: rgba(245,245,245,1);

  /* border-bottom: 1px solid #eaeaea; */
}

/* 左列：ロゴ行 */
.header-inner1 {
  grid-column: 1;  /* 1列目 */
  grid-row: 1;     /* 1行目 */
  display: flex;
  align-items: center;
}

/* 左列：タイトル行（ロゴの直下） */
.header-inner2 {
  grid-column: 1;  /* 1列目 */
  grid-row: 2;     /* 2行目 */
  display: block;
}

/* 右列：ナビ（2行分を縦にまたいで中央揃え） */
.global-nav {
  grid-column: 2;              /* 2列目 */
  grid-row: 2;                 /* タイトル（.header-inner2）と同じ行に配置 */
  align-self: baseline;        /* ベースラインを合わせる（見出しと高さ位置を揃える） */
  justify-self: end;           /* 右寄せ */
}

/* ロゴ画像 */
.site-logo {
  height: 40px;
  margin-top: 15px;
  margin-bottom: 10px;
  /* display: block; */
}
/* コンテナ */
.header-inner2{
  grid-column: 1;        /* 左列 */
  grid-row: 2;           /* ロゴの下の行 */
}

/* 共通タイポ（両タイトルに適用） */
.header-inner2 .service-title-pc,
.header-inner2 .service-title-smartphone{
  margin: 0;
  line-height: 1.45;
  font-weight: 700;
  color: #333;
  letter-spacing: .02em;
  word-break: keep-all;
}

/* 既定（PC想定）: PC版を表示、SP版は非表示 */
.header-inner2 .service-title-pc{
  font-size: clamp(22px, 2.2vw, 28px);
  display: block;
}
.header-inner2 .service-title-smartphone{
  display: none;
}
/* ===== Hamburger visibility (PC/Tablet default: hidden) ===== */
.nav-toggle-input {
  display: none;
}
/* ===== ナビゲーションの体裁（wp_nav_menuの出力前提） ===== */
.global-nav{
  font-size: 24px;
  /* border: solid 1px; */
  margin-right: 150px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各メニュー項目 */
.nav-list > li {
  position: relative; /* サブメニューの基準点 */
}

/* リンク */
.nav-list a {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 2px; /* クリック領域の確保 */
  transition: color 0.2s ease;
}

.nav-list a:hover,
.nav-list a:focus {
  color: #0073aa; /* WP系の青に寄せる */
}

/* ----- サブメニュー（必要な場合のみ） ----- */
.nav-list .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  display: none;            /* 初期は非表示 */
  z-index: 1000;
}

.nav-list .sub-menu li {
  padding: 0;
}

.nav-list .sub-menu a {
  display: block;
  padding: 8px 12px;
  color: #333;
  white-space: nowrap;
}

.nav-list .sub-menu a:hover {
  background: #f5f7fa;
  color: #0073aa;
}

/* 親にホバーしたらサブメニュー表示（PC想定） */
.nav-list > li.menu-item-has-children:hover > .sub-menu {
  display: block;
}

/* ====== レスポンシブ ====== */
/* =========================
   Header：タブレット用 (641–1024px)
   ロゴ左／タイトル中央寄り／ナビ右
   ========================= */
@media (max-width: 1180px){
  /* ヘッダー全体レイアウトを少しコンパクトに */
  .header-section{
    display: grid;
    grid-template-columns: auto 1fr auto; /* ロゴ | タイトル | ナビ */
    grid-template-rows: auto;
    align-items: center;
    column-gap: 16px;
    padding: 14px 24px;
  }

  /* ロゴ */
  .site-logo{
    max-width: 190px;
    height: auto;
  }

  /* タイトル（PC版を使う） */
  .header-inner2{
    text-wrap: nowrap;
    grid-column: 1; 
    justify-self: flex-start;
  }
  .service-title-pc{
    display: block;
    font-size: 15px;
    line-height: 1.4;
  }
  .service-title-smartphone{
    display: none;
  }

  /* ナビゲーション：普通の横並びメニューにする */
  .global-nav{
    margin-right: 5px;
    /* grid-column: 2; */
    /* justify-self: flex-end; */
  }
  .nav-list{
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .nav-list > li > a{
    padding: 6px 0;
    font-size: 14px;
  }

  /* タブレットではハンバーガーを非表示にする */
  .header-inner3{
    display: none;
  }
  .nav-toggle,
  .nav-toggle-input{
    display: none;
  }
}
/* スマホ：1カラム縦並び（ロゴ → タイトル → ナビ） */
@media (max-width: 640px) {
  .header-section {
    position: relative;           /* ハンバーガー配置用 */
    grid-template-columns: 1fr;   /* 1列 */
    row-gap: 10px;
    padding: 12px 16px;
  }
  /* Show hamburger wrapper on smartphone */
  .header-inner3{
    display: block;
  }

  .header-inner1 {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start; /* 中央寄せにする場合は center */
  }
  .header-inner2 {
    grid-column: 1;
    grid-row: 2;
  }
  .global-nav {
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;        /* 横いっぱい */
    margin-top: 8px;
  }

  .site-logo { max-height: 60px; }
    /* .header-inner2{ */
    /* スマホ時は中央寄せにしたい場合は有効化 */
    /* text-align: center; */
    /* } */
  .header-inner2 .service-title-pc{
    display: none;
  }
  .header-inner2 .service-title-smartphone{
    display: block;
    font-size: 17px;      /* 必要に応じて 20–24px で調整 */
    line-height: 1.5;
  }

  /* ========== ハンバーガー（CSSのみで開閉） ========== */
  .nav-toggle {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
  }
  .nav-toggle-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; border: 0; padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  /* 3本線 */
  .nav-toggle::before,
  .nav-toggle::after,
  .nav-toggle-bar {
    content: "";
    position: absolute;
    display: block;
    width: 24px;
    height: 2.5px;
    background: #1c2333;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle::before { transform: translateY(-7px); }
  .nav-toggle::after  { transform: translateY(7px); }
  /* .nav-toggle-bar　{} */

  /* 開閉アニメ（×に変形） */
  .nav-toggle-input:checked ~ .header-inner3 .nav-toggle .nav-toggle-bar { opacity: 0; }
  .nav-toggle-input:checked ~ .header-inner3 .nav-toggle::before { transform: rotate(45deg); }
  .nav-toggle-input:checked ~ .header-inner3 .nav-toggle::after  { transform: rotate(-45deg); }
  /* ========== メニュー（折りたたみ → 展開） ========== */
  .nav-list {
    display: none;                 /* 初期は閉じる */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }
  .nav-list a {
    padding: 12px 4px;
    border-bottom: 1px solid #eee;
  }
  .nav-list > li:last-child a { border-bottom: none; }

  /* チェック時に展開（トグルとnavは兄弟） */
  .nav-toggle-input:checked ~ .global-nav .nav-list {
    display: flex;
  }

  /* サブメニューは縦展開 */
  .nav-list .sub-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin-left: 12px; /* 少しインデント */
  }
  .nav-list > li.menu-item-has-children:focus-within > .sub-menu,
  .nav-list > li.menu-item-has-children:hover > .sub-menu {
    display: block; /* タップ/ホバーで展開 */
  }
}