@import url('base.css');
/* @import url('media.css'); */

body {
  padding-top: 50px; /* ヘッダーの高さに応じて調整（例: 80px） */
}

/* CVボタンデザイン */
#openStepForm {
  display: inline-block;
  background-color: orange;
  color: #fff;
  padding: 20px 28px;
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
  margin: 0 auto;
}

#openStepForm:hover {
  background-color: #ff8c00;
}

/* --------------------------------
  ヘッダー内：ロゴ画像（左寄せ）
-------------------------------- */
#sec00 {
}
#sec01 {
}
#sec02 {
}
#sec03 {
}
#sec04 {
}
#sec05 {
}
#sec06 {
}
#sec07 {
}
#sec08 {
}
#sec09 {
}
#sec10 {
}
.site-logo {
  height: 50px;
  width: auto;
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}
/* --------------------------------
  ヘッダー全体：Flexで横並び
-------------------------------- */
header {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 横方向0, 縦方向4px, ぼかし6px, 色 */
  z-index: 10; /* 必要に応じて前面に */
  background-color: #fff; /* 背景色が透明だと影が目立たないので明示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff; /* 背景色を忘れずに */
}
.container_h {
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
}

.header-left {
  flex-shrink: 0;
}

.site-logo {
  height: 40px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto; /* ← 右に寄せるポイント */
}

.header-right a {
  text-decoration: none;
  font-size: 14px;
  color: #333;
}

.header-cta {
  height: 36px;
}

/* ← ハンバーガーメニュー */

/* --------------------------------
  キャッチコピー（ロゴ横の文字）
-------------------------------- */
.site-tagline {
  font-size: 1.2em;
  color: #333;
}

/* =============================
   共通：コンテナ幅の制御
   ============================= */
.container_top {
  max-width: 1140px; /* 中央の最大横幅を1140pxに制限 */
  margin: 0 auto; /* 左右中央寄せ */

  box-sizing: border-box; /* paddingを含めてサイズを算出 */
}

.container {
  max-width: 1140px; /* 中央の最大横幅を1140pxに制限 */
  margin: 0 auto; /* 左右中央寄せ */
  padding: 0 10px;
  box-sizing: border-box; /* paddingを含めてサイズを算出 */
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* キャッチコピーのスタイル */
.catch-copy {
  background-color: #7ab63d; /* 背景色グリーン */
  color: #fff; /* 文字色は白でコントラスト確保 */
  font-size: 1.4em;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  margin: 0;
}

#sec00 {
  background-image: url('../img/top_bk.jpg');
  background-size: 2920px auto;

  background-position: 0px -850px; /* 表示位置をピクセルで指定 */
  background-repeat: no-repeat;
}

/* sec00のimgタグとキャッチコピーの間の隙間をなくす */
#sec00 img {
  display: block;
  margin-bottom: 0;
}
/* CTAの枠（ブラウン） */
.cta-frame {
  background-color: #b98c3b;
  border-radius: 16px;
  padding: 10px;
  position: relative;
  margin: 20px auto 0;
  width: 90%;
  box-sizing: border-box;
}

/* 白い内側の紙 */
.cta-inner {
  background-color: #fff;
  border-radius: 12px;
  padding: 0 20px 20px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* 上に重ねる画像 */
.cta-image {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.cta-image img {
  width: 200px;
  height: auto;
}

/* CTAボタン */
/* 上部横長画像 */
.cta-banner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ボタンを横並びで均等配置 */
.cta-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

/* 各ボタンリンクを親の50%幅に設定 */
.cta-button-link {
  flex: 1;
}

/* 画像を親のリンク幅にフィットさせる */
.cta-button-link img {
  width: 100%;
  height: auto;
  display: block;
}

/* 中央テキスト */
.cta-text {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 20px;
  color: #333;
}

/* 電話リンク画像 */
.cta-phone-link img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

#mini-cta {
  text-align: center;
  padding: 0px 5px;
}

#mini-cta .container {
  /* background: linear-gradient(to bottom, #f4ece6 0%, #f4ece6 30%, #ffffff 100%); */

  padding: 50px 20px;
}

