/* =========================
   基本・共通
========================= */
:root{
  --tint:   #e6ffff;
  --text:   #222;
  --brand:  #007acc;
  --danger: #e53935;
  --orange: #f57c00;
}
html,body{margin:0}
body{
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic Medium","游ゴシック Medium","Yu Gothic","游ゴシック",Meiryo,sans-serif;
  color: var(--text);
  background:#fff;
}

/* 水色帯の見出し（共通） */
.points-section h2,
.voice-section h2,
.reason-heading h2,
.qa-section h2,
.flow-section h2,
.price-section h2,
.office-section h2{
  background: var(--tint);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 20px;
  margin: 0;
}

.container{max-width: 900px; margin: 0 auto; padding: 0 20px;}

/* =========================
   ヘッダー／ヒーロー
========================= */

.lp-header .wrap{max-width:1100px;margin:0 auto;padding:0 16px;}
.lp-header .eyebrow{margin:0 0 2px;font-size:12px;line-height:1.2;letter-spacing:.06em;font-weight:500;}
.lp-header h1{margin:0;font-size:20px;line-height:1.2;letter-spacing:.04em;font-weight:600;}

.hero-main{
  background: url("../image/office-bg.jpg") center/cover no-repeat;
  width: 100%;
  padding: 24px 0;
}
.hero-main img{
  max-width:1200px;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* =========================
   事務所紹介
========================= */
.about{max-width:900px;margin:60px auto;padding:0 20px;text-align:center;}
.about h2{
  font-size:1.6rem;font-weight:700;margin-bottom:20px;position:relative;display:inline-block;padding:0 20px;
}
.about h2::before,.about h2::after{
  content:"";position:absolute;top:50%;width:40px;height:2px;background:#0f4c3a;
}
.about h2::before{left:-50px;}
.about h2::after{right:-50px;}
.about p{font-size:.95rem;color:#333;line-height:1.8;text-align:left;}

/* =========================
   丸アイコン（汎用）
========================= */
.features{
  --circle-size: 150px;
  --circle-bg: #E0FFFF;
  --circle-color: #333;
  display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-bottom:20px;
}
.feature-item{
  width: var(--circle-size);
  aspect-ratio: 1 / 1;
  height: auto;
  flex: 0 0 var(--circle-size);
  background: var(--circle-bg);
  color: var(--circle-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.features-box{
  max-width:900px;margin:50px auto;padding:30px 20px;background:#F4FDFF;text-align:center;border-radius:6px;
}
.notes{font-size:18px;margin:10px 0 15px;color:#333;}
.notes .red{color:#d00;font-weight:700;}
.hours{font-size:16px;font-weight:700;display:inline-block;background:yellow;padding:5px 10px;}

.cta-block{text-align:center;margin:40px auto;}
.cta-block .cta-img{max-width:940px;width:100%;height:auto;display:block;margin:0 auto;}

/* =========================
   4つのポイント
========================= */
.points-wrapper{max-width:900px;margin:50px auto;padding:0 20px;}
.point-item{display:flex;align-items:flex-start;margin-bottom:30px;}
.point-number{
  flex-shrink:0;width:50px;height:50px;border-radius:50%;background:var(--tint);
  color:#0b80c4;font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-right:15px;
}
.point-content{flex:1;}
.point-content h3{margin:0 0 8px;font-size:1.1rem;color:#0b80c4;font-weight:700;}
.point-content p{margin:0;font-size:.95rem;color:#333;line-height:1.6;}

/* =========================
   お客様の声（Voice）— Flexで統一
========================= */
.voice-section{padding:28px 16px;text-align:center;background:var(--tint);}
.voice-section h2{letter-spacing:.04em;}
.voices{max-width:1000px;margin:20px auto 40px;padding:0 16px;}

.voice-card{
  display:flex;
  gap:20px;
  border:2px solid #00c0c8;
  border-radius:12px;
  padding:20px;
  background:#fff;
  margin-bottom:22px;
  overflow:hidden;
  box-sizing:border-box;
}
.voice-profile{
  flex:0 0 220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.profile-circle{
  width:160px;height:160px;border-radius:50%;background:var(--tint);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.35;font-weight:700;color:#333;box-sizing:border-box;
}
.profile-circle .role{font-size:1rem;}
.profile-circle .age {font-size:1.3rem;}
.profile-circle .area{font-size:1rem;}
.days{margin-top:10px;text-align:center;}
.days-label{font-size:.9rem;color:#666;}
.days-num{font-size:1.2rem;font-weight:800;color:#e60000;}

.voice-content{flex:1 1 auto;min-width:0;}
.voice-content .title{font-weight:700;margin:0 0 8px;padding-bottom:6px;border-bottom:3px solid #777;font-size:1rem;}
.voice-content .dots{font-size:1rem;color:#333;line-height:1.9;letter-spacing:.15em;margin:0;}

/* =========================
   選ばれる理由（タグ／矢印）
========================= */
.reason-heading{padding:25px 15px;background:var(--tint);text-align:center;}
.reason-subtitle{text-align:center;margin:25px 15px;}
.reason-subtitle h3{font-size:1rem;font-weight:400;margin:0;line-height:1.6;}
.reason-subtitle h3 span{color:red;font-weight:700;}

.trouble-tags{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px;max-width:1100px;margin:25px auto 0;padding:0 20px;
}
.trouble-tags span{
  display:flex;justify-content:center;align-items:center;background:#f0fafa;border-radius:20px;
  padding:12px 20px;font-size:.95rem;line-height:1;white-space:nowrap;
}
.trouble-tags .blue{color:var(--brand);font-weight:700;}
.trouble-tags .yellow{background:#ffff99;font-weight:700;}

.highlight-text{text-align:center;font-size:1.1rem;font-weight:700;color:var(--brand);margin:18px 0 6px;}
.highlight-arrow{
  width:0;height:0;margin:0 auto 6px;border-left:22px solid transparent;border-right:22px solid transparent;border-top:22px solid #ffeb3b;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

/* =========================
   solutions（3つの説明ボックス）
========================= */
.solutions{max-width:900px;margin:26px auto 0;padding:0 20px;}
.solution-item{padding:16px 10px 18px;border-top:2px solid #cfeeee;background:#fff;}
.solution-item:last-child{border-bottom:2px solid #cfeeee;}
.solution-item h3{margin:0 0 8px;font-size:1.05rem;font-weight:800;line-height:1.3;}
.solution-item.red h3{color:var(--danger);}
.solution-item.orange h3{color:var(--orange);}
.solution-item p{margin:0;font-size:.92rem;color:#5a5a5a;line-height:1.8;}

/* =========================
   Q&A
========================= */
.qa-section{margin:60px 0;}
.qa-wrapper{max-width:900px;margin:0 auto;padding:20px;}
.qa-item{border-bottom:1px solid #ddd;padding:18px 0;}
.qa-item:last-child{border-bottom:none;}
.qa-item .q{font-weight:700;margin:0 0 8px;display:flex;align-items:flex-start;font-size:1rem;}
.qa-item .q span{color:#f5a623;font-weight:700;margin-right:8px;font-size:1.2rem;}
.qa-item .a{margin:0;display:flex;align-items:flex-start;font-size:.95rem;line-height:1.6;}
.qa-item .a span{color:#d00;font-weight:700;margin-right:8px;font-size:1.2rem;}

/* =========================
   解決までの流れ
========================= */
.flow-wrapper{max-width:900px;margin:40px auto;padding:0 20px;}
.flow-item{display:flex;align-items:flex-start;margin-bottom:30px;}
.flow-number{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#00bfff;color:#fff;
  font-weight:700;font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin-right:15px;
}
.flow-content h3{margin:0 0 6px;font-size:1.1rem;font-weight:700;color:#333;}
.flow-content p{margin:0;font-size:.95rem;line-height:1.6;}
.highlight{background:linear-gradient(transparent 60%, #ffff66 60%);}

/* =========================
   料金体系（featuresを再利用）
========================= */
.price-box{max-width:700px;margin:40px auto;padding:30px 20px;background:#f9f9f9;border:1px solid #ccc;text-align:center;}
.price-box .features{
  --circle-size: 120px;
  --circle-bg: #e6ffff;
  --circle-color: var(--brand);
}
.notes .label{
  display:inline-block;background:var(--brand);color:#fff;padding:2px 6px;border-radius:4px;font-size:.85rem;
}
.caution{font-size:.85rem;color:#666;margin-top:8px;}

/* =========================
   事務所概要
========================= */
.office-table{
  width:90%;max-width:800px;margin:30px auto;border-collapse:collapse;font-size:.95rem;color:#333;
}
.office-table th,.office-table td{padding:12px 15px;border:1px solid #ccc;text-align:left;}
.office-table th{background:#f0f0f0;width:25%;font-weight:700;}

/* =========================
   フッター
========================= */
.site-footer{background:var(--tint);text-align:center;padding:15px 10px;margin-top:40px;}
.site-footer p{margin:0;font-size:.9rem;color:#333;letter-spacing:.05em;}

/* =========================
   レスポンシブ
========================= */
@media (max-width: 768px){
  .features{gap:15px;}
  .feature-item{font-size:16px;}
  .point-item{align-items:flex-start;}
  .point-number{width:40px;height:40px;font-size:1.1rem;margin-right:10px;}
  .point-content h3{font-size:1rem;}
  .point-content p{font-size:.9rem;}

  /* Voice：モバイルは1カラム */
  .voice-card{display:block;padding:16px;}
  .voice-profile{flex:none;width:100%;align-items:center;text-align:center;margin:0 0 8px;}
  .profile-circle{width:130px;height:130px;max-width:48vw;max-height:48vw;margin:0 auto;}
  .voice-content .title{margin-top:6px;}
}

@media (max-width: 640px){
  .trouble-tags{grid-template-columns:1fr;}
  .trouble-tags span{white-space:normal;}

  .flow-item{flex-direction:column;align-items:flex-start;}
  .flow-number{margin-bottom:8px;}

  .office-table th,.office-table td{display:block;width:100%;box-sizing:border-box;}
  .office-table tr{margin-bottom:10px;display:block;border-bottom:2px solid #ccc;}
  .office-table th{background:var(--tint);}

  /* ▼ 修正：モバイルの丸アイコン（相談料無料・年中無休）を2列センターに */
  .features-box .features{
    --gap: 12px;
    display:flex;
    flex-wrap: wrap;           /* 折り返し可 */
    justify-content: center;   /* 中央寄せ */
    gap: var(--gap);
    width:100%;
    box-sizing:border-box;
  }
  .features-box .feature-item{
    --circle-size: calc((100% - var(--gap)) / 2); /* 2列 */
    width: var(--circle-size);
    flex: 0 0 var(--circle-size);
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.2;
  }
}

@media (max-width: 480px){
  .lp-header .wrap{padding:0 12px}
  .lp-header .eyebrow{font-size:11px}
  .lp-header h1{font-size:18px}
  .hero-main{padding:16px 0;}
}

@media (max-width: 360px){
  /* かなり狭い端末ではサイズを少し抑える */
  .features-box .feature-item{
    --circle-size: min(130px, 46vw);
  }
  .profile-circle{width:115px;height:115px;}
  .voice-content .dots{font-size:.95rem;line-height:1.8;}
}

/* モバイルの丸内テキストを少し大きく・行間も改善 */
@media (max-width: 640px){
  .features-box .feature-item{
    font-size: clamp(14px, 5.2vw, 18px); /* ← 以前: clamp(12px, 3.6vw, 14px) */
    line-height: 1.35;
    letter-spacing: 0.02em;
  }
}

/* かなり狭い端末(～360px)ではさらに最適化 */
@media (max-width: 360px){
  .features-box .feature-item{
    font-size: clamp(13px, 5.8vw, 17px);
    line-height: 1.35;
  }
}

  /* PC/タブレット(768px以上)では既存CTAを表示、モバイルCTAは隠す */
  .cta-block{display:block;}
  .cta-block--sp{display:none;}

  /* モバイル(～767px)では既存CTAを隠し、モバイルCTAを表示 */
  @media (max-width: 767px){
    .cta-block{display:none;}
    .cta-block--sp{
      display:block;
      padding: 16px 12px;
      background: #fff;
    }
    .cta-sp-img{
      display:block;
      width:100%;
      height:auto;
      margin:0 0 12px;
      border-radius:8px;
    }
  }
/* 共通：ヘッダー行をフレックス化 */
.lp-header .wrap{
  display:flex;
  align-items:center;
}

/* モバイル：中央寄せ */
@media (max-width: 767px){
  .lp-header .wrap{ justify-content:center; text-align:center; }
  .lp-header .brand{ display:inline-flex; margin:0 auto; }
  .lp-header .brand img{ width:240px; height:auto; } /* 例：実寸に合わせて調整 */
}

/* タブレット/PC：左寄せ（従来どおり） */
@media (min-width: 768px){
  .lp-header .wrap{ justify-content:flex-start; }
  .lp-header .brand img{ width:340px; height:auto; } /* 例：実寸に合わせて調整 */
}

/* 料金テーブル画像：幅に応じて縮小、中央寄せ */
.price-table-figure{
  margin: 10px auto 0;        /* notesのすぐ下なので余白は控えめ */
  padding: 0;
  text-align: center;
  max-width: 720px;           /* 画像の最大表示幅の上限 */
}
.price-table-img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  background: #fff;           /* 透過PNGでも下地が白に */
}

/* スマホでは親ボックスに合わせて自然に縮むので特に指定不要 */

@media (max-width: 640px){
  .office-logo{
    display:block;
    margin: 0 auto 8px; /* 中央寄せ＋ロゴ下に少し余白 */
  }
}
/* 単語途中の折り返しを防ぐ */
.nowrap{ white-space: nowrap; }

/* PC/タブレットでは従来どおり横並び */
.notes .fee-block{ display: inline; }

/* モバイル時だけ “報酬 …” を改行＆中央寄せ */
@media (max-width: 640px){
  .notes .fee-block{
    display: block;         /* ← ここで改行 */
    text-align: center;     /* 行だけ中央 */
    margin-top: 4px;
  }
}