/*
Theme Name:     Lightning-child
Description:    Lightningの子テーマ
Author:         admin
Template:       lightning
*/

/* ================================= */
/* 行政書士サイト：質問ボックス（診断など用） */
/* ================================= */

body {
  font-family: "Hiragino Kaku Gothic ProN", sans-serif; /** 日本語フォント **/
  background: #fff; /** 背景色（白） **/
  color: #333; /** 文字色 **/
  text-align: center; /** テキスト中央寄せ **/
  padding: 50px 20px; /** 上下左右の余白 **/
}

.question-box {
  max-width: 500px; /** 最大幅 **/
  margin: 0 auto; /** 中央寄せ **/
  border: 1px solid #ccc; /** 枠線 **/
  border-radius: 10px; /** 角丸 **/
  padding: 30px; /** 内側余白 **/
  box-shadow: 0 3px 10px rgba(0,0,0,0.05); /** 影 **/
}

.question-text {
  font-size: 18px; /** 文字サイズ **/
  margin-bottom: 30px; /** 下余白 **/
}

.btn {
  display: inline-block; /** 横並び **/
  width: 120px; /** 幅 **/
  padding: 12px 0; /** 高さ **/
  margin: 10px; /** ボタン間の余白 **/
  font-size: 16px; /** 文字サイズ **/
  font-weight: bold; /** 太字 **/
  border: none; /** 枠線なし **/
  border-radius: 6px; /** 角丸 **/
  cursor: pointer; /** ポインター表示 **/
  transition: 0.3s; /** ホバー時のアニメーション **/
}

.hero i {
  color: #e8f3ff !important; /** 明るい水色にして背景とのコントラストを出す **/
  text-shadow: 0 1px 3px rgba(0,0,0,0.2); /** 軽い影で立体感を追加 **/
}

.btn-yes {
  display: inline-block !important;  /** 強制的に表示 **/
  background: #0073aa !important;    /** WordPressブルー **/
  color: #fff !important;            /** 白文字 **/
  padding: 12px 24px !important;     /** 内側余白 **/
  border-radius: 6px !important;     /** 角丸 **/
  font-weight: bold !important;      /** 太字 **/
  border: none !important;           /** 枠線なし **/
  cursor: pointer !important;        /** ポインタ表示 **/
}

.btn-yes:hover {
  background: #005f8d !important;    /** 濃いブルーに変化 **/
}

.btn-no {
  background: #ccc; /** グレー背景 **/
  color: #333; /** 文字 **/
}
.btn-no:hover {
  background: #bbb; /** 濃いグレー **/
}

.result {
  font-size: 20px; /** 大きめ文字 **/
  margin-top: 40px; /** 上余白 **/
  font-weight: bold; /** 太字 **/
  color: #0073aa; /** ブルー文字 **/
}


/** =============================================== **/
/** 売れる行政書士ホームページ販売LP - CSS完全版 **/
/** =============================================== **/

/** --- ページ全体 --- **/
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  background: #fff;
  margin: 0;
  padding: 0;
  line-height: 1.8;
}

/** --- セクション共通 --- **/
section {
  padding: 80px 20px;
  text-align: center;
}


/* =============================================== */
/* タイトル（h2）全体修正：すべて見えるように調整 */
/* =============================================== */

/* --- 共通スタイル --- */
section h2,
.features h2,
.price h2,
.before-after h2,
.faq h2,
.flow h2,
.voice h2,
.cta-section h2 {
  color: #004c80 !important; /* 濃い青で明確に見せる */
  font-weight: 700;
  font-size: 1.8em;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(255,255,255,0.6); /* 白っぽい光で浮かせる */

  display: inline-block;
  padding-bottom: 6px;
}

/* --- 暗い背景（ヒーロー・CTA）では白文字に変更 --- */
.hero h2,
.hero h1,
.cta-section h2 {
  color: #ffffff !important; /* 白文字 */
  text-shadow: 0 2px 6px rgba(0,0,0,0.4); /* 黒影で浮かせる */
  border-bottom: none;
}

/* --- 見出し以外のタイトル調整 --- */
h3 {
  color: #004c80;
  font-weight: 600;
  margin-bottom: 10px;
}

/* --- モバイル対応（フォント縮小） --- */
@media (max-width: 768px) {
  section h2,
  .features h2,
  .price h2,
  .before-after h2,
  .faq h2,
  .flow h2,
  .voice h2,
  .cta-section h2 {
    font-size: 1.5em;
  }
}


/** --- メインボタン（CTA） --- **/
.btn-main {
  background: #ff9800;
  color: #fff;
  padding: 14px 36px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  transition: 0.3s;
}
.btn-main:hover {
  background: #e68900;
  transform: translateY(-2px);
}

