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





/* -----------------------------
 * Lightning用 記事本文文字サイズ調整
 * ----------------------------- */

/* 記事本文全体の文字サイズと行間 */
.entry-body,
.entry-content {
    font-size: 1.2em;       /* 標準サイズを基準に調整 */
    line-height: 1.8em;   /* 行間も相対値で調整 */
}

/* 見出し h2 のサイズと下マージン */
.entry-content h2 {
    font-size: 1.375em;   /* 約22px相当 */
    margin-bottom: 1em;   /* 下に余白を設定 */
}

/* 見出し h3 のサイズと下マージン */
.entry-content h3 {
    font-size: 1.125em;   /* 約18px相当 */
    margin-bottom: 0.8em; /* 下に余白を設定 */
}

/* 見出し h4 のサイズと下マージン */
.entry-content h4 {
    font-size: 1em;       /* 約16px相当 */
    margin-bottom: 0.6em; /* 下に余白を設定 */
}

/* -----------------------------
 * スマホ向け文字サイズ・行間調整
 * ----------------------------- */

@media screen and (max-width: 768px) {
    .entry-body,
    .entry-content {
        font-size: 0.875em;   /* 約14px相当 */
        line-height: 1.6em;   /* 行間を少し詰める */
    }
    .entry-content h2 {
        font-size: 1.25em;    /* 約20px相当 */
    }
    .entry-content h3 {
        font-size: 1em;       /* 約16px相当 */
    }
    .entry-content h4 {
        font-size: 0.875em;   /* 約14px相当 */
    }
}

  

/* --- ヒーローセクション --- */
.hero-section { /** ヒーローセクション全体のラッパー **/
  position: relative; /** 擬似要素（オーバーレイ）を重ねるため相対配置 **/
  background-image: url('https://sample1.wordpress-tips.net/wp-content/uploads/2025/11/33644014_m.jpg'); /** 背景画像を指定 **/
  background-size: cover; /** 要素のサイズに合わせて拡大・縮小 **/
  background-position: center; /** 背景を中央寄せ **/
  background-attachment: fixed; /** 背景を固定してパララックス風に **/
  height: 500px; /** セクション全体の高さ **/
  display: flex; /** 子要素を中央に配置するためFlexboxを使用 **/
  flex-direction: column; /** 縦方向に並べる **/
  justify-content: center; /** 縦方向の中央揃え **/
  align-items: center; /** 横方向の中央揃え **/
  text-align: center; /** テキストを中央寄せ **/
  color: #fff; /** テキストの色を白にして背景とのコントラストを確保 **/
  overflow: hidden; /** コンテンツのはみ出しを防ぐ **/
  margin: 0; /** 上下余白を消す **/
  padding: 120px 20px; /** 上下の余白（レスポンシブ対応） **/
}

.hero-section::before { /** 背景画像の上に半透明の黒レイヤーを重ねる **/
  content: ""; /** 疑似要素を生成 **/
  position: absolute; /** 親要素内で絶対配置 **/
  inset: 0; /** 全面をカバー（top, right, bottom, left = 0） **/
  background: rgba(0, 0, 0, 0.35); /** 黒の半透明（暗さ35%） **/
  z-index: 1; /** 背景より前・テキストより後ろに配置 **/
}

.hero-section * { /** 内部のすべての要素に適用 **/
  position: relative; /** 背景レイヤーより前に表示するため相対配置 **/
  z-index: 2; /** 前面に表示 **/
}

.hero-inner h1 { /** メインタイトル（事務所名） **/
  font-size: 2.4em; /** 大きめの文字サイズ **/
  margin-bottom: 10px; /** 下に余白を設定 **/
  font-weight: bold; /** 太字で強調 **/
}

.hero-inner p { /** サブテキスト（説明文） **/
  font-size: 1.2em; /** 少し大きめで読みやすく **/
  margin-bottom: 25px; /** ボタンとの間に余白 **/
}

.btn-main { /** メインボタンのデザイン **/
  background: #fff; /** ボタン背景を白に **/
  color: #004c80; /** テキストを濃い青に **/
  padding: 12px 30px; /** 余白でボタンらしくする **/
  border-radius: 30px; /** 角を丸く **/
  font-weight: bold; /** 太字で視認性アップ **/
  text-decoration: none; /** 下線を消す **/
  transition: 0.3s; /** ホバー時のアニメーションを滑らかに **/
}

.btn-main:hover { /** ホバー時のスタイル **/
  background: #004c80; /** 背景を青に変化 **/
  color: #fff; /** 文字色を白に変化 **/
}





/* --- 事務所紹介 --- */
.about-office {
  text-align: center;
  padding: 80px 20px;
  background: #e6f0ff;
}

.about-office p {
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.8;
}

.btn-sub {
  background: #0073aa;
  color: #fff;
  margin-top:50px;
  padding: 10px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
}

.btn-sub:hover {
  background: #004c80;
}

/* --- 選ばれる理由 --- */
.reason-section {
  padding: 80px 20px;
  text-align: center;
}

.reason-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
}

.reason-item {
  width: 280px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 30px 20px;
}

.reason-item i {
  font-size: 36px;
  color: #0073aa;
  margin-bottom: 10px;
}

.reason-item h3 {
  color: #004c80;
  font-size: 1.2em;
  margin-bottom: 8px;
}

/* --- サービス一覧 --- */
.service-preview {
  background: #f8fafc;
  text-align: center;
  padding: 80px 20px;
}

.service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
}

.service-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  width: 280px;
  padding: 30px 20px;
  transition: 0.3s;
}

.service-item:hover {
  transform: translateY(-5px);
}

.service-item i {
  font-size: 36px;
  color: #0073aa;
  margin-bottom: 10px;
}