.mini-cta-button {
  display: inline-block;
  background-color: #f39c12;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 20px 30px;
  border-radius: 7px;
  text-decoration: none;
  width: 500px;
  transition: background-color 0.3s ease;
  position: relative;
  margin-bottom: 20px;
}

.mini-cta-button::after {
  content: '▶';
  font-size: 12px;
  margin-left: 8px;
  position: relative;
  top: -1px;
}

.mini-cta-button:hover {
  background-color: #e08e0b;
}

.cta-caption {
  font-weight: bold;
  color: #333 !important;
  margin-bottom: 1px;
  font-size: 14px;
}

/* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

#mini-cta02 {
  text-align: center;
  padding: 30px 20px;
}

#mini-cta02 .container {
  padding: 50px 20px;
}

/* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */
/* sec01 */
#sec01 {
  margin: 2em 0;
}

#sec01 .container {
  padding: 1em;
}

/* 見出し：H3部分のスタイル */
.feature-heading {
  background-color: #7ab63d; /* グリーン */
  color: #fff;
  font-size: 1.2em;
  padding: 10px;

  text-align: center;
  margin: 0;
}

/* グリッド全体（2カラム表示） */
.features-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0px;
}

/* 各特徴ボックスの枠 */
.feature-box {
  background-color: #f4f4f4;
  border-radius: 0 0 6px 6px;
  flex: 1 1 45%;
  min-width: 300px;
  box-sizing: border-box;

  /* 線をなくす */
  border: none;

  /* 影で立体感を出す */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* 内容部分：画像＋テキスト */
.feature-content {
  padding: 20px;
  text-align: center;
}
.feature-content p {
  text-align: left;
  margin-bottom: 0;
}

.feature-content img {
  height: auto;
  margin-bottom: 10px;
}

/* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

/* sec02全体の余白と背景 */
/* sec02：背景画像＋透過レイヤー */
#sec02 {
  position: relative; /* ::beforeの基準に */
  padding: 50px 0 100px 0; /* 上下余白 */
  overflow: hidden; /* 擬似要素のはみ出し防止 */
}

/* 背景画像の透過レイヤー */
#sec02::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/sec02_bk.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5; /* 透明度調整（0.1〜0.9） */
  z-index: 0;
}

/* 背景より手前にコンテンツを表示するための指定 */
#sec02 .container {
  position: relative;
  z-index: 1;
}

.worry-message {
  text-align: center;
  font-size: 2.3em;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1em;
  color: #333333;
}

.worry-item {
  flex-direction: row;
  align-items: flex-start;
  padding: 10px;
  font-size: 0.95em;
}

.worry-item img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* 「お悩み」だけ色変更 */
.worry-message .highlight {
  color: #7ab63d;
}

.concern-grid {
  grid-template-columns: 1fr;
}
/* 2列×3行のグリッド表示 */
.concern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2カラム */
  gap: 10px; /* 各枠の間隔 */
  margin-top: 30px;
}

