@charset "UTF-8";

/* ===========================
   全ページ共通：カラー・サイズ変数
   ここの数値を変えると全体に反映されます
=========================== */
:root {
  --navy: #1a2744;        /* 濃紺：見出し・テキストに使用 */
  --teal: #82d8d0;        /* ティール：アクセントカラー */
  --teal-dark: #5bbfb6;   /* ティール濃：ホバー時など */
  --teal-pale: #edfaf9;   /* ティール薄：背景に使用 */
  --teal-mid: #c5eeeb;    /* ティール中間 */
  --bg2: #f2f4f8;         /* 薄グレー背景 */
  --text: #1a2744;        /* 本文テキスト色 */
  --text-light: #4a5568;  /* サブテキスト色（説明文など） */
  --white: #ffffff;
  --border: #e0ecea;      /* 区切り線の色 */
}

/* ===========================
   全ページ共通：リセット・基本設定
=========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  font-size: 16px;    /* 本文の基本フォントサイズ */
  line-height: 2.2;   /* 本文の行間 */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ===========================
   全ページ共通：セクション見出しパーツ
   .section-label ：英語小見出し（例：SERVICES）
   .section-title ：日本語大見出し
   .section-desc  ：見出し下の説明文
=========================== */
.section-label {
  font-size: 13px; letter-spacing: 0.25em; color: var(--teal-dark);
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: ''; display: block; width: 24px; height: 2px; background: var(--teal);
}
.section-title {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(26px, 3.5vw, 40px); /* 最小26px〜最大40px */
  line-height: 1.5; margin-bottom: 16px; color: var(--navy);
}
.section-desc {
  color: var(--text-light); font-size: 18px; line-height: 2.2; font-weight: 300;
}

/* 全セクションの上下左右の余白 */
section { padding: 96px 80px; }

/* ===========================
   全ページ共通：ボタン
   .btn-primary  ：ティール色ボタン（メインCTA）
   .btn-secondary：透明ボタン（紺背景上のサブCTA）
=========================== */
.btn-primary {
  background: var(--teal); color: var(--navy);
  padding: 16px 36px; font-size: 18px; font-weight: 700;
  text-decoration: none; border-radius: 100px;
  display: inline-block; transition: all 0.2s;
  border: 2px solid var(--teal);
}
.btn-primary:hover {
  background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white);
}
.btn-secondary {
  background: transparent; color: var(--white);
  padding: 14px 32px; font-size: 18px; font-weight: 700;
  text-decoration: none; border-radius: 100px;
  display: inline-block; transition: all 0.2s;
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }

/* ===========================
   全ページ共通：ヘッダー
   画面上部に固定・スクロールで影が出る
=========================== */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 48px; height: 68px; /* ヘッダーの高さ */
  display: flex; justify-content: space-between; align-items: center;
  transition: box-shadow 0.3s;
}
/* WordPress管理バー表示時の位置調整 */
.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar header { top: 46px; }
  .admin-bar .nav-drawer { top: calc(68px + 46px); }
}
/* スクロール時に影をつける */
header.scrolled { box-shadow: 0 2px 24px rgba(26,39,68,0.08); }

/* ロゴ */
.logo {
  font-family: 'Shippori Mincho', serif; font-size: 18px;
  color: var(--navy); text-decoration: none;
}
.logo span { color: var(--teal-dark); font-weight: 700; }

/* PCナビゲーション */
nav { display: flex; align-items: center; gap: 28px; }
nav a {
  color: var(--text-light); text-decoration: none;
  font-size: 16px; /* ナビのフォントサイズ */
  transition: color 0.2s;
}
nav a:hover { color: var(--navy); }

/* 無料相談ボタン（ヘッダー右端） */
.nav-cta {
  background: var(--teal); color: var(--navy) !important;
  padding: 10px 24px; border-radius: 100px; font-weight: 700 !important;
}
.nav-cta:hover { background: var(--teal-dark) !important; color: var(--white) !important; }