/** --- サブボタン --- **/
.btn-sub {
  background: #0073aa;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}
.btn-sub:hover {
  background: #005f8d;
}

/** --- ヒーローセクション --- **/
.hero {
  background: linear-gradient(135deg, #0073aa, #004c80);
  color: #fff;
  padding: 120px 20px;
}
.hero h1 {
  font-size: 2.4em;
  margin-bottom: 20px;
}
.hero p {
  font-size: 1.2em;
  margin-bottom: 30px;
}
.hero-subtitle {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
  font-weight: 700;
}

/** --- 特徴セクション --- **/
.features {
  background: #fff;
}
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.feature-item {
  background: #f9f9f9;
  border-radius: 10px;
  width: 280px;
  padding: 30px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: 0.3s;
}
.feature-item:hover {
  transform: translateY(-5px);
}
.feature-item i {
  font-size: 36px;
  color: #0073aa;
  margin-bottom: 10px;
}
.feature-item h3 {
  font-size: 1.3em;
  color: #004c80;
  margin-bottom: 10px;
}

/* --- 料金セクション見出し修正 --- */
.price {
  background: #f8fafc; /* 薄いグレー背景 */
  padding: 80px 20px;
  text-align: center;
}

.price h2 {
  color: #004c80 !important; /* 濃い青で視認性アップ */
  font-size: 1.8em;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(255,255,255,0.6); /* 背景から浮かせる */
  font-weight: 700;
}

/* --- 料金ボックス内 --- */
.price-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  padding: 40px 30px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.price-box h3 {
  color: #333;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* --- 金額強調 --- */
.price-num {
  font-size: 2em;
  color: #ff9800;
  font-weight: bold;
  margin-bottom: 20px;
}

/* --- リストの・削除と整列 --- */
.price-box ul {
  list-style: none; /* ・を削除 */
  padding: 0;
  margin: 0 0 30px;
  text-align: left;
  display: inline-block; /* 中央寄せ */
}

.price-box li {
  padding-left: 28px; /* アイコン位置を確保 */
  margin-bottom: 10px;
  line-height: 1.8;
  position: relative;
}

/* ? チェックマークを擬似要素で追加 */
.price-box li::before {
  content: "";
  color: #0073aa; /* WordPressブルー */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1em;
}

/* --- CTAボタン --- */
.price-box .btn-main {
  background: #ff9800;
  color: #fff;
  padding: 14px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
  display: inline-block;
}
.price-box .btn-main:hover {
  background: #e68900;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .price {
    padding: 60px 15px;
  }
  .price-box {
    width: 90%;
  }
}


/** --- 流れ（Flow） --- **/
.flow-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}
.step {
  background: #fff;
  border-radius: 10px;
  width: 220px;
  padding: 25px 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.step .num {
  background: #0073aa;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

/** --- お客様の声 --- **/
.voice {
  background: #f8fafc; /* 背景グレー */
  padding: 80px 20px;
  text-align: center;
}

.voice h2 {
  color: #004c80; /* 見出しを濃い青に */
  font-size: 1.8em;
  margin-bottom: 40px;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6); /* 背景と区別をつける */
}

.voice-list {
  display: flex !important; /* 横並びを強制 */
  flex-wrap: wrap; /* 折り返しOK */
  justify-content: center; /* 中央寄せ */
  gap: 30px; /* 間隔 */
}

.voice-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  padding: 30px 20px;
  width: 300px; /* 横幅を固定して2列に */
  text-align: left;
  transition: 0.3s;
}
.voice-item:hover {
  transform: translateY(-5px);
}

.voice-item .comment {
  font-style: italic;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.8;
}
.voice-item .name {
  color: #0073aa;
  font-weight: bold;
}

/* --- スマホ時は縦並びに戻す --- */
@media (max-width: 768px) {
  .voice-list {
    flex-direction: column;
    align-items: center;
  }
  .voice-item {
    width: 90%;
  }
}


.advice ul {
  list-style-position: inside;
  padding-left: 0;
  text-align: left;
  max-width: 700px;
  margin: 0 auto 1.5em;
}

.advice li {
  margin-bottom: 8px;
  line-height: 1.8;
}


/* --- ビフォーアフター比較表（見やすく修正） --- */
.before-after {
  background: #f8fafc; /* ページ背景と差が出る薄いグレー */
  padding: 80px 20px;
  text-align: center;
}

.before-after h2 {
  color: #004c80; /* 濃い青で視認性アップ */
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(255,255,255,0.6); /* 白っぽい光で浮かせる */
  border-bottom: 2px solid #0073aa; /* 下線を青で強調 */
  display: inline-block;
  padding-bottom: 6px;
}

/* --- 比較テーブル全体 --- */
.compare-table {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* 柔らかい影 */
  background: #ffffff; /* テーブル背景は白 */
  border-radius: 8px;
  overflow: hidden; /* 角丸が見えるように */
}

/* --- 見出し行 --- */
.compare-table th {
  background: #0073aa; /* WordPressブルー */
  color: #fff; /* 白文字 */
  font-weight: bold;
  padding: 16px 12px;
  font-size: 1.05em;
}

/* --- データ行 --- */
.compare-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  background: #fafbfc; /* 薄グレー交互感 */
}