/* 各ボックスのデザイン */
.concern-box {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* チェックアイコンのサイズ */
.check-icon {
  width: 24px;
  height: 24px;
  margin: 0 10px 0 15px;
  flex-shrink: 0;
}

/* テキスト部分 */
.concern-box p {
  font-size: 1.4em;
  line-height: 1.4;
  margin: 0;
  color: #333;
  font-weight: bold;
  padding-left: 1em;
}

/* セクションの境目にかぶせる画像 */
.section-divider {
  position: relative;
  height: 0; /* 高さを持たせない（画像のみ表示） */
}

.section-divider img {
  position: absolute;
  top: -90px; /* ★sec02にかぶせる（必要に応じて調整） */
  left: 50%;
  transform: translateX(-50%);
  width: 1000px; /* ★必要に応じてサイズ調整 */
  height: auto;
  z-index: 2; /* コンテンツより前面に出す */
  pointer-events: none; /* クリックを透過（不要なら削除） */
}

/* sec04🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

#sec04 {
  margin-top: 150px;
}

/* sec05🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

#sec05 {
  margin: 100px 0;
}

/* 全体の理由ブロック */
.reason-block {
  position: relative;
  padding: 40px 20px;
  margin-bottom: 40px;
  overflow: hidden;
  background-color: #fff;
}

/* 背景番号 */
.reason-number-bg {
  position: absolute;
  font-size: 230px;
  font-weight: bold;
  color: #eee;
  top: 10px;
  left: 470px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* タイトル */
.reason-title {
  color: #7ab63d;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 0.5em;
  position: relative;
  z-index: 1;
}

/* 左右並び配置 */
.reason-content {
  display: flex;
  align-items: stretch; /* 高さを揃える */
  justify-content: space-between;
  gap: 20px;
  z-index: 1;
  position: relative;
}

/* 左カラム */
.reason-left {
  flex: 1;
  display: flex;
  flex-direction: column;

  gap: 8px; /* ← 見出しと下の要素の間隔を調整 */
}

/* アイコンとテキストの横並び */
/* アイコンとテキストを横並びにする */
.reason-icon-text {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

/* アイコンのサイズ固定 */
.reason-icon {
  width: 70px;
  height: auto;
  flex-shrink: 0; /* 縮まないように */
}

/* テキストが横に回り込むようにする */
.reason-text {
  flex: 1;
  margin: 0;
  font-size: 1em;
  line-height: 1.6;
  color: #333;
}

/* 右カラム：画像 */
.reason-image img {
  width: 300px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* 区切り線 */
.reason-divider {
  border: none;
  height: 1px;
  background-color: #ccc; /* 薄いグレーの線 */
  margin: 40px 0; /* 上下の余白 */
}
#sec04 {
}

#sec04 .container {
  background-color: #e2f7e8; /* 薄いベージュ背景 */
  border: 7px solid #7ab63d; /* 緑の枠線 */
  border-radius: 12px;
  padding: 30px 30px 30px 30px;
  margin: auto;
  max-width: 1140px; /* 中央の最大横幅を1140pxに制限 */
}
/* sec04  🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

/* ステップ全体 */
.step-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
  padding: 0;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  gap: 20px;
}

/* 左カラム（リボン＋テキスト） */
.step-left {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 20px;
}

/* リボン（Step番号） */
/* リボン全体を囲む */
.step-ribbon-wrap {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}

/* リボン本体 */
.step-ribbon {
  display: inline-block;
  background-color: #7ab63d;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  padding: 10px 16px;
  position: relative;
  margin-left: -20px; /* 左にはみ出す */
  margin-top: 17px;
  width: calc(100% + 35px);

  z-index: 1;
}

.step-ribbon:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 20px 15px 20px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

/* 折り返し（三角形） */
.step-ribbon::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #5c8d2a;
}

/* テキスト部分 */
.step-text {
  flex: 1;
}
.step-title {
  color: #7ab63d;
  font-size: 1.4em;
  font-weight: bold;
  margin: 0;
  padding: 20px 0 0 35px;
}
.step-desc {
  margin-top: 0.5em;
  line-height: 1.6;
  color: #333;
}

/* 右の画像 */
.step-image img {
  width: 140px;
  height: auto;
  display: block;
}

.step-arrow {
  text-align: center;
  font-size: 2em;
  margin: 0;
  color: orange;
}

/* sec04  🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */
/* セクション背景 */
#sec06 {
  background-color: #f4faec;
  padding: 60px 20px;
}

/* 枠全体 */
.voice-box {
  border: 2px dashed #ccc;
  background-color: #fff;
  margin-bottom: 30px;
  padding: 15px;
}

/* 内部レイアウト：横並びに */
.voice-inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

/* 左側の画像 */
.voice-photo {
  flex: 0 0 130px;
}
.voice-photo img {
  width: 150px;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* 右側コンテンツ全体 */
.voice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 上段：地域＆工事情報 */
.voice-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.voice-area {
  background-color: #8c5a2e;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9em;
}

.voice-type {
  background-color: #7ab63d;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9em;
}

/* 下段：本文 */
.voice-text {
  background-color: #eee;
  padding: 15px;
  font-size: 1em;
  line-height: 1.6;
  color: #333;
  border-radius: 4px;
  flex: 1;
}

/* よくある質問 */
#sec07 {
  padding: 80px 20px;
}
.faq-question {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f4f4f4;
  padding: 1em;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  color: #7ab63d;
}

