@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;      /* 区切り線の色 */
  --font-base: 16px;      /* 本文基本 */
  --font-card: 16px;      /* カード説明文 */
  --font-label: 16px;     /* タグ・ラベル */
  --font-nav: 16px;       /* ナビ */
}

/* ===========================
   全ページ共通：リセット・基本設定
=========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* iOS Safariの自動文字拡大(font boosting)を無効化し、CSS指定どおりのサイズで表示させる */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  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-dark);
}
.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(--white) !important;
  padding: 7px 25px; border-radius: 6px; 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: 12px 24px; display: flex; flex-direction: column; gap: 0; }
.nav-drawer-inner a {
  display: block; padding: 8px 16px; font-size: 15px;
  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(--white) !important;
  font-weight: 700 !important; text-align: center; border-radius: 100px !important;
}
/* ドロワー内の無料相談ボタン：ホバー時にティール濃色へ */
.drawer-cta:hover {
  background: var(--teal-dark) !important;
  color: var(--white) !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: #070d1c; padding: 56px 80px 36px; /* 締め（紺 #111d35 に着地）より一段深い墨紺。色でも境目を出す（2026-09-13） */
  border-top: 1px solid rgba(130,216,208,0.28); /* 締めとの境目はティールの細い線 */
}
.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: var(--white); 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: 13px; color: rgba(255,255,255,0.7); margin-bottom: 2px; }
.footer-company-name { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 1px; }
.footer-company-url { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 0; }
.footer-company-url a { color: var(--white) !important; text-decoration: none; transition: color 0.2s; }
.footer-company-url a:hover { color: var(--teal); }
/* フッター内の法的リンク */
.footer-legal-links {
  margin-top: 0;
  padding-top: 0;
}
.footer-legal-links a {
  display: block; color: #ffffff !important;
  text-decoration: none; font-size: 13px !important;
  margin-bottom: 4px; transition: color 0.2s; font-weight: 300;
  line-height: 2;
}
.footer-legal-links a:hover { color: var(--teal); }

/* ===========================
   フッター：noteバナー「絆想禄」
=========================== */
.footer-note-banner {
  margin-top: 20px;
}
.footer-note-banner img {
  max-width: 100%;
  width: 320px;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.footer-note-banner img:hover {
  opacity: 0.85;
}

/* パンくずナビ */
.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);
}

/* ===========================
   レスポンシブ：タブレット以下（1024px以下でハンバーガー）
   ナビをスリム化(5項目+CTA)したため、しきい値を1280→1024に変更
=========================== */
@media (max-width: 1024px) {
  header nav a:not(.nav-cta) { display: none; } /* PCナビを非表示 */
  .nav-hamburger { display: flex; }       /* ハンバーガーを表示 */
  .nav-cta { display: none !important; }
}
@media (max-width: 900px) {
  section { padding: 64px 28px; }
  header { padding: 0 24px; }
  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; }
  .footer-legal-links a { font-size: 16px !important; }
}


/* reCAPTCHAバッジを全ページで非表示 */
.grecaptcha-badge {
  visibility: hidden;
}

/* ===========================
   FAQ（全ページ共通 — TOPと同じカード型）
=========================== */
.faq { background: var(--white); }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-list { margin-top: 56px; }
.faq-item {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--teal); }
.faq-q {
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  gap: 20px;
}
.faq-q::before {
  content: 'Q';
  color: var(--teal-dark);
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.faq-icon {
  width: 28px;
  height: 28px;
  background: var(--teal-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-dark);
  font-size: 16px;
  flex-shrink: 0;
  transition: background 0.2s;
  font-weight: 300;
  margin-left: auto;
}
.faq-q.open .faq-icon { background: var(--teal); color: var(--navy); }
.faq-a {
  display: none;
  padding: 0 28px 22px;
  font-size: 15px;
  color: var(--text-light);
  line-height: 2.2;
  font-weight: 300;
}
.faq-a::before {
  content: 'A';
  color: #e53e3e;
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 700;
  display: inline;
  margin-right: 10px;
}
.faq-a.open { display: block; }

/* ===========================
   CTA（全ページ共通）
=========================== */
.cta {
  background: var(--teal-pale);
  text-align: center;
  border-top: 3px solid var(--teal);
}
.cta .section-label { justify-content: center; }
.cta h2 {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(34px, 4vw, 44px);
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 16px;
}
.cta h2 em { font-style: normal; color: var(--teal-dark); }
.cta p {
  color: var(--text-light);
  font-size: 16px;
  line-height: 2.2;
  font-weight: 300;
  margin-bottom: 44px;
}
.cta-note {
  font-size: 13px;
  color: var(--navy);
  margin-top: 18px;
  font-weight: 300;
}

/* ===========================
   絵文字代替アイコン（minna_icon / Lucide）
=========================== */
.m-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; color: var(--teal-dark); }

/* ===========================
   ブログ用 結論ボックス
   (旧: 記事内のinline style。WAFがstyle属性+リンクの組合せを
    誤検知して投稿APIが403になるため、クラスに移行 2026-07-07)
=========================== */
.minna-point-box {
  background: #f8f9fa;
  border-left: 4px solid #4285f4;
  padding: 16px 20px;
  margin: 24px 0;
}