/* ─────────  RESET  ───────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  overflow-x: hidden;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
  color: #333;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

.sp-only {
  display: none;
}

@media (max-width: 900px) {
  .sp-only {
    display: block;
  }
}

/* ─────────  GLOBAL  ───────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 900px) {
  .flex {
    flex-direction: column;
  }
}

/* ─────────  TAGLINE  ───────── */
.tagline {
  font-size: .65rem;
  text-align: left;
  padding: .25rem .75rem;
  color: #555;
  background: #f9f9f9;
}

/* ─────────  HERO  ───────── */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #e2ffe2 0%, #ffffff 70%);
  padding-block: 3rem 6rem;
}
.hero .tel {
   display: block;           /* または inline-block でも OK */
  width: 100%;              /* contact 幅いっぱいをクリック領域に */
  text-decoration: none;    /* 下線を消したい場合はそのまま */
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/hero-back.png');
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .15;
}

/* ─────────  HERO INNER  ───────── */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* ─── BEFORE / AFTER 画像 ─── */
.before-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.before,
.after {
  position: relative;
  width: clamp(260px, 40vw, 480px);
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
}
.before img,
.after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .12));
  mask-image: radial-gradient(circle at center, #000 70%, transparent 100%);
}
.label {
  position: absolute;
  top: .75rem;
  left: 1rem;
  font-family: 'Comic Sans MS', 'Noto Sans JP', cursive;
  font-size: 2.4rem;
  font-weight: 700;
  color: #5ac37b;
  background: rgba(255, 255, 255, 0.85);
  padding: 0 10px;
  text-shadow: 0 0 3px rgba(0, 0, 0, .1);
}
.after-label {
  left: auto;
  right: 1rem;
}

/* ─── コピー文 ─── */
.copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
}
.copy .main {
  font-size: 2rem;
  font-weight: 900;
}
.copy .main span {
  color: #e40012;
}
.copy .sub {
  font-size: 1.5rem;
  position: relative;
}
.copy .sub::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -.1em;        /* ★ 文字より僅かに下げる（お好みで調整） */
  width: 100%;
  height: 0.5em;        /* 太さ */
  background: orange;
  opacity: .85;
  border-radius: 2px;
  z-index: -1;          /* ★ 背面へ */
  pointer-events: none; /* クリックを透過させたい場合は追加 */
}

/* ─── 作業員画像 ─── */
.worker {
  position: absolute;
  left: 12%;
  bottom: -120px;
  transform: translateX(-50%);
  max-width: 200px;
}