/* --- CTA --- */
.cta-box {
  background: linear-gradient(135deg, #0073aa, #004c80);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  border-radius: 10px;
}

.cta-box a.btn-main {
  background: #fff;
  color: #004c80;
  border-radius: 30px;
  font-weight: bold;
  padding: 12px 28px;
  text-decoration: none;
}

.cta-box a.btn-main:hover {
  background: #004c80;
  color: #fff;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .reason-grid,
  .service-grid {
    flex-direction: column;
    align-items: center;
  }

  .hero-section {
    padding: 80px 20px;
  }
}


/* --- 業務内容全体 --- */
.service-page {
  max-width: 900px; /** 横幅制限 **/
  margin: 0 auto; /** 中央寄せ **/
  padding: 80px 20px; /** 余白 **/
}

/* --- メインタイトル --- */
.service-page h1 {
  font-size: 2em;
  color: #004c80;
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #0073aa;
  display: inline-block;
  padding-bottom: 5px;
}

/* --- リード文 --- */
.service-page .lead {
  text-align: center;
  font-size: 1.1em;
  color: #333;
  margin-bottom: 50px;
}

/* --- 各業務カテゴリー --- */
.service-category {
  margin-bottom: 50px;
  background: #f8fafc;
  border-left: 5px solid #0073aa;
  padding: 25px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* --- サブ見出し --- */
.service-category h2 {
  font-size: 1.4em;
  color: #004c80;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- アイコン --- */
.service-category i {
  font-size: 20px;
  color: #0073aa;
}

/* --- 箇条書き --- */
.service-category ul {
  margin-left: 25px;
  color: #333;
  line-height: 1.8;
}

/* --- CTA（お問い合わせ誘導） --- */
.cta-box {
  background: linear-gradient(135deg, #0073aa, #004c80);
  color: #fff;
  text-align: center;
  padding: 50px 20px;
  border-radius: 10px;
}

.cta-box p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.cta-box .btn-main {
  background: #fff;
  color: #004c80;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.3s;
}

.cta-box .btn-main:hover {
  background: #004c80;
  color: #fff;
}

/* --- お知らせ --- */
.news-section {
  background: #fff; /** 背景白 **/
  text-align: center;
  padding: 80px 20px;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 30px auto;
  max-width: 600px;
  text-align: left;
}

.news-list li {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  font-size: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-list .date {
  color: #0073aa;
  font-weight: bold;
  width: 110px;
}

.news-list a {
  color: #333;
  text-decoration: none;
  flex: 1;
}

.news-list a:hover {
  color: #0073aa;
}

/* --- 代表プロフィール --- */
.profile-section {
  background: #f9fafc;
  text-align: center;
  padding: 80px 20px;
}

.profile-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

.profile-inner img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.profile-text {
  max-width: 500px;
  text-align: left;
  line-height: 1.8;
  color: #333;
}

/* --- 他セクション共通 --- */
.btn-sub {
  background: #0073aa;
  color: #fff;
  padding: 10px 24px;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
}

.btn-sub:hover {
  background: #004c80;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .profile-inner {
    flex-direction: column;
    text-align: center;
  }

  .profile-text {
    text-align: center;
  }
}

/* --- 全体（料金表ページ） --- */
.price-page {
  max-width: 900px; /** 横幅制限 **/
  margin: 0 auto; /** 中央寄せ **/
  padding: 80px 20px; /** 上下余白 **/
}

/* --- 見出し --- */
.price-page h1 {
  font-size: 2em;
  text-align: center;
  color: #004c80;
  margin-bottom: 30px;
  border-bottom: 2px solid #0073aa;
  display: inline-block;
  padding-bottom: 5px;
}

/* --- リード文 --- */
.price-page .lead {
  text-align: center;
  font-size: 1.1em;
  color: #333;
  margin-bottom: 40px;
}

/* --- テーブル --- */
.price-table-wrap {
  overflow-x: auto; /** 横スクロール対応 **/
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border-radius: 8px;
  overflow: hidden;
}

.price-table th {
  background: #0073aa;
  color: #fff;
  font-weight: bold;
  padding: 15px;
  text-align: left;
}

.price-table td {
  border-bottom: 1px solid #e0e0e0;
  padding: 15px;
  color: #333;
}

.price-table tr:nth-child(even) td {
  background: #f8fafc;
}

/* --- 注意書き --- */
.note {
  margin-top: 25px;
  font-size: 0.9em;
  color: #555;
  line-height: 1.8;
}

/* --- CTAボックス --- */
.cta-box {
  background: linear-gradient(135deg, #0073aa, #004c80);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
  border-radius: 10px;
  margin-top: 60px;
}

.cta-box p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.cta-box .btn-main {
  background: #fff;
  color: #004c80;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.3s;
}

.cta-box .btn-main:hover {
  background: #004c80;
  color: #fff;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .price-page h1 {
    font-size: 1.6em;
  }

  .price-table th,
  .price-table td {
    padding: 12px;
  }
}

/* --- 全体（お問い合わせページ） --- */
.contact-page {
  max-width: 800px; /** 横幅制限 **/
  margin: 0 auto; /** 中央寄せ **/
  padding: 80px 20px; /** 上下余白 **/
}

/* --- タイトル --- */
.contact-page h1 {
  font-size: 2em;
  text-align: center;
  color: #004c80;
  margin-bottom: 30px;
  border-bottom: 2px solid #0073aa;
  display: inline-block;
  padding-bottom: 5px;
}

/* --- リード文 --- */
.contact-page .lead {
  text-align: center;
  font-size: 1.1em;
  color: #333;
  margin-bottom: 40px;
}

/* --- 連絡先情報 --- */
.contact-info {
  background: #f8fafc;
  border-left: 4px solid #0073aa;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 50px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.contact-info p {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-info i {
  color: #0073aa;
}

/* --- フォームエリア --- */
.contact-form-area {
  background: #fff;
  border-radius: 8px;
  padding: 40px 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.contact-form-area h2 {
  text-align: center;
  color: #004c80;
  font-size: 1.5em;
  margin-bottom: 20px;
}

/* --- Contact Form 7 デザイン --- */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
  margin-bottom: 20px;
  background: #f9f9f9;
  transition: border 0.3s;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-color: #0073aa;
  background: #fff;
}

.contact-form input[type="submit"] {
  display: inline-block;
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form input[type="submit"]:hover {
  background: #004c80;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .contact-page h1 {
    font-size: 1.6em;
  }

  .contact-form-area {
    padding: 30px 20px;
  }
}








/*---------------------------------*/
/** ul li stylish-list
/*---------------------------------*/

.stylish-list {
list-style: none; /** 通常の点マークを削除 **/
padding: 0; 
margin: 30px auto;
max-width: 600px;
text-align: left;
}

.stylish-list li {
position: relative;
background: #fff;
border-radius: 8px;
padding: 14px 20px 14px 50px;
margin-bottom: 15px;
color: #333; 
font-size: 1.05em;
border-left: 5px solid #0073aa;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: 0.3s ease;
}

.stylish-list li::before {
content: "\2713";
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1em;
color: #0073aa;
font-weight: bold;
transition: 0.3s ease;
}



@media (max-width: 768px) {
.stylish-list li {
font-size: 1em;
padding: 12px 15px 12px 45px;
}
.stylish-list li::before {
left: 14px;
}
}




/*---------------------------------*/
/** お悩みセクション **/
/*---------------------------------*/

.pharmacy-problems { /** 全体ラッパー **/
  background: linear-gradient(180deg, #e6f3ff 0%, #ffffff 100%); /** 淡い水色から白へ **/
  padding: 60px 20px; /** セクション内余白 **/
  border-radius: 12px; /** 角丸 **/
  box-shadow: 0 4px 16px rgba(0,0,0,0.05); /** ふんわり影 **/
  max-width: 800px; /** コンテンツ幅 **/
  margin: 60px auto; /** 中央寄せ **/
}

.pharmacy-problems h2 { /** 見出し **/
  text-align: center; /** 中央寄せ **/
  color: #d65a8e; /** 優しい桃色 **/
  font-size: 1.8em; /** フォントサイズ **/
  margin-bottom: 20px; /** 下余白 **/
}

.pharmacy-problems .lead { /** リード文 **/
  text-align: center; /** 中央寄せ **/
  font-size: 1.1em; /** やや大きめ **/
  color: #444; /** 読みやすい灰色 **/
  margin-bottom: 30px; /** 下余白 **/
}

.problem-list { /** リスト全体 **/
  list-style: none; /** マーカー非表示 **/
  padding: 0; /** 内側余白リセット **/
  margin: 0 auto 40px; /** 下余白と中央揃え **/
  max-width: 700px; /** 横幅制限 **/
}

.problem-list li { /** 各項目 **/
  background: #fff; /** 白背景 **/
  border-left: 6px solid #d65a8e; /** 左ライン（桃色） **/
  padding: 15px 20px; /** 内側余白 **/
  margin-bottom: 16px; /** 下余白 **/
  border-radius: 8px; /** 角丸 **/
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /** 柔らかい影 **/
  line-height: 1.7; /** 行間 **/
  font-size: 1em; /** 標準文字サイズ **/
  transition: transform 0.2s ease, box-shadow 0.2s ease; /** ホバー時の動き **/
  text-align: left; /** ←★ 左寄せで自然に整列 **/
}


.problem-list li:hover { /** ホバー時 **/
  transform: translateY(-2px); /** 少し浮かせる **/
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /** 影を強調 **/
}

.problem-list strong { /** 番号 **/
  color: #d65a8e; /** 番号を桃色に **/
  margin-right: 6px; /** 番号右の余白 **/
}





/* ------------------------------------------------
 * Yes / No形式のチェックページ
 * ---------------------------------------------- */

/* --- 質問ボックス --- */
.question-box { /* 質問全体を囲むボックス */
  max-width: 520px; /* 最大幅520pxに制限 */
  margin: 0 auto; /* ページ中央に配置 */
  border: 1px solid #e0c7a8; /* 枠線を淡いベージュに設定 */
  border-radius: 12px; /* 角を丸くして柔らかい印象に */
  padding: 35px; /* 内側の余白を広めに確保 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* ほんのり影をつけて立体感 */
  background: #fff; /* 背景を白に */
}

/* --- 質問文 --- */
.question-text { /* 質問文のテキスト部分 */
  font-size: 18px; /* 文字サイズを少し大きく */
  margin-bottom: 30px; /* 下に余白をつけて間隔を確保 */
  line-height: 1.6; /* 行間を少し広めにして読みやすく */
}

/* --- ボタン共通 --- */
.btn { /* Yes/Noボタン共通デザイン */
  display: inline-block; /* 横に並べて配置 */
  width: 140px; /* 幅を固定して統一感を出す */
  padding: 14px 0; /* ボタン高さを確保 */
  margin: 12px; /* ボタン間の余白 */
  font-size: 16px; /* 文字サイズを調整 */
  font-weight: bold; /* 太字で強調 */
  border: none; /* 枠線を消す */
  border-radius: 6px; /* 角を少し丸めて柔らかく */
  cursor: pointer; /* ホバー時にカーソルをポインターに */
  transition: 0.3s; /* ホバー時のアニメーションを滑らかに */
}

/* --- Yesボタン（グリーン） --- */
.btn-yes { /* Yesボタン用スタイル */
  background: #3cb371; /* ミントグリーンの背景色 */
  color: #fff; /* 白文字 */
}

.btn-yes:hover { /* ホバー時のYesボタン */
  background: #2e8b57; /* 濃い緑に変化 */
}

/* --- Noボタン（グレー） --- */
.btn-no { /* Noボタン用スタイル */
  background: #ccc; /* グレー背景 */
  color: #333; /* 文字色を濃いグレーに */
}

.btn-no:hover { /* ホバー時のNoボタン */
  background: #bbb; /* 少し濃いグレーに変化 */
}

/* --- 結果メッセージ --- */
.result { /* 判定結果テキスト */
  font-size: 20px; /* 大きめフォントで強調 */
  margin-top: 40px; /* 上に広めの余白 */
  font-weight: bold; /* 太字にして目立たせる */
  color: #3cb371; /* グリーン文字でポジティブに演出 */
}

.btn-shop {
  display: inline-block; /** 横並びに対応 **/
  background: #ff9800; /** オレンジ背景 **/
  color: #fff !important; /** 白文字 **/
  padding: 14px 50px; /** ← 横幅を広げる（30px→50pxに変更） **/
  margin-top: 25px; /** 上余白 **/
  border-radius: 10px; /** 自然な角丸 **/
  text-decoration: none; /** 下線を消す **/
  font-weight: bold; /** 太字で強調 **/
  transition: 0.3s; /** ホバー時アニメーション **/
  box-shadow: 0 3px 8px rgba(0,0,0,0.15); /** 柔らかい影 **/
  text-align: center; /** テキスト中央揃え **/
  min-width: 220px; /** ← 最低横幅を指定して安定化 **/
}

.btn-shop:a hover {
  color: #fff !important; /** 白文字 **/
}

.btn-shop:hover {
  background: #e68900; /** 濃いオレンジ **/
  transform: translateY(-2px); /** 浮かせる演出 **/
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /** 強調影 **/
  color: #fff !important; /** 白文字 **/
}

.question-box a {
  color: #0073aa;
  font-weight: bold;
  text-decoration: underline;
}
.question-box a:hover {
  color: #fff;
}



/*----------------------------------------
  相談カード（白背景・3列固定 → スマホ1列）
----------------------------------------*/

/* 下部メニュー全体のスタイル（白背景・3列固定 → スマホ1列） */
.image-menu { /* メニュー全体を包むコンテナ */
  position: relative; /* 上下位置調整用 */
  top: 0; /* 背景との重なり具合を微調整 */
  z-index: 2; /* 背景より前面に表示 */
  max-width: 1080px; /* 横幅の最大値を1080pxに制限 */
  margin: 0 auto; /* 中央寄せ配置 */
  padding: 40px 20px 60px; /* 内側の余白を設定 */
  display: flex; /* 横並びレイアウトを使用 */
  flex-wrap: wrap; /* 幅が足りない時に折り返しを許可 */
  justify-content: center; /* 要素を中央に配置 */
  gap: 20px; /* 各カード間の隙間を20pxに設定 */
  background: #fff; /* 背景を白に設定 */
  border-radius: 20px; /* コンテナの角を丸くする */
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08); /* 柔らかい影を付けて浮かせる */
}

/* 各メニューカード */
.menu-card { /* 各カードの外枠設定 */
  background: #fff; /* 背景を白に設定 */
  border-radius: 10px; /* 角を10px丸める */
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* 薄い影で浮かせる */
  overflow: hidden; /* 枠外の要素を非表示にする */
  width: calc(33.333% - 20px); /* 常に3列配置（隙間分を引く） */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション設定 */
}

.menu-card:hover { /* カードにマウスを乗せた時の効果 */
  transform: translateY(-5px); /* 少し上に持ち上げる */
  box-shadow: 0 10px 24px rgba(0,0,0,0.18); /* 影を強めて浮き上がりを表現 */
}

.menu-card img { /* カード内の画像設定 */
  display: block; /* 画像下の自動余白（ベースラインの隙間）を消すため */
  width: 100%; /* 画像をカード幅いっぱいに表示 */
  height: 200px; /* 高さを固定して整える */
  object-fit: cover; /* 画像の比率を保ちつつ切り抜く */
}

.menu-card p { /* カード下部のテキスト部分 */
  background: #6cf; /* 背景色 */
  color: #fff; /* テキストを白に設定 */
  text-align: center; /* 中央揃え */
  padding: 12px; /* 上下左右に余白を追加 */
  margin: 0; /* 外側の余白をリセット */
  font-weight: bold; /* 太字にする */
  font-size: 1em; /* 標準的な文字サイズ */
}

/* 3列維持しつつ画像サイズを微調整（1054px以下） */
@media (max-width: 1054px) {
  .menu-card { /* 横幅をやや縮めてレイアウトを調整 */
    width: calc(33.333% - 15px); /* 余白を少し減らして3列を維持 */
  }
}

/* スマホ（768px以下）で重なりを解除し、1列レイアウトに切り替え */
@media (max-width: 768px) {
  .image-menu { /* コンテナ全体の設定変更 */
    flex-direction: column; /* 縦並びに変更 */
    align-items: center; /* カードを中央寄せ */
    top: 0; /* スマホでは重なり解除 */
    padding: 30px 10px 40px; /* 内側余白を減らしてスッキリさせる */
  }
  .menu-card { /* 各カードのサイズ調整 */
    width: 90%; /* 幅を広げて1列配置 */
    max-width: 360px; /* 画像の伸びを防止する上限幅 */
  }
  .menu-card img { /* 画像サイズを柔軟に調整 */
    height: auto; /* 高さを自動に変更して自然比率で表示 */
    aspect-ratio: 16 / 9; /* 縦横比を一定に保つ（16:9） */
    object-fit: cover; /* トリミングで自然な見た目に調整 */
  }
}



/*----------------------------------------
  不安コーナー
----------------------------------------*/

.about-fuan {
  background: linear-gradient(135deg, #f9fcff, #eef7ff); /** 柔らかい青系グラデーション背景 **/
  border-radius: 12px; /** 角を丸くして優しい印象に **/
  padding: 60px 30px; /** 内側の余白を広めに確保 **/
  text-align: center; /** テキストを中央寄せに **/
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); /** やわらかい影を追加 **/
  max-width: 800px; /** 横幅の最大値を制限 **/
  margin: 60px auto; /** セクションを中央に配置 **/
}

.about-fuan h2 {
  color: #004c80; /** 信頼感のある濃い青色 **/
  font-size: 1.8em; /** 少し大きめの見出し **/
  margin-bottom: 25px; /** 下に余白を確保 **/
  font-weight: 700; /** 太字で強調 **/
  line-height: 1.5; /** 行間をやや広めに設定 **/
}

.consult-lead {
  font-size: 1.1em; /** 本文よりやや大きめの文字 **/
  color: #333; /** 読みやすいダークグレー **/
  line-height: 1.8; /** 行間を広めに **/
  margin-bottom: 40px; /** 下に余白を追加 **/
}

.consult-points {
  list-style: none; /** デフォルトのリストマークを削除 **/
  padding: 0; /** 左の余白をリセット **/
  margin-bottom: 40px; /** 下に余白を確保 **/
  text-align: left; /** リストは左揃えで自然に **/
  display: inline-block; /** 中央寄せと整列の両立 **/
}

.consult-points li {
  position: relative; /** スパンを位置調整できるように設定 **/
  background: #fff; /** 白背景でカード風に **/
  border: 1px solid #dde7f0; /** 優しいグレーの境界線 **/
  border-radius: 8px; /** カードの角を丸く **/
  padding: 15px 20px 15px 55px; /** 番号部分のスペースを確保 **/
  margin-bottom: 15px; /** 各項目の間に間隔を追加 **/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); /** ふんわりとした影を追加 **/
  transition: transform 0.3s ease, box-shadow 0.3s ease; /** ホバー時のアニメーション設定 **/
}

.consult-points li:hover {
  transform: translateY(-3px); /** ホバー時に少し浮かせる **/
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /** ホバー時に影を強調 **/
}

.consult-points li span {
  position: absolute; /** 番号を左に配置 **/
  left: 15px; /** 左端の余白 **/
  top: 50%; /** 縦方向の中央に配置 **/
  transform: translateY(-50%); /** 完全に中央揃えに補正 **/
  background: #0078d7; /** 明るい青背景で目立たせる **/
  color: #fff; /** 番号を白に **/
  font-weight: bold; /** 番号を強調 **/
  border-radius: 50%; /** 丸型にする **/
  width: 30px; /** 丸の幅 **/
  height: 30px; /** 丸の高さ **/
  display: flex; /** 中央揃えにするためにflex使用 **/
  align-items: center; /** 縦方向中央揃え **/
  justify-content: center; /** 横方向中央揃え **/
  font-size: 0.9em; /** 少し小さめのフォント **/
}

.consult-btn {
  display: inline-block; /** ボタンをインラインブロックに **/
  background: #0078d7; /** メインカラー：青 **/
  color: #fff; /** 白文字 **/
  text-decoration: none; /** 下線を消す **/
  font-size: 1.1em; /** 少し大きめ文字 **/
  padding: 15px 40px; /** 内側余白を広めに **/
  border-radius: 30px; /** 丸みのあるボタン **/
  font-weight: bold; /** 太字で目立たせる **/
  box-shadow: 0 4px 10px rgba(0, 120, 215, 0.3); /** 青みを帯びた影 **/
  transition: background 0.3s ease, transform 0.3s ease; /** ホバー時のアニメーション **/
}

.consult-btn:hover {
  background: #005fa3; /** 濃い青に変化 **/
  transform: translateY(-2px); /** 少し浮くように演出 **/
}

/** --- レスポンシブ対応（スマホ用） --- **/
@media (max-width: 600px) {
  .about-fuan {
    padding: 40px 20px; /** スマホでは少し狭めに **/
  }
  .consult-points li {
    font-size: 0.95em; /** 文字を少し小さく **/
    padding: 15px 15px 15px 50px; /** 内側余白を調整 **/
  }
  .consult-btn {
    width: 100%; /** スマホでは横幅いっぱい **/
    padding: 15px 0; /** ボタン高さ調整 **/
  }
}




/** ---------------------------------------------- **/
/** 相続対策セクション全体のデザイン **/
/** ---------------------------------------------- **/
.inheritance-section {
  background: #f8fafc; /** 薄いグレー背景 **/
  padding: 60px 20px; /** 上下余白を広めにとる **/
  text-align: center; /** 全体中央寄せ（見出し用） **/
}

/** ---------------------------------------------- **/
/** 各項目のボックスデザイン **/
/** ---------------------------------------------- **/
.inheritance-item {
  background: #ffffff; /** 白背景でカード風 **/
  border: 1px solid #e0e6ef; /** 淡いグレーの枠線 **/
  border-radius: 10px; /** 角丸 **/
  padding: 30px 20px; /** 内側余白 **/
  margin: 20px auto; /** ボックス間の余白 **/
  max-width: 800px; /** 横幅制限で整える **/
  box-shadow: 0 3px 10px rgba(0,0,0,0.05); /** うっすら影で浮かせる **/
  transition: transform 0.3s ease, box-shadow 0.3s ease; /** ホバー時の滑らか変化 **/
  text-align: left; /** ←本文を左寄せに変更 **/
}

/** ---------------------------------------------- **/
/** 見出しのスタイル **/
/** ---------------------------------------------- **/
.inheritance-item h3 {
  color: #004c80; /** 信頼感のある青色 **/
  font-size: 1.4em; /** やや大きめの見出し **/
  margin-bottom: 15px; /** 下に余白 **/
  text-align: center; /** ←見出しだけ中央寄せを維持 **/
  border-bottom: 1px solid #e0e6ef; /** 下線で区切る **/
  padding-bottom: 5px; /** 下線との間に余白 **/
}

/** ---------------------------------------------- **/
/** テキストのスタイル **/
/** ---------------------------------------------- **/
.inheritance-item p {
  color: #333; /** 読みやすい濃いグレー **/
  line-height: 1.8; /** 行間を広げて読みやすく **/
  font-size: 1em; /** 標準サイズ **/
  text-align: left; /** 左寄せ（念のため） **/
}

/** ---------------------------------------------- **/
/** ホバー時の動き **/
/** ---------------------------------------------- **/
.inheritance-item:hover {
  transform: translateY(-5px); /** 少し上に浮く **/
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /** 影を濃くして立体感を出す **/
}

/** ---------------------------------------------- **/
/** レスポンシブ対応（スマホ用） **/
/** ---------------------------------------------- **/
@media (max-width: 768px) {
  .inheritance-item {
    padding: 20px 15px; /** スマホ時の余白を調整 **/
  }
  .inheritance-item h3 {
    font-size: 1.2em; /** 見出しを少し小さく **/
  }
}



/** -------------------------------------------------- **/
/** 無料相談対象セクション全体 **/
/** -------------------------------------------------- **/
.consult-target {
  background: #f8fafc; /** 柔らかいグレー背景 **/
  padding: 60px 20px; /** 上下の余白を確保 **/
  text-align: center; /** 見出しを中央揃え **/
}

/** -------------------------------------------------- **/
/** 見出しデザイン **/
/** -------------------------------------------------- **/
.consult-target h2 {
  color: #004c80; /** 信頼感のあるブルー **/
  font-size: 1.6em; /** やや大きめの文字サイズ **/
  margin-bottom: 30px; /** 下のボックスとの余白 **/
  font-weight: bold; /** 太字で強調 **/
}

/** -------------------------------------------------- **/
/** 内容ボックス **/
/** -------------------------------------------------- **/
.consult-box {
  background: #ffffff; /** 白背景でカード風 **/
  border: 2px solid #c7def1; /** 淡いブルーの枠線 **/
  border-radius: 10px; /** 角丸デザイン **/
  padding: 30px 20px; /** 内側余白 **/
  max-width: 700px; /** 横幅制限で整える **/
  margin: 0 auto; /** 中央寄せ **/
  text-align: left; /** 本文を左寄せ **/
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); /** ふんわり影を追加 **/
  line-height: 1.8; /** 行間をゆったり **/
}

/** -------------------------------------------------- **/
/** リストのデザイン **/
/** -------------------------------------------------- **/
.consult-box ul {
  list-style: none; /** デフォルトの箇条書きを削除 **/
  padding: 0; /** 余白をリセット **/
  margin: 0 0 20px; /** 下に余白を追加 **/
}

.consult-box ul li {
  position: relative; /** 疑似要素配置のために相対位置指定 **/
  padding-left: 28px; /** アイコン分の左余白 **/
  margin-bottom: 12px; /** 各項目の間隔 **/
  color: #004c80; /** テキストカラーを青に **/
  font-weight: 600; /** 少し太字にして読みやすく **/
  font-size: 1.1em; /** わずかに大きめ **/
}

/** -------------------------------------------------- **/
/** 各項目の先頭に装飾アイコンを追加 **/
/** -------------------------------------------------- **/
.consult-box ul li::before {
  content: "\2714"; /** チェックマークを表示 **/
  color: #00a2ff; /** 明るい青のアイコン **/
  position: absolute; /** 左に固定配置 **/
  left: 0; /** 左端に配置 **/
  top: 0; /** 上揃え **/
}

/** -------------------------------------------------- **/
/** 最後の案内文 **/
/** -------------------------------------------------- **/
.consult-box p {
  font-size: 1em; /** 標準サイズ **/
  color: #333; /** 読みやすい濃いグレー **/
  margin-top: 15px; /** 上に少し余白 **/
  text-align: center; /** 中央寄せでバランス良く **/
  font-weight: 500; /** 適度な強調 **/
}

/** -------------------------------------------------- **/
/** スマホ対応（768px以下） **/
/** -------------------------------------------------- **/
@media (max-width: 768px) {
  .consult-box {
    padding: 20px 15px; /** 余白を調整 **/
  }
  .consult-target h2 {
    font-size: 1.3em; /** 見出しを少し小さく **/
  }
}




/* ------------------------- 
 * 会社概要スタイル
---------------------------- */

/* dl全体の余白とパディングをリセット */
.hyou1 dl {
    margin:0 !important;    /* 上下左右の余白を0にする */
    padding:0 !important;   /* 内側の余白を0にする */
}

/* 各行をflexで横並びにする */
.hyou1 dl div {
    display:flex !important;                 /* dtとddを横並びにする */
    border-bottom:1px solid #ccc !important; /* 行ごとに下線を引く */
    background:#fff !important;             /* 背景色を白に設定 */
}

/* dt（項目名）の設定 */
.hyou1 dl dt {
    flex: 0 0 13em !important; /* 横幅を13emに固定、縮めたり伸ばしたりしない */
    font-weight:normal !important; /* 太字にせず標準の文字ウェイト */
}

/* dd（内容）の設定 */
.hyou1 dl dd {
    flex:1 !important; /* dt以外の残り幅を自動で使用 */
}

/* dtとdd共通の設定 */
.hyou1 dl dt,
.hyou1 dl dd {
    padding:12px 20px !important;   /* 上下12px、左右20pxの内側余白 */
    line-height:1.5 !important;     /* 行間を設定して上下のバランスを均等に */
    margin:0 !important;            /* 外側余白をリセット */
    color:#111 !important;          /* 文字色を濃いグレーに設定 */
}

/* -------------------------
 * スマホ・タブレット用（幅767px以下）
---------------------------- */

@media only screen and (max-width: 767px) {

    /* 各行はflexのまま、折り返しで縦並びになる */
    div.hyou1 dl div {
        flex-wrap: wrap; /* 1行に収まらないとき、dtとddを次の行に折り返す */
    }

    /* dtとdd共通の調整 */
    div.hyou1 dl dt,
    div.hyou1 dl dd {
        flex: 1 1 100%;   /* 幅を100%にし、縦に並ぶようにする（スマホで見やすく） */
        box-sizing: border-box; /* paddingやborderを幅の中に含めることで、レイアウト崩れを防ぐ */
    }

    /* dtは少し目立たせる */
    div.hyou1 dl dt {
        font-weight: bold; /* 項目名(dt)を太字にして強調 */
    }

    /* ddの余白調整 */
    div.hyou1 dl dd {
        padding-top: 5px;   /* 項目名(dt)との間に小さな余白を入れる */
        padding-bottom: 12px; /* 各データの下に余白を入れて読みやすくする */
    }
}






/* -----------------------------
	waku 枠　box ボックス
----------------------------- */

.waku1_ccc{
	margin: 20px 0 30px;
	padding: 15px 15px 20px 25px;
	border: solid 1px #ccc;
	overflow: hidden;
}

.waku1_green{
	margin: 0 0 20px;
	padding: 15px 15px 0 5px;
	border: solid 3px #390;
	overflow: hidden;
}

.waku1_orange{
	margin: 0 0 20px;
	padding: 15px 15px 20px 25px;
	border: solid 3px #f90;
	overflow: hidden;
}



.waku2 {
	margin: 50px 0 30px;
	padding:0 0 20px 0;
	background: #dcefff;
	overflow: hidden;
}

.waku2 .box-title {
	padding: 10px 20px 8px 20px;
	background: #5fb3f5;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.waku2 p {
/*	padding: 15px 20px 10px;*/
	padding: 10px 20px;
	margin: 0;
}

.waku2 ul{
	padding: 15px 20px 10px 40px;
	margin:0;
}

.waku6{
	margin:10px 0;
	padding:10px 20px;
	text-align:left !important;
	background:#fff;
	border-radius:  10px;
}

.waku9 {
    margin: -50px 0 30px;
    padding: 0.5em 1em;
    border: solid 3px #47B455;
    border-radius: 8px;
	overflow: hidden;
}

.waku10{						/*otoiawase*/
	margin:0 10px;
	padding:0 5px;
	background-color:#f00;
	font-size:80%;
	color:#fff;
}

.box-title11 {
    margin: 2em 0 0;
	padding:10px;
	font-size:1.05em;
	font-weight:bold;
	color:#fff !important;
	text-align:center;
    background: #390;
}

.waku11 {
    margin: 0 0 3em;
	padding:10px 7px 30px 10px;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.waku11 p {
    margin: 0;
    padding: 15px 20px;
}

.waku12{
	margin:0 20px 0 0;
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #e6f7ff;
}


/* -------------------------
*   汎用
---------------------------- */

img {
	margin:0;
	padding:0;
	border-style:none;
	-webkit-backface-visibility: hidden;
}

.clear {
    clear:both;
}

.floatL{
	float:left;
	margin-right: 15px;
}

.floatL img {
	margin:0;
	padding:0;
}

.floatR{
	float:right;
	margin-left: 15px
}

.floatR img {
	margin:0;
	padding:0;
}

.center{
	text-align:center;
}

.right{
	text-align:right;
}

.left{
	text-align:left;
}

.underline {
    text-decoration:underline;
}

strong {
	font-weight:bold;
}

em {
	font-weight:bold;
}

.font-bold {
	font-weight:bold;
}

.font-normal {
	font-weight:normal;
}

.double_line {
	display: inline-block;
	padding-bottom:1px;
	border-bottom: 5px double #f90;
}

.indent1{
	text-indent: 1em;
}


/* -----------------------------
	google-maps
----------------------------- */

.google-maps {
	position: relative;
	margin:40px 0;
	padding-bottom: 75%; 
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/* YouTube embed
---------------------------- */

.youtube {
	clear:both;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-top: 60px;
	margin-bottom: 20px;
}
.youtube iframe,
.youtube object,
.youtube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* --------------------------------------------- */
/* 会社概要セクション（Gridレイアウト対応版） */
/* --------------------------------------------- */

.company-profile {
  border: 1px solid #ccc;         /** 全体を囲むグレーの線 **/
  border-radius: 6px;             /** 角を丸くして柔らかい印象に **/
  overflow: hidden;               /** 内側の要素がはみ出ないように **/
  background-color: #fff;         /** 背景を白に設定 **/
  max-width: 900px;               /** 横幅を制限（中央揃え向け） **/
  margin: 40px auto;              /** ページ中央に配置 **/
  font-family: "Hiragino Kaku Gothic ProN", sans-serif; /** 読みやすい日本語フォント **/
}

.company-profile dl {
  display: grid;                  /** Gridレイアウトを使用 **/
  grid-template-columns: 13em 1fr; /** 左に項目、右に内容 **/
  border-top: 1px solid #ccc;     /** 最上段に境界線 **/
}

.company-profile dt,
.company-profile dd {
  padding: 14px 20px;             /** 内側の余白を設定 **/
  border-bottom: 1px solid #ddd;  /** 各行の下線 **/
  line-height: 1.6;               /** 行間を広めに **/
  margin: 0;                      /** 外側余白をリセット **/
}

.company-profile dt {
  background-color: #f0f7fc;      /** 優しい青色背景（信頼感） **/
  color: #004c80;                 /** 濃い青文字で項目を強調 **/
  font-weight: bold;              /** 太字にして見出し感を出す **/
  text-align: left;               /** 左寄せに整える **/
  border-right: 1px solid #ccc;   /** 右側に仕切り線 **/
}

.company-profile dd {
  background-color: #fff;         /** 内容部分は白 **/
  color: #333;                    /** 読みやすい濃い文字色 **/
  text-align: left;               /** 内容も左揃え **/
}

/* ------------------------- */
/* スマホ対応（767px以下） */
/* ------------------------- */
@media (max-width: 767px) {
  .company-profile dl {
    grid-template-columns: 1fr;   /** スマホでは縦並びに変更 **/
  }
  .company-profile dt {
    border-right: none;           /** 仕切り線を削除 **/
    border-bottom: none;          /** 下線も消す **/
    background-color: #e8f2f8;    /** 少し明るめの青で見出しを差別化 **/
  }
  .company-profile dd {
    border-top: 1px solid #ddd;   /** dtとの間に境界線を追加 **/
  }
}





/* -----------------------------
 * カテゴリー別サイトマップ
 * ----------------------------- */

/* サイトマップ全体 */
.sitemap {
    margin: 20px 0;       /* 上下に20pxの余白を作る */
    padding: 15px;        /* 内側に15pxの余白を作り、文字や要素が端にくっつかないようにする */
}

/* 親カテゴリー */
.sitemap-parent {
    font-size: 1.4em;                 /* 文字を通常の1.4倍にして強調 */
    margin-top: 20px;                 /* 上に20pxの余白を作り、前の要素と間隔を空ける */
    border-bottom: 2px solid #00aaff; /* 下に2pxの水色線を引き、見出し風にする */
    padding-bottom: 5px;              /* 下線と文字がくっつかないように5pxの余白を入れる */
}

/* 子カテゴリー */
.sitemap-child {
    font-size: 1.1em;          /* 文字を少し大きめにして読みやすくする */
    margin: 15px 0 5px;        /* 上15px・下5pxの余白でリスト間の間隔を調整 */
    color: #333;               /* 黒より柔らかい濃いグレーの文字色にする */
}

/* 記事リスト */
.sitemap-list {
    margin-left: 20px;        /* 左に20pxずらして階層構造を分かりやすくする */
    list-style-type: disc;    /* 項目の先頭に黒丸（●）を表示する */
}

.case-studies {
  background: #f8fbff; /** 薄いブルー背景で清潔感を演出 **/
  padding: 60px 20px; /** 上下に広めの余白を確保 **/
  border-radius: 8px; /** 角を少し丸めて柔らかい印象に **/
}

.case-studies h2 {
  color: #004c80; /** 信頼感のある深い青色 **/
  text-align: center; /** 中央揃え **/
  font-size: 1.8em; /** 見出しをやや大きく **/
  margin-bottom: 40px; /** 下に余白 **/
}

.case-item {
  background: #fff; /** 各事例ボックスを白背景で独立感を出す **/
  border: 1px solid #cfd9e2; /** 柔らかいブルーグレーの境界線 **/
  border-radius: 6px; /** 優しい角丸 **/
  padding: 25px; /** 内側余白 **/
  margin-bottom: 30px; /** 各ボックスの間隔 **/
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /** ほんのり影を付けて立体感 **/
  transition: all 0.3s ease; /** ホバー時にスムーズな変化 **/
}

.case-item:hover {
  transform: translateY(-3px); /** ホバーで少し浮く効果 **/
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /** 影を強めて動きを出す **/
}

.case-item h3 {
  color: #005b99; /** 青系の見出しで誠実な印象 **/
  border-left: 5px solid #007acc; /** 左に青いラインでアクセント **/
  padding-left: 10px; /** テキストとラインの間隔 **/
  font-size: 1.2em; /** 小見出しサイズ **/
  margin-bottom: 15px; /** 下余白 **/
}

.case-item p {
  line-height: 1.8; /** 行間を広めにして読みやすく **/
  color: #333; /** 本文は標準のグレー **/
  margin-bottom: 10px; /** 段落間に軽い余白 **/
}

@media (max-width: 768px) {
  .case-studies {
    padding: 40px 15px; /** スマホでややコンパクトに **/
  }

  .case-item {
    padding: 20px; /** モバイルでの内側余白調整 **/
  }

  .case-item h3 {
    font-size: 1.1em; /** 小見出しを少し小さく **/
  }
}




/* -----------------------------
 * 全幅セクション
----------------------------- */

/* 基本構造：全幅セクション */
.l-full-width-section {
  position: relative; /** 位置基準を設定 **/
  left: 50%; /** 親の中央基準に寄せる **/
  right: 50%; /** 左右基準を中央に **/
  width: 100vw; /** ビューポート全体の幅を使用 **/
  margin-left: -50vw; /** 左側のはみ出しを補正 **/
  margin-right: -50vw; /** 右側のはみ出しを補正 **/
  background: linear-gradient(180deg, #b3e5ff 0%, #ffffff 100%); /** 背景グラデーション（水色→白／hero用） **/
  text-align: center; /** 中央寄せ **/
  padding: 100px 20px; /** 上下余白 **/
  box-sizing: border-box; /** パディング含めて幅を計算 **/
}

/* 内側の中央整列用 */
.l-full-width-section .l-inner {
  max-width: 1200px; /** コンテンツ中央寄せ用（お好み） **/
  margin: 0 auto;
}

/* hero セクション（中の文字スタイル） */
.hero h1 {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.5;
  color: #6b4a24;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1.1em;
  color: #7a5a2e;
}