/* ===========================
   全ページ共通：ハンバーガーボタン（スマホ用）
=========================== */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 8px; width: 40px; height: 40px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--navy); transition: all 0.3s;
}
/* ×ボタンになった時のアニメーション */
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================
   全ページ共通：ドロワーメニュー（スマホ用）
   右からスライドして出てくるメニュー
=========================== */
.nav-drawer {
  position: fixed; top: 68px; right: -100%; width: 280px; height: calc(100vh - 68px);
  background: var(--white); z-index: 99; transition: right 0.3s ease;
  box-shadow: -4px 0 24px rgba(26,39,68,0.1); overflow-y: auto;
}
.admin-bar .nav-drawer { top: calc(68px + 32px); }
.nav-drawer.open { right: 0; } /* 開いた状態 */
.nav-drawer-inner { padding: 32px 24px; display: flex; flex-direction: column; gap: 4px; }
.nav-drawer-inner a {
  display: block; padding: 14px 16px; font-size: 18px;
  color: var(--text); text-decoration: none; border-radius: 8px;
  transition: background 0.2s; font-weight: 300;
}
.nav-drawer-inner a:hover { background: var(--teal-pale); color: var(--navy); }
/* ドロワー内の無料相談ボタン */
.drawer-cta {
  margin-top: 16px; background: var(--teal); color: var(--navy) !important;
  font-weight: 700 !important; text-align: center; border-radius: 100px !important;
}
/* ドロワー開いた時の背景オーバーレイ */
.nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 98; display: none;
}
.nav-overlay.show { display: block; }

/* ===========================
   全ページ共通：フッター
=========================== */
footer {
  background: #111d35; padding: 56px 80px 36px;
}
.footer-inner {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 40px; gap: 40px;
}
/* フッターロゴ */
.footer-logo {
  font-family: 'Shippori Mincho', serif; font-size: 20px;
  color: var(--white); margin-bottom: 10px;
}
.footer-logo span { color: var(--teal); }
/* フッターキャッチコピー */
.footer-tagline { font-size: 14px !important; color: var(--white); font-weight: 300; }
.footer-tagline-main {
  font-size: 17px !important; color:  var(--white); font-weight: 700;
  letter-spacing: 0.1em; margin-top: 8px;
}
/* フッターナビリンク */
.footer-links { display: flex; flex-direction: column; gap: 0; }
.footer-links a {
  color: rgba(255,255,255,0.7); text-decoration: none;
  font-size: 13px; padding: 3px 0; transition: color 0.2s; font-weight: 300;
}
.footer-links a:hover { color: var(--teal); }
/* フッター会社情報 */
.footer-company-label { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.footer-company-name { font-size: 16px; color: rgba(255,255,255,0.9); }
.footer-company-url { font-size: 15px; color: rgba(255,255,255,0.7); margin-top: 4px; }
/* パンくずナビ */
.breadcrumb {
  padding: 12px 48px;
  font-size: 13px;
  color: var(--text-light);
  background: var(--bg2);
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 68px;
}
.breadcrumb a {
  color: var(--teal-dark);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
/* コピーライト */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 20px; font-size: 13px;
  text-align: center; color: rgba(255,255,255,0.5);
}

/* ===========================
   レスポンシブ：タブレット以下（900px以下）
=========================== */
@media (max-width: 900px) {
  section { padding: 64px 28px; }
  header { padding: 0 24px; }
  nav a:not(.nav-cta) { display: none; } /* PCナビを非表示 */
  .nav-hamburger { display: flex; }       /* ハンバーガーを表示 */
  .nav-cta { display: none !important; }
  footer { padding: 40px 28px 28px; }
  .footer-inner { flex-direction: column; gap: 24px; }

}

/* ===========================
   レスポンシブ：スマホ（600px以下）
=========================== */
@media (max-width: 600px) {
  body { font-size: 18px; }
  p, li, td { font-size: 18px !important; line-height: 2.2 !important; }
  .footer-links a { font-size: 16px !important; }
}