/* ─── 問い合わせブロック ─── */
.contact {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  z-index: 2;
}
.btn-mail {
  background: #ff7b00;
  color: #fff;
  font-weight: 700;
  padding: .6rem 2rem;
  border-radius: 50px;
  font-size: .8rem;
  text-align: center;
}
.tel-box {
  background: #00a651;
  color: #fff;
  width: 100%;
  border-radius: .5rem;
  padding: 1rem .5rem;
  text-align: center;
}
.tel-box .tel {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.tel-box .note {
  font-size: .75rem;
  margin-top: .4rem;
}
.qr {
  width: 110px;
  margin: .65rem auto 0;
}
.card {
  font-size: .85rem;
  font-weight: 700;
  background: #e5003d;
  border-radius: .25rem;
  padding: .25rem .55rem;
  margin-top: -19px;
}

/* ─────────  PC (幅 901px 以上) ───────── */
@media (min-width: 901px) {
  /* Before / After 横並び */
  .before-after {
    flex-direction: row;
  }

  /* コピー文を画像下に横書きで */
  .copy {
    margin-top: 1.5rem;
  }

  /* 問い合わせブロックを右上固定 */
  .contact {
    position: fixed;
    right: 1rem;
    top: 2rem;
    z-index: 200;
  }
}

/* ─────────  モバイル (幅 900px 以下) ───────── */
@media (max-width: 900px) {
  /* hero-inner 中央寄せ */
  .hero-inner {
    align-items: center;
  }

  /* Before / After を中央寄せ */
  .before-after {
    margin-inline: auto;
  }

  /* コピー文余白 */
  .copy {
    margin-top: 1.5rem;
  }

  .copy .main {
    font-size: 1.8rem
  }

  .copy .sub {
    font-size: 1.2rem
  }

  /* 作業員画像をフロー内へ */
  .worker {
    position: static;
    transform: none;
    max-width: 160px;
    margin: 1.5rem auto 0;
  }

  /* 問い合わせブロックをヒーロー下端に配置 */
  .contact {
    position: relative;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 0;
        top: 0;
        right: 0;
  }
  .btn-mail {
    width: 100%;
    font-size: .8rem;
    padding: 1rem .75rem;
  }
  .tel-box .tel {
    font-size: 1.5rem;
  }

  .tagline {
    font-size: .6rem;
  }
}



/* ─────────  ADVICE BANNER ───────── */
.advice-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem; /* ← PC表示の横スペース拡張 */
  padding: 2.5rem 2rem;
  background: url('images/advice-back.png') no-repeat center center;
  background-size: cover; /* ← 背景画像cover */
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.advice-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95); /* 明るめ白背景で読みやすく */
  z-index: 0;
  border-radius: 1rem;
}
.advice-banner .container,
.advice-banner .advice-text,
.advice-banner .advice-image {
  position: relative;
  z-index: 1;
}
.advice-text {
  flex: 1;
  min-width: 300px;
}
.advice-text .lead {
  font-size: 1.2rem;
  margin-bottom: .75rem;
}

.advice-text h2 {
  font-size: 2.4rem;
  font-weight: bold;
  color: red;
  margin-bottom: 1.25rem;
}

.advice-text h2 span {
  background: yellow;
  color: #222;
  padding: 0 .3em;
}
.advice-list {
  font-size: 1.3rem;
  color: #5b2c06;
  margin-bottom: 1.25rem;
}

.solution {
  font-size: 1.4rem;
  font-weight: bold;
}
.solution .highlight {
  color: red;
}
.advice-image {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 320px;
}
.advice-image img {
  width: 100%;
  min-width: 650px;
  height: auto;
  margin-bottom: -40px;
}
.advice-image .icon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
}

@media (max-width: 600px) {
  .advice-text h2 {
    font-size: 1.8rem;
  }
  .advice-list {
    font-size: 1.1rem;
  }
  .solution {
    font-size: 1.2rem;
  }
  .advice-image img {
    min-width: 300px;
    margin-top: 50px;
  }
}




/* ───────── 選ばれる理由セクション ───────── */
.features {
  padding: 4rem 1rem;
  background: url('images/features-back.png') no-repeat center center;
  background-size: cover;
  text-align: center;
  position: relative;
  z-index: 1;
}
.features::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  z-index: 0;
  pointer-events: none;
}

.features * {
  position: relative;
  z-index: 1;
}
.features-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #4b2e1f;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.feature {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: left;
}
.feature h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #9b6504;
}
.feature .sub {
  font-size: 0.95rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}
