
/* ==========================================
   メインビジュアル
   ========================================== */
.main-visual {
  background-image: url('images/hero.png');
  background-size: cover;
  background-position: center;
  height: 350px;
  display: flex;
  align-items: center;
  position: relative;
}


.mv-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 40px;
}

.mv-content h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 34px;
  color: #1a3a2a;
  line-height: 1.5;
  margin-bottom: 15px;
  font-weight: 700;
}

.mv-content p {
  font-size: 16px;
  color: #333333;
  margin-bottom: 30px;
}
/* 無料相談ボタン（枠線を細く、スマートにした透過版） */
.btn-free {
  display: block;           /* ボタンをブロック要素にする */
  width: fit-content;       /* 中の文字の長さに合わせてボタンの幅を自動調整 */
  min-width: 280px;         /* ボタンが小さくなりすぎないように最低の幅を指定 */
  margin-top: 20px;         /* 上の文章との間に程よい隙間を作る */
  padding: 12px 30px;       /* 【微調整】上下左右の余白を少し縮めてスタイリッシュに */
  
  text-align: center;       /* 文字を完全にど真ん中に配置 */
  font-weight: bold;
  color: #1a3a2a;           /* 文字の色（深い緑） */
  
  /* 【ここをシャープに戻しました】 */
  border: 1px solid #1a3a2a; /* 枠線を細い 1px に戻してスマートに */
  background-color: transparent; /* 背景を完全に透明にして後ろの画像を透けさせる */
  
  transition: all 0.3s;     /* マウスを乗せたときの色の変化をなめらかにする */
}

/* マウスを乗せたとき（ホバー時）の設定 */
.btn-free:hover {
  background-color: #1a3a2a; /* 背景を深い緑にする */
  color: #ffffff;           /* 文字を白にする */
}
/* ==========================================================================
   📩 トップページ：コンセプトメッセージ（文字幅連動・スマート2行版）
   ========================================================================== */
.top-concept-section {
    background-color: #f9f9f9;       /* ほんのり優しい薄グレーの全幅背景 */
    padding: 30px 0 30px 0;                 /* 上下の余白をスマートに調整 */
    text-align: center;              /* すべての要素を美しく中央寄せ */
    border-bottom: 1px solid #f0f0f0;
}

/* 👑 キャッチコピー：「届けるべき人に、届けるべき権利を。」 */
.concept-catch {
    font-family: 'Shippori Mincho', serif; 
    font-size: 2.3rem;               /* 上品で押し出しのあるサイズ */
    color: #111111;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 35px;             /* 下の文章との間隔 */
    display: inline-block;           /* 文字の横幅を基準にする設定 */
    position: relative;
    letter-spacing: 0.05em;
}

/* ✨ 横棒の幅をデカ文字の横幅に100%ぴったり合わせる設定 */
.concept-catch::after {
    content: "";
    position: absolute;
    bottom: -12px;                   /* 文字のすぐ下に配置 */
    left: 0;                         /* 左端から */
    width: 100%;                     /* 右端まで（文字幅に自動で完全に一致します） */
    height: 3px;                     /* 線の太さ */
    background-color: #064e3b;       /* 事務所のキーカラー（深緑） */
}

/* 📝 コンセプトメッセージ本文の塊 */
.concept-body {
    max-width: 850px;                
    margin: 0 auto;                  
    padding: 0 20px;
}

/* 本文の段落調整（Webで美しく2行に収める設定） */
.concept-body p {
    font-size: 1.05rem;
    color: #444444;                  
    line-height: 2.0;                /* ゆったり読みやすい行間 */
    margin-bottom: 0;
}


/* ==========================================
   メインコンテンツ（2カラムカード）
   ========================================== */
.main-content {
  padding: 20px 20px 20px 20px;
}

.content-grid {
  display: flex;
  gap: 25px;
}

.card-box {
  margin-top: 20px;
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 35px;
  background-color: #ffffff;
}

.card-box h3 {
  font-size: 18px;
  color: #1a3a2a;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.check-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 15px;
  font-size: 1.05rem; /* 14px から 1.05rem に変更 */
}

.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #144d2e;
  font-weight: bold;
}

.card-footer-text {
  font-size: 1.05rem; /* 14px から 1.05rem に変更 */
  margin-top: 25px;
  color: #333333;
}

.desc-text {
  font-size: 1.05rem; /* 14px から 1.05rem に変更 */
  margin-bottom: 15px;
  color: #333333;
  text-align: justify;
}

.desc-text:last-child {
  margin-bottom: 0;
}

.notice-box { 
    border: 1px solid #e0e0e0; 
    margin-top: 0px; 
    padding: 40px; 
    text-align: center; 
    font-size: 0.95rem; 
    color: #444;
    background-color: #fafafa;
}
でかすぎるな。こっちが本命みたい。あと提携説明文も入れたい