/* 左側のQアイコン */
.faq-question .faq-icon {
  width: 24px;
  height: auto;
  margin-right: 10px;
}

.toggle-icon {
  font-size: 1.2em;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.faq-question.open .toggle-icon {
  transform: rotate(180deg); /* ＋→× に見せる */
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0 1em; /* padding-top/bottom は open状態で追加 */
  background-color: #eee;
}

.faq-answer.open {
  max-height: 500px; /* 十分大きな値を設定 */
  opacity: 1;
  margin: 0 0 20px 0;
  padding: 1em;
}

.faq-icon-wrap {
  flex-shrink: 0;
}

.faq-icon {
  width: 24px;
  height: auto;
  display: block;
}

.faq-answer-text {
  flex: 1;
  line-height: 1.6;
  color: #333;
  display: block;
}

/* フッター　　　　　　　　　　　　　　　　　　　　　　　　　 */
#footer {
  background-color: #f5f5f5;
  padding: 20px 0;
  font-size: 14px;
  color: #666;
  text-align: center;
}
#footer p {
  margin: 0;
  padding: 0;
}

#footer a {
  color: #666;
  text-decoration: none;
  margin: 0 5px;
}

#footer a:hover {
  text-decoration: underline;
}

.footer-articles {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

.footer-articles-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #666;
  margin-bottom: 0px;
  border-bottom: 2px solid #666;
  display: inline-block;
  padding-bottom: 0px;
}

.footer-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-articles-list li {
  margin: 6px 0;
}

.footer-articles-list a {
  color: #666;
  text-decoration: none;
  font-size: 1em;
  transition: color 0.3s ease;
}

/* エリア🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

#area {
  background-color: #f4faec;
  padding: 60px 20px;
}

.area-description {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.area-image img {
  width: 280px;
  height: auto;
  border-radius: 8px;
}

.area-text {
  flex: 1;
  font-size: 1em;
  line-height: 1.8;
  color: #333;
}

.area-lead {
  font-size: 1.1em;
}

/* 地域一覧ブロック（全幅） */
.area-lists {
  background-color: #fff;
  padding: 0px 20px;
  border: 5px solid #7ab63d;
  border-radius: 8px;
}

.area-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 20px 0 5px 0;
  color: #7ab63d;
}

/* 地域名を横並びに */
.area-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  padding: 0;
  margin: 0px 0 20px;
}

.area-list li {
  font-size: 1em;
  color: #333;
}

.area-note {
  font-size: 0.95em;
  color: #666;
}

/* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */ /* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */ /* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

/* -----------------------------------
  メディアクエリ（スマホ向け）
  画面幅が768px以下のときに適用されます
----------------------------------- */
@media screen and (max-width: 768px) {
  * {
    box-sizing: border-box;
  }

  #sec00 {
    background-size: 110% auto;
    background-position: 0px -0px; /* 表示位置をピクセルで指定 */
  }
  #sec01 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec02 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec03 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec04 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec05 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec06 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec07 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec08 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec09 {
    margin: 1em 0;
    padding: 1em 0;
  }
  #sec10 {
    margin: 1em 0;
    padding: 1em 0;
  }

  #area {
    margin: 1em 0;
    padding: 1em 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    margin: 0 auto;
  }

  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    margin: 0;
    padding: 0;
    padding-top: 50px;
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }
  #mini-cta .container {
    padding: 30px 5px;
  }

  .header-right {
    display: none;
  }

  /* キャッチコピーのスタイル */
  .catch-copy {
    background-color: #7ab63d; /* 背景色グリーン */
    color: #fff; /* 文字色は白でコントラスト確保 */
    font-size: 1em;
    font-weight: bold;
    padding: 5px;
  }

  .step-block,
  .reason-block,
  .area-description,
  .faq-box {
    flex-direction: column;
    align-items: stretch;
  }

  /* スマホで非表示にしたい要素 */
  .pc-only {
    display: none !important;
  }

  /* スマホでのみ表示したい要素 */
  .sp-only {
    display: block !important;
  }

  /* 見出しなどのフォントサイズを調整（任意） */
  h2 {
    font-size: 1.4em;
  }

  /* ヘッダー */
  header .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 5px !important;
  }

  .site-logo {
    height: 30px !important; /* お好みで調整 */
    width: auto;
  }

  .site-tagline {
    font-size: 0.35em !important;
    margin-left: 10px;
    line-height: 1.2;
    padding: 0;
    margin: 0;
  }

  /* CTAボタンなどが画面幅に対してはみ出さないように */
  .cta-btn {
    width: 100%;
    font-size: 1em;
    padding: 14px 0;
  }

  /* ヘッダーや画像の中央寄せを再調整する場合 */
  header,
  .cta-frame {
    text-align: center;
  }

  /* =====================
   sec02 スマホ用スタイル
   ===================== */
  #sec02 {
    padding: 40px 0;
  }

  .feature-title {
    font-size: 1.8em !important;
    line-height: 1.4;
  }

  .h2-label {
    font-size: 0.9em;
  }

  .h2-highlight {
    font-size: 1em;
  }

  .worry-list {
    grid-template-columns: 1fr;
    gap: 10px 0;
  }

  .worry-item {
    flex-direction: row;
    align-items: flex-start;
    padding: 10px;
    font-size: 0.95em;
  }

  .worry-item img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  /* お悩みテキストのメッセージ部分 */
  .worry-message {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 40px;
  }

  /* 「お悩み」だけ色変更 */
  .worry-message .highlight {
    color: #7ab63d;
  }

  .concern-grid {
    grid-template-columns: 1fr;
  }

  /* 各特徴ボックスの枠 */
  .feature-box {
    background-color: #f4f4f4;
    border-radius: 0 0 6px 6px;
    flex: 1 1 45%;
    min-width: 98%;
    box-sizing: border-box;

    /* 線をなくす */
    border: none;

    /* 影で立体感を出す */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }

  /* 内容部分：画像＋テキスト */
  .feature-content {
    padding: 20px;
    text-align: center;
  }
  .feature-content p {
    text-align: left;
    margin-bottom: 0;
  }

  .feature-content img {
    height: auto;
    margin-bottom: 10px;
  }

  #sec02 .container {
    padding: 10px;
  }

  .concern-grid {
    grid-template-columns: 1fr;
  }
  /* 2列×3行のグリッド表示 */
  .concern-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1カラム */

    gap: 10px; /* 各枠の間隔 */
    margin-top: 30px;
  }

  /* 各ボックスのデザイン */
  .concern-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* チェックアイコンのサイズ */
  .check-icon {
    width: 20px;
    height: 20px;
    margin: 0 0px 0 0px;
    flex-shrink: 0;
  }

  /* テキスト部分 */
  .concern-box p {
    font-size: 1.2em;
    line-height: 1.4;
    margin: 0;
    color: #333;
    font-weight: bold;
    padding-left: 1em;
  }

  /* セクションの境目にかぶせる画像 */
  .section-divider {
    position: relative;
    height: 0; /* 高さを持たせない（画像のみ表示） */
  }

  .section-divider img {
    position: absolute;
    top: -60px; /* ★sec02にかぶせる（必要に応じて調整） */
    left: 50%;
    transform: translateX(-50%);
    width: 1000px; /* ★必要に応じてサイズ調整 */
    height: auto;
    z-index: 2; /* コンテンツより前面に出す */
    pointer-events: none; /* クリックを透過（不要なら削除） */
  }

  /* sec04🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

  #sec04 {
    padding: 0 10px;
    margin-top: 80px;
  }
  #sec04 .container {
    padding: 10px 10px 10px 25px;
  }
  /* ステップ全体 */
  .step-block {
    margin-bottom: 10px;
  }
  /* リボン（Step番号） */
  /* リボン全体を囲む */
  .step-ribbon-wrap {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
  }

  /* リボン本体 */
  .step-ribbon {
    display: inline-block;
    background-color: #7ab63d;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    padding: 10px 16px;
    position: relative;
    margin-left: -20px; /* 左にはみ出す */
    margin-top: 17px;
    width: calc(100% + 35px);

    z-index: 1;
  }

  .step-ribbon:after {
    position: absolute;
    content: '';
    z-index: 1;
    top: 0;
    right: 0;
    width: 0px;
    height: 0px;
    border-width: 20px 15px 20px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
  }

  /* 折り返し（三角形） */
  .step-ribbon::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px #5c8d2a;
  }

  /* テキスト部分 */
  .step-text {
    flex: 1;
    padding: 0 25px 0 0;
  }
  .step-title {
    color: #7ab63d;
    font-size: 1.4em;
    font-weight: bold;
    margin: 0;
    padding: 20px 0 0 5px;
    margin-bottom: 0;
  }
  .step-desc {
    margin-top: 1.3em;
    line-height: 1.6;
    color: #333;
    margin-left: -60px;
    margin-bottom: 0;
  }

  /* 右の画像 */
  .step-image img {
    width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .step-arrow {
    text-align: center;
    font-size: 2em;
    margin: 5px 0;
    color: orange;
  }
  /* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */
  /* 背景番号 */
  .reason-number-bg {
    font-size: 230px;

    top: -50px;
    left: 100px;
  }

  .reason-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .reason-heading {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .reason-icon {
    width: 50px;
    height: auto;
    flex-shrink: 0;
  }

  .reason-title {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.4;
    position: relative;
    top: 10px; /* 下に3pxずらす */
  }

  .reason-text {
    margin-top: 10px;
    font-size: 0.95em;
    line-height: 1.6;
  }

  .reason-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* 全体の理由ブロック */
  .reason-block {
    position: relative;
    padding: 0px 5px;
    margin-bottom: 40px;
  }

  /* CTAボタン */
  .mini-cta-button {
    font-size: 16px;
    padding: 20px 30px;
    width: 90%;
    transition: background-color 0.3s ease;
    position: relative;
    margin-bottom: 20px;
  }

  /* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

  /* 枠全体 */
  .voice-box {
    padding: 10px;
  }

  .voice-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .voice-photo {
    width: 100px;
    flex-shrink: 0;
  }

  .voice-photo img {
    width: 150px;
    height: 80px;
    border-radius: 0%;
  }

  .voice-content {
    display: flex;
    flex-direction: column;
  }

  .voice-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -104px; /* 写真と横並びに調整（必要に応じて微調整） */
    margin-left: 115px;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px; /* 行間調整 */
  }
  .voice-meta span {
    display: inline-block;
    margin-bottom: 4px; /* 間隔調整（お好みで） */
  }

  .voice-text {
    margin-top: 0;
    font-size: 0.95em;
    line-height: 1.6;
  }

  .voice-photo {
    flex: 0 0 100px;
  }

  /* sec07　よくある質問 */

  .faq-question {
    padding: 1em;
    font-weight: bold;
    font-size: 1em;
  }

  .toggle-icon {
    font-size: 1.2em;
    padding-left: 5px;
  }
} /* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

/* エリア */
@media screen and (max-width: 768px) {
  .area-description {
    flex-direction: column;
    align-items: center;
  }

  .area-image img {
    width: 100%;
    max-width: 400px;
  }

  .area-text {
    text-align: left;
  }

  .area-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px;
    color: #7ab63d;
  }

  #footer {
    background-color: #f5f5f5;
    padding: 20px 0;
    font-size: 10px;
    color: #666;
    text-align: center;
  }
  #footer p {
    margin: 0;
    padding: 0;
  }

  #footer a {
    margin: 0;
  }
} /* 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 */

/* メニューの箇所＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ーー */

/* ハンバーガーメニューの箇所＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ーー */
.hamburger {
  position: fixed;
  top: 2px;
  right: 5px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #333;
  transition: all 0.4s;
}

.hamburger__line:nth-of-type(1) {
  top: 14px;
}
.hamburger__line:nth-of-type(2) {
  top: 23px;
}
.hamburger__line:nth-of-type(3) {
  top: 32px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: transform 0.4s;
  z-index: 90;
  opacity: 0.9;
}

.nav.active {
  transform: translateX(0);
}

.nav__list {
  margin: 0;
  padding: 100px 0 0;
  list-style: none;
}

.nav__item {
  padding: 0 20px;
}

.nav__link {
  display: block;
  padding: 15px 0;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}