.feature p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #333;
}
/* 色クラス */
.feature.orange  { border-top: 6px solid #ff9900; }
.feature.gold    { border-top: 6px solid #cc9900; }
.feature.purple  { border-top: 6px solid #9b59b6; }
.feature.pink    { border-top: 6px solid #e67ea3; }
.feature.blue    { border-top: 6px solid #3498db; }
.feature.green   { border-top: 6px solid #27ae60; }
.feature.brown {
  border-top: 6px solid #8B572A;
}
.feature.teal {
  border-top: 6px solid #20A39E;
}



/* ─────────  CASE SECTION 1DK ───────── */
.case {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;        /* ⬅ 背景用擬似要素の基準点 */
  padding: 4rem 1rem;        /* （任意）上下左右に少し余白を追加 */
}
.case::before{
  content: '';
  position: absolute;
  inset: 0;                  /* セクション全体を覆う */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;              /* 画面幅いっぱい */
  background:
    linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)),
    url('images/case-back.png') center/cover no-repeat;
  z-index: -1;
  z-index: -1;               /* コンテンツより背面へ */
  pointer-events: none;      /* 背景のクリック透過（任意） */
}
.case-title {
  display: inline-block;
  background: #79c16f;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  padding: .5rem 1.5rem;
  border-radius: 4px;
  margin-bottom: 2rem;
}
@media(max-width:900px){ 
  .case-title {
    font-size: 1.5rem;
  }
}
/* before / after */
.case-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
}
.case figure {
  position: relative;
  width: 260px;
  border: 8px solid #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
}
.case figure img { width: 100%; height: auto; display: block; }

/* ラベル */
.case-tag {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .9rem;
  font-weight: 700;
  padding: .2rem 1.2rem;
  color: #fff;
  border-radius: 8px;
  text-transform: uppercase;
}
.case-tag--before { background: #555; }
.case-tag--after  { background: #ff7c00; }

/* 矢印 */
.case-arrow{
  width: 70px; height: 70px;
  background:#ff7c00;
  clip-path:polygon(0 0,100% 50%,0 100%);
}

/* 即日シール */
.case-sticker{
  position:absolute;
  bottom:-14px;left:-18px;
  background:#ff7c00;color:#fff;
  font-size:.8rem;font-weight:700;
  transform:rotate(-20deg);
  padding:.25rem .6rem;border-radius:40px;
}

/* メタ情報 */
.case-meta{
  display:flex;justify-content:center;
  gap:1.2rem;font-size:.8rem;margin-bottom:1.2rem;
}
.case-meta li{
  list-style:none;background:#f1f1ef;
  border:1px solid #ddd;border-radius:4px;
  padding:.4rem .7rem;
}
.case-label{
  display:block;font-weight:700;font-size:.75rem;color:#999;
}

/* 完了文 */
.case-done{font-size:1rem;margin-bottom:2rem;}
.case-accent{color:#e60012;font-weight:700;font-size:1.2rem;}

/* 料金 */
.case-price{
  background:#f9f4d7;border:1px solid #eee;
  padding:1.5rem 1rem;margin-bottom:1.5rem;
}
.case-price-sub{font-size:.9rem;margin-bottom:.4rem;}
.case-price-main{font-size:1.7rem;font-weight:700;color:#e98100;}
.case-yen{font-size:2rem;}

/* 比較 */
.case-compare{font-size:1rem;}
.case-estimate{color:#0068c6;margin-bottom:.3rem;}
.case-estimate-amt{font-weight:700;}
.case-saving{color:#d80000;font-weight:700;font-size:1.4rem;line-height:1.3;}
.case-saving-amt{font-size:2rem;}

/* レスポンシブ */
@media(max-width:600px){
  .case-visual{flex-direction:column;}
  .case figure{width:80%;}
  .case-arrow {
    rotate: 90deg;
  }
}




/* ───── CTA 横並びボタン ───── */
.cta-area{
  margin-top: 2rem;
  display: flex;          /* 横並び */
  gap: 1rem;
  flex-wrap: wrap;        /* 幅が足りない時は折り返し */
  justify-content: center;
}
.cta-btn{
  flex: 1 1 220px;        /* 220px 以上で均等伸縮 */
  display: flex; align-items: center; justify-content: center;
  gap: .55rem;
  font-size: 1rem; font-weight: 700; color:#fff;
  padding: .9rem 1.2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
  transition: opacity .2s ease;
}
.cta-btn .icon{ font-size: 1.3rem; }
.cta-email{ background: linear-gradient(180deg,#ff9a1f 0%,#ff6a00 100%); }
.cta-phone{ background: linear-gradient(180deg,#1da1f2 0%,#0075ff 100%); }
.cta-btn:hover{ opacity:.85; }

@media(max-width:600px){
  .cta-btn{ flex: 1 1 100%; }      /* モバイルは縦並び */
}

/* ───── 右側人物写真（任意） ───── */
.hero-img{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  max-width: 400px;
  z-index: 1;                       /* contact ブロックより背面なら 0 に */
}
@media(max-width:900px){
  .hero-img{
    position: static;               /* 小画面はヒーロー下に流す */
    width: 70%;
    margin: 1.5rem auto 0;
  }
}




/* =====  ヒーローバナー追加  ===== */
.banner{
  position:relative;
  overflow:hidden;
  padding:40px 20px;
  background:#fff;
  max-width:1280px;
  margin:60px auto;
  border:8px solid #efe8df;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.banner::before{
  content: '';
  position: absolute;
  /* 枠線と同じ 8px 内側に張り付ける */
  top: 8px; right: 8px; bottom: 8px; left: 8px;
  background: url('images/features-back.png') no-repeat center / cover;
  opacity: .7;                /* ← 好みで 0〜1 に調整 */
  z-index: 0;                  /* 背面へ */
  pointer-events: none;        /* クリック透過（任意）*/
}

/* 中の要素は手前に出す（重なり順の保険）*/
.banner-inner,
.banner-hero{
  position: relative;
  z-index: 1;
}
.banner-inner{max-width:900px;margin:0 auto;position:relative;z-index:1;}
.banner-catch{
  font-size:1.3rem;font-weight:700;color:#3b2400;
  display:flex;align-items:center;gap:.5rem;margin-bottom:8px;
}
.banner-icon{width:36px;height:auto;}
.banner-title{
  font-size:clamp(2.2rem,6vw,3.6rem);font-weight:900;line-height:1.25;
  color:#e60012;margin-bottom:30px;position:relative;width:max-content;
}
.banner-title span::before{
  content:'';position:absolute;left:-6%;right:-6%;top:50%;
  height:1.1em;background:#fff500;z-index:-1;
  transform:translateY(-50%) skewX(-8deg);
}

/* 左ブロック */
.banner-left{display:flex;align-items:flex-end;gap:12px;margin-bottom:28px;}
.banner-staff img{width:110px;height:auto;}
.banner-speech{
  font-size:1.2rem;font-weight:700;text-align:center;background:#fff;
  width:220px;padding:28px 20px 34px;border-radius:50%;
  box-shadow:0 0 0 6px #fff,0 2px 8px rgba(0,0,0,1);position:relative;
}
.banner-speech::after{
  content:'';position:absolute;bottom:-16px;left:28%;
  border-top:16px solid #fff;border-left:18px solid transparent;border-right:18px solid transparent;
}

/* バッジ */
.banner-badges{display:flex;gap:26px;margin-bottom:28px;}
.banner-badge{
  font-weight:700;text-align:center;line-height:1.2;color:#fff;
  padding:22px 16px;border-radius:50%;width:160px;height:auto;
  position:relative;
}
.banner-badge-big{font-size:1.5em;}
/* 緑バッジ */
.banner-badge--green{background:linear-gradient(180deg,#74cc00 0%,#4da100 100%);}
.banner-badge--green::before,
.banner-badge--green::after{
  content:'';position:absolute;left:50%;translate:-50% 0;border:18px solid transparent;
}
.banner-badge--green::before{top:-30px;border-bottom-color:#74cc00;}
.banner-badge--green::after{bottom:-30px;border-top-color:#4da100;}
/* がま口バッジ */
.banner-badge--purse{
  background:radial-gradient(circle at 50% 105%,#ff9600 0%,#ff6c00 70%);
  border-radius:48% 48% 60% 60% / 54% 54% 46% 46%;
}
.banner-badge--purse::before{
  content:'';position:absolute;top:-14px;left:50%;translate:-50% 0;
  width:38px;height:18px;background:#f8c63b;border-radius:10px 10px 0 0;
}
.banner-badge--purse::after{
  content:'';position:absolute;top:-24px;left:50%;translate:-50% 0;
  width:14px;height:14px;background:#f8c63b;border-radius:50%;
}

/* CTA */
.banner-btn{
  width: 330px;display:inline-flex;align-items:center;justify-content: center;gap:.6rem;
  font-size:1.3rem;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#ffa732 0%,#ff7f00 100%);
  padding:14px 40px;border-radius:10px;
  box-shadow:0 4px 0 #d85600;transition:transform .1s ease;text-decoration:none;
}
.banner-btn i{font-size:1.4em;}
.banner-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #d85600;}

.banner-btn2{
  width: 330px;display:inline-flex;align-items: center;justify-content: center;gap:.6rem;
  font-size:1.3rem;font-weight:700;color:#fff;
  background: linear-gradient(180deg, #74cc00 0%, #4da100 100%);
  padding:14px 40px;border-radius:10px;
  box-shadow: 0 4px 0 #3b7e00;transition:transform .1s ease;text-decoration:none;
}
.banner-btn2 i{font-size:1.4em;}
.banner-btn2:active{
  transform: translateY(2px);
  box-shadow: 0 2px 0 #3b7e00;
}

/* 右側人物 */
.banner-hero{
  position:absolute;right:-3%;bottom:0;width:46%;min-width:320px;z-index: 0;
}
.banner-hero img{width:400px;height:auto;}

/* レスポンシブ */
@media(max-width:880px){
  .banner {
    margin: 0 10px;
  }
  .banner-hero{display:none;}
  .banner-badges{justify-content:center;}
  .banner-left{justify-content:center;}
  .banner-title,
  .banner-catch{text-align:center; font-size: 1.5rem; width: 92%; margin: 0 auto 30px;}
  .banner-btn {
    width: 100%;
  }
  .banner-btn2 {
    margin-top: 20px;
    width: 100%;
  }
  .banner-btn {
    padding: 14px 25px;
  }
  .banner-btn2 {
    padding: 14px 25px;
  }
}



/* ========== 作業の流れ (wf-) ========== */
.wf-flow{
  position: relative;          /* ← 擬似要素の基準点 */
  max-width: 720px;            /* コンテンツ幅はそのまま中央寄せ */
  margin: 4rem auto 0;
  padding: 1rem 1rem;
  /* ↓ 角丸やシャドウは不要なら削除 */
  /* border-radius: 0; */
  /* box-shadow: none; */
}

/* 背景だけ 100vw まで広げる */
.wf-flow::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;                /* ビューポート全幅 */
  height: 100%;
  transform: translateX(-50%); /* 中央基準で左右に広げる */
  background:
    linear-gradient(rgba(253,251,248,0.9),rgba(253,251,248,0.9)), /* ← opacity 調整は 0〜1 で */
    url('images/flow-back.png') center / cover no-repeat;
  z-index: -1;                 /* コンテンツの背面へ */
}
.wf-flow-container{
  max-width:720px;
  margin:4rem auto;
  padding:0 1rem 5rem;
  text-align:center;
  background:#fdfbf8;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.wf-title{
  font-size:2.4rem;
  font-weight:900;
  color:#e8453c;
  letter-spacing:.15em;
  margin-bottom:.3rem;
}
.wf-leaf{font-size:1.8rem;margin-bottom:.3rem;}
.wf-sub{font-size:.9rem;margin-bottom:3rem;color:#555;}
/* STEP 共通 */
.wf-step{
  display:flex;
  gap:28px;
  align-items:flex-start;
  margin-bottom:3rem;
}
.wf-img img{
  width:160px;
  height:auto;
  border-radius:6px;
}
.wf-body{text-align:left;flex:1;}
.wf-heading{
  font-size:1rem;
  font-weight:700;
  margin-bottom:.8rem;
  position:relative;
  padding-bottom:.5rem;
}
.wf-heading::after{
  content:'';
  position:absolute;
  left:0;bottom:0;width:100%;height:2px;
  background:#c68b5d;
}
.wf-heading span{color:#e8453c;margin-right:.4em;}
.wf-body p{font-size:.85rem;line-height:1.9;color:#333;}
/* 矢印 */
.wf-arrow{
  font-size:1.1rem;
  color:#c68b5d;
  margin-bottom:3rem;
}
/* レスポンシブ */
@media(max-width:640px){
  .wf-step{flex-direction:column;align-items:center;text-align:center;}
  .wf-body{text-align:center;}
  .wf-img img{width:200px;}
}




/* ========== FAQ SECTION ========== */
.faq-section {
  max-width: 920px;
  margin: 4rem auto;
  padding: 0 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  color: #3a2a18;
}

/* 見出しと破線 */
.faq-heading {
  font-size: 1.9rem;          /* ≒30px */
  font-weight: 700;
  margin-bottom: .5rem;
  color: #5c2c00;
  text-align: left;
}
.faq-divider {
  height: 0;
  border-bottom: 3px dashed #6bbc2e;
  margin-bottom: 2rem;
}

/* Q&A リスト */
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-item {
  padding: .85rem 0;
  border-bottom: 1px dotted #b4b4b4;
}
.faq-question {
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.faq-label {
  color: #6bbc2e;
  min-width: 2.5rem;
}
.faq-answer {
  margin-top: .45rem;
  font-size: .95rem;
  line-height: 1.8;
  color: #555;
  padding-left: calc(2.5rem + .75rem); /* Q◯ と質問の幅分だけ字下げ */
}

/* スマホ文字サイズ調整 */
@media (max-width: 600px) {
  .faq-heading { font-size: 1.4rem; }
  .faq-answer  { font-size: .9rem; }
}




/* ───── お客様の声セクション ───── */
.voice-section {
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.voice-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg, rgba(200,200,200,0.2) 0px, rgba(200,200,200,0.2) 1px, transparent 1px, transparent 4px
  ),
  repeating-linear-gradient(
    90deg, rgba(200,200,200,0.2) 0px, rgba(200,200,200,0.2) 1px, transparent 1px, transparent 4px
  );
  z-index: -1;
}

/* .voice-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #e3f2fd 50%, transparent 100%);
} */

.voice-container {
  max-width: 1200px;
  margin: 0 auto;
}

.voice-title {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.voice-title h2 {
  font-size: 2.2rem;
  font-weight: 300;
  color: #2c3e50;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.voice-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #c9dfb8, #6bbc2e);
}

.voice-subtitle {
  font-size: 0.9rem;
  color: #7d8590;
  font-weight: 400;
  margin-top: 1rem;
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.voice-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 
    0 2px 20px rgba(0, 0, 0, 0.04),
    0 1px 4px rgba(0, 0, 0, 0.02);
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.voice-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 1.5rem;
  min-height: 90px;
  position: relative;
  z-index: 1;
  font-weight: 400;
}

.voice-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f3f4;
}

.voice-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #abcd90, #6bbc2e);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.voice-info {
  flex: 1;
}

.voice-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 0.2rem;
}

.voice-service {
  font-size: 0.8rem;
  color: #7d8590;
}

.voice-rating {
  display: flex;
  gap: 2px;
  margin-left: auto;
  color: gold;
}

.voice-star {
  width: 16px;
  height: 16px;
  color: #ffd700;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .voice-section {
    padding: 3rem 1rem;
  }

  .voice-title h2 {
    font-size: 1.8rem;
  }

  .voice-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .voice-card {
    padding: 1.5rem;
  }
}