/* 偶数行を少し暗くして区切りを出す */
.compare-table tr:nth-child(even) td {
  background: #f2f6f9;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .compare-table {
    font-size: 0.9em;
  }
  .before-after h2 {
    font-size: 1.5em;
  }
}



/* --- FAQセクション見出しの視認性改善 --- */
.faq {
  background: #f8fafc; /* 薄いグレー背景 */
  padding: 80px 20px;
  text-align: center;
}

.faq h2 {
  color: #004c80; /* 濃い青 */
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
  text-shadow: 0 2px 4px rgba(255,255,255,0.6); /* 白影で浮かせる */
  border-bottom: 2px solid #0073aa; /* 下線を強調して見出し感アップ */
  padding-bottom: 6px;
}

/* --- FAQ項目 --- */
.faq-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  padding: 25px 20px;
  margin-bottom: 20px;
  text-align: left;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item h3 {
  color: #004c80;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
  border-left: 4px solid #0073aa; /* 左ラインで質問を強調 */
  padding-left: 10px;
}

.faq-item p {
  color: #333;
  line-height: 1.8;
  margin-left: 1.5em;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .faq h2 {
    font-size: 1.5em;
  }
  .faq-item {
    padding: 20px 15px;
  }
}



/** --- フォーム --- **/
.contact-form {
  background: #f9fafc;
  border-radius: 10px;
  padding: 40px 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  max-width: 640px;
  margin: 0 auto;
}
.contact-form label {
  display: block;
  margin-bottom: 8px;
  color: #004c80;
  font-weight: bold;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 1em;
  transition: 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #0073aa;
  outline: none;
  box-shadow: 0 0 4px rgba(0,115,170,0.3);
}
.contact-form button {
  display: inline-block;
  width: 100%;
  background: #ff9800;
  color: #fff;
  padding: 15px;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.contact-form button:hover {
  background: #e68900;
  transform: translateY(-2px);
}

/** --- 最終訴求（CTA） --- **/
.cta-section {
  background: linear-gradient(135deg, #0073aa, #004c80);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}
.cta-section h2 {
  font-size: 1.8em;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /** 読みやすさ強化 **/
}
.cta-section p {
  font-size: 1.1em;
  margin-bottom: 40px;
  line-height: 1.9;
}
.cta-section .btn-main {
  background: #ff9800;
  color: #fff;
  padding: 14px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}
.cta-section .btn-main:hover {
  background: #e68900;
}

/** --- スマホ対応 --- **/
@media (max-width: 768px) {
  section {
    padding: 60px 15px;
  }
  .feature-grid,
  .flow-steps {
    flex-direction: column;
    align-items: center;
  }
  .feature-item,
  .step {
    width: 90%;
  }
  .hero {
    padding: 80px 15px;
  }
  .hero h1 {
    font-size: 1.8em;
  }
  .cta-section {
    padding: 80px 15px;
  }
}



.office-concept {
background: #f8fafc; /* 薄いグレー背景 /
padding: 80px 20px; / 上下左右余白 /
text-align: center; / 中央寄せ /
border-radius: 10px; / 柔らかい印象 /
box-shadow: 0 4px 12px rgba(0,0,0,0.05); / やわらかい影 **/
}

/* --- 見出し（h2） --- /
.office-concept h2 {
color: #004c80; /* 行政書士カラー青 /
font-size: 1.9em; / 大きめ文字 /
font-weight: 700; / 太字 /
border-bottom: 2px solid #0073aa; / 下線で強調 /
display: inline-block; / 下線の幅を文字に合わせる /
padding-bottom: 6px; / 下線との距離 /
margin-bottom: 40px; / 下余白 **/
}

/* --- 小見出し（h3） --- /
.office-concept h3 {
color: #004c80; /* 青見出し /
font-size: 1.3em; / 少し大きく /
font-weight: 600; / やや太字 /
margin-top: 40px; / 上余白 /
margin-bottom: 15px; / 下余白 /
border-left: 4px solid #0073aa; / 左線でアクセント /
padding-left: 10px; / 左余白 /
text-align: left; / 左寄せ（リストに自然） /
max-width: 700px; / 幅制限で読みやすく /
margin-left: auto; / 中央寄せ用 /
margin-right: auto; / 中央寄せ用 **/
}

.office-concept { /** セクション全体 **/
  background: #f8fafc; /** 薄いグレー背景 **/
  padding: 80px 20px; /** 上下左右の余白 **/
  text-align: center; /** 中央寄せ **/
  border-radius: 10px; /** 柔らかい印象 **/
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /** やわらかい影 **/
}

.office-concept h2 { /** メイン見出し **/
  color: #004c80; /** 行政書士カラーの青 **/
  font-size: 1.9em; /** 大きめ文字 **/
  font-weight: 700; /** 太字 **/
  border-bottom: 2px solid #0073aa; /** 下線で強調 **/
  display: inline-block; /** 下線の幅を文字に合わせる **/
  padding-bottom: 6px; /** 下線との距離 **/
  margin-bottom: 40px; /** 下余白 **/
}

.office-concept h3 { /** 小見出し **/
  color: #004c80; /** 青見出し **/
  font-size: 1.3em; /** 少し大きめ **/
  font-weight: 600; /** やや太字 **/
  margin-top: 40px; /** 上余白 **/
  margin-bottom: 15px; /** 下余白 **/
  border-left: 4px solid #0073aa; /** 左線でアクセント **/
  padding-left: 10px; /** 左余白 **/
  text-align: left; /** 左寄せ（自然な流れ） **/
  max-width: 700px; /** 幅制限で読みやすく **/
  margin-left: auto; /** 中央寄せ用 **/
  margin-right: auto; /** 中央寄せ用 **/
}

.office-concept p { /** 段落テキスト **/
  font-size: 1em; /** 標準サイズ **/
  line-height: 1.9; /** 行間広め **/
  color: #333; /** 読みやすい文字色 **/
  max-width: 700px; /** 横幅制限 **/
  margin: 0 auto 25px; /** 中央寄せ＋下余白 **/
}

.office-concept ul { /** 箇条書きリスト **/
  list-style-type: disc !important; /** 通常の丸「・」 **/
  list-style-position: inside !important; /** マーカーを内側に配置 **/
  margin: 0 auto 25px !important; /** 中央寄せ＋下余白 **/
  padding: 0 !important; /** 左余白リセット **/
  max-width: 680px; /** 幅制限 **/
  text-align: left; /** 左寄せ **/
}

.office-concept li { /** リスト項目 **/
  margin: 0 !important; /** デフォルト余白削除 **/
  padding: 3px 0 !important; /** 上下余白だけ残す **/
  text-indent: 0 !important; /** テキストのズレ防止 **/
  line-height: 1.8 !important; /** 読みやすい行間 **/
  color: #333; /** 文字色 **/
}

.office-concept li::before { /** 擬似要素を完全無効化 **/
  content: none !important; /** チェックマーク等の干渉防止 **/
}

@media (max-width: 768px) { /** スマホ対応（リスト） **/
  .office-concept ul {
    padding-left: 0 !important; /** 左余白を削除 **/
    margin-left: 0 !important; /** 左マージン削除 **/
  }
}

.office-concept .btn-main { /** CTAボタン **/
  display: inline-block; /** インラインブロック化 **/
  background: #ff9800; /** オレンジボタン **/
  color: #fff; /** 白文字 **/
  padding: 14px 36px; /** 内側余白 **/
  border-radius: 30px; /** 丸みを付ける **/
  font-weight: bold; /** 太字 **/
  text-decoration: none; /** 下線なし **/
  transition: 0.3s; /** ホバーアニメーション **/
  margin-top: 30px; /** 上余白 **/
}

.office-concept .btn-main:hover { /** ボタンホバー時 **/
  background: #e68900; /** 濃いオレンジに変化 **/
  transform: translateY(-2px); /** 浮かせる演出 **/
}

@media (max-width: 768px) { /** スマホ全体調整 **/
  .office-concept {
    padding: 60px 15px; /** コンパクト化 **/
  }
  .office-concept h2 {
    font-size: 1.6em; /** 見出し縮小 **/
  }
  .office-concept h3 {
    font-size: 1.15em; /** 小見出し調整 **/
  }
  .office-concept p {
    font-size: 0.95em; /** 段落文字サイズ調整 **/
  }
}


/* --- 見出しアイコン位置修正 --- */
section h2 i {
  display: block; /* ブロック表示で縦方向に整列 */
  font-size: 1.6em; /* アイコンを少し大きく */
  color: #0073aa; /* WordPressブルー */
  margin-bottom: 10px; /* アイコンと文字の間隔 */
  text-align: center; /* 中央寄せ */
}

/* --- 見出しテキストを少し上に調整 --- */
section h2 {
  line-height: 1.4;
  margin-bottom: 35px;
  font-weight: 700;
  color: #004c80;
}

/* --- 見出しアイコン付きタイトル（特定セクション） --- */
.about h2 i,
.features h2 i,
.voice h2 i,
.flow h2 i,
.price h2 i,
.faq h2 i {
  color: #0073aa; /* 統一色 */
}