/* =========================================================
   home.css  (clean structured v20250816)
   - 役割ごとにセクション化
   - 重複/競合を整理
   - .top-services を明示
   - .bancho-kyoso のはみ出し/改行対策を維持
   ========================================================= */

/* ============ Tokens ============ */
:root{
  --container-w: min(960px, 92vw);
}

/* ============ Base helpers ============ */
img,video,iframe{ max-width:100%; height:auto; display:block; }
.main-container{ width:var(--container-w); margin:0 auto; }

/* ============ Hero ============ */
.hero{
  padding:48px 0 16px;
  position:relative;
  background: radial-gradient(1200px 400px at 50% -6%,
              color-mix(in oklab, var(--accent) 10%, transparent) 0%,
              transparent 60%);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 340px at 50% 0%,
               rgba(0,0,0,.32) 0%, rgba(0,0,0,.18) 45%, transparent 70%);
  pointer-events:none;
}
.hero .main-container{ position:relative; text-align:center; }
.hero h1{
  font-weight:800; font-size:clamp(24px,3.2vw,34px);
  line-height:1.25; margin:0 0 .35em; color:#000; text-shadow:none;
}
.hero .subcopy{
  font-weight:700; letter-spacing:.02em;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.7; max-width:820px;
  margin:0 auto .9rem; color:#005c38;
}
/* ここを置き換え */
.hero p{
  color:#005c38;
  text-shadow:none;
  line-height:1.9;
  /* word-break:keep-all; ←これが原因 */
  word-break: normal;           /* 通常の改行規則に戻す */
  overflow-wrap: anywhere;      /* 長い語やURLも折り返す保険 */
  line-break: auto;             /* CJKの改行も自然に */
  max-width:820px;
  margin:0 auto 1em;
}
.hero p + p{ margin-top:.5em; }

/* ============ Tagline & CTA (Hero内で使用) ============ */
.tagline{
  display:inline-flex; align-items:center; gap:.35em;
  background:var(--accent); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3);
  padding:.42em .9em; border-radius:.7em; font-weight:800;
}
.tagline a{ color:#fff; text-decoration:underline; }
.cta-group{ display:inline-flex; gap:14px; margin-top:.8rem; }
.cta-group a{ display:inline-flex; align-items:center; justify-content:center; padding:.9em 1.4em; line-height:1; font-weight:800; }

/* ============ Section Titles（共通） ============ */
.section-title{
  font-weight:900; font-size:clamp(22px,2.4vw,28px);
  display:inline-block; position:relative; margin:0 0 10px;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:-6px; width:56px; height:4px;
  background:var(--accent); border-radius:999px;
}
.section-lead{ color:var(--muted); margin:8px 0 18px; }

/* ============ Top Services（3カラムの特徴） ============ */
.top-services{
  max-width:var(--container-w);
  margin:18px auto 8px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.top-service{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px 16px; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .08s ease, box-shadow .18s ease;
}
.top-service:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.top-service h3{ color:var(--accent); font-weight:900; margin:0 0 6px; }
.top-service p{ color:var(--muted); line-height:1.7; margin:0; }

/* ============ Services（カードグリッド） ============ */
.services{ padding:56px 0; }
.service-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.service-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; height:100%;
  padding:14px; gap:6px; transition:transform .08s ease, box-shadow .18s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.badge{
  display:inline-block; padding:.28em .6em;
  border:1px solid #dbe9df; background:#f3f7f4; color:var(--accent);
  border-radius:999px; font-weight:700; font-size:.85rem;
}
.service-card .badge{ margin-bottom:4px; }
.service-card h3{
  font-weight:900; line-height:1.5; margin:0 0 4px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.5em * 3);
}
.service-card p{
  color:var(--muted); line-height:1.8; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.8em * 3);
}
.service-card .link-button{ margin-top:auto; }

/* ============ CTA（共通） ============ */
.cta{ padding:64px 0 80px; text-align:center; }
.cta p{ color:var(--muted); margin:8px 0 16px; }

/* ============ YouTube Block ============ */
.video-block{ padding:48px 0; }
.video-container{ position:relative; width:100%; padding-bottom:56.25%; height:0; }
.video-container iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-cta{ margin-top:16px; text-align:center; }
.video-cta .cta-button:hover{ opacity:.85; }

/* ============ Flow（導入の流れ） ============ */
.flow{ padding:36px 0; }
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.flow-step{ padding:16px; }
.flow-step .step-badge{
  display:inline-block; font-weight:900; font-size:.85rem;
  color:#fff; background:var(--accent); border-radius:999px; padding:4px 10px; margin-bottom:8px;
}
.flow-step h3{ font-weight:900; margin:0 0 6px; }
.flow-step p{ color:var(--muted); }

/* ============ Trust（信頼） ============ */
.trust{ padding:32px 0; }
.trust-badges-rows{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:10px;
}
.trust-badge{ padding:16px; }
.trust-badge .kicker{
  display:inline-block; font-weight:900; font-size:.8rem; letter-spacing:.04em;
  color:var(--accent); background:var(--surface); border:1px solid var(--border);
  padding:4px 8px; border-radius:999px; margin-bottom:6px;
}
.trust-logos{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.trust-logos img{ height:26px; width:auto; filter:grayscale(1) contrast(1.15); opacity:.9; }

/* ============ FAQ ============ */
.faq{ padding:32px 0 24px; }
.faq-list{ display:grid; gap:10px; }
.faq-item{
  border:1px solid var(--border); border-radius:var(--radius); background:#fff;
  padding:10px 14px;
}
.faq-item summary{
  list-style:none; cursor:pointer; font-weight:800; display:flex; align-items:center; gap:8px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary span{ flex:1; }
.faq-item summary::after{ content:"＋"; font-weight:900; line-height:1; transform:translateY(-1px); }
.faq-item[open] summary::after{ content:"－"; }
.faq-item .answer{ margin-top:8px; color:var(--muted); }

/* ============ Model summary（未使用なら削除OK） ============ */
.model-summary{ padding:40px 0; position:relative; }
.model-summary .main-container{ text-align:center; position:relative; display:inline-block; }
.model-summary img{ width:var(--container-w); margin:16px auto; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); }
.model-summary .overlay{
  position:absolute; inset:0; background:rgba(0,0,0,0.4); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px; border-radius:var(--radius-lg);
}
.model-summary .overlay h2{ font-size:1.8rem; font-weight:700; margin:0 0 .6em; text-align:center; }
.model-summary .overlay p{ font-size:1rem; margin:0 0 1.2em; text-align:center; }
.model-summary .overlay .link-button{
  background: var(--accent); color:#fff; padding:.8em 1.4em; border-radius:.5em; font-weight:700; text-decoration:none; transition: transform .2s ease, background .2s ease;
}
.model-summary .overlay .link-button:hover{ background: color-mix(in oklab, var(--accent) 85%, black); transform: translateY(-1px); }

/* ============ Bancho/Kyoso（伴走と共創） ============ */
.bancho-kyoso{ padding:40px 0; background:#fafafa; overflow:hidden; } /* 影のにじみもクリップ */
.bancho-kyoso > .main-container,
.bancho-kyoso > .container{
  width:100%; max-width:var(--container-w); margin:0 auto; padding:0 16px; box-sizing:border-box;
}
.bancho-kyoso h2{
  font-weight:900; font-size:clamp(20px,2.4vw,26px);
  margin:0 0 6px; text-align:center;
}
.bancho-kyoso .intro{
  max-width:820px; margin:8px auto 18px;
  color:var(--muted); line-height:1.8; text-align:center;
}
/* 2カラム→モバイル1カラム */
.bancho-kyoso .values-grid{
  width:100%; max-width:100%; margin:18px 0 0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; box-sizing:border-box;
}
.bancho-kyoso .value-item{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:16px 18px; display:flex; flex-direction:column; gap:6px;
  text-align:left; box-sizing:border-box; overflow:hidden; min-width:0;
}
.bancho-kyoso .value-item h3{
  color:var(--accent); font-weight:900; font-size:1.06rem;
  margin:0 0 2px; text-align:center;
}
.bancho-kyoso .value-item p{
  margin:0; color:var(--muted); line-height:1.8;
}
/* 日本語でも確実に改行（保険） */
.bancho-kyoso .value-item h3,
.bancho-kyoso .value-item p{
  overflow-wrap:anywhere; word-break:normal; line-break:auto;
}

/* ============ Section spacing fine-tune（Top専用） ============ */
#services .cta{ padding:12px 0 10px; }
#services{ padding-bottom:16px; }
#news{ padding-top:16px; }

/* ============ Responsive ============ */
@media (max-width:900px){
  /* Hero spacing */
  .hero{ padding:40px 0 14px; }
  .hero h1{ margin-bottom:.30em; }
  .hero .subcopy{ margin-bottom:.75rem; }
  .hero p{ line-height:1.85; margin-bottom:.85em; }
  .hero p + p{ margin-top:.40em; }

  /* Services grid */
  .service-grid{ grid-template-columns:1fr 1fr; }
  /* Top-services grid */
  .top-services{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  .bancho-kyoso .values-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  /* Services grid */
  .service-grid{ grid-template-columns:1fr; }

  /* Top-services grid */
  .top-services{ grid-template-columns:1fr; }

  /* clamp解除（可読性優先） */
  .service-card h3{ -webkit-line-clamp:unset; min-height:auto; }
  .service-card p { -webkit-line-clamp:unset; min-height:auto; }

}

@media (max-width:420px){
  .hero{ padding:32px 0 10px; }
  .hero .subcopy{ font-size:14px; }
  .hero p{ font-size:14px; line-height:1.7; }
}


/* 3カードグリッド */
.svc-grid{
  display:grid; gap:14px; margin:12px 0 10px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .svc-grid{ grid-template-columns:1fr; } }

/* カード */
.svc-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.svc-card h3{ font-weight:900; line-height:1.5; margin:0; overflow-wrap:anywhere; }
.svc-card p{ color:var(--muted); line-height:1.8; margin:0; overflow-wrap:anywhere; }
.svc-card .cta-button{ margin-top:auto; }

/* 図・注釈 */
.svc-note{ color:var(--muted); line-height:1.8; margin:6px 0 12px; }
.svc-figure img{ width:100%; height:auto; display:block; border-radius:12px; }
.svc-figure figcaption{ text-align:center; margin-top:6px; color:var(--muted); font-weight:700; }


#services .main-container{
  text-align: center;  /* 全体を中央揃え */
}
.svc-card { text-align:left; }


.model-diagram{
  margin:28px auto;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  text-align:center;
}
.model-diagram img{
  max-width:680px;
  width:100%;
  height:auto;
  margin:0 auto 12px;
}
.model-diagram figcaption{
  font-weight:700;
  color:var(--accent);
}



@media (max-width:640px){
  .flow-steps{
    grid-template-columns:1fr; /* 縦並び */
  }

  .flow-step{
    position:relative;
    margin-bottom:24px;
  }

  .flow-step::after{
    content:"↓";
    position:absolute;
    bottom:-18px; left:50%;
    transform:translateX(-50%);
    font-size:1.6rem;
    color:var(--accent);
  }

  .flow-step:last-child::after{
    content:none; /* 最後は矢印を消す */
  }
}

@media (max-width: 640px){
  .trust-grid {
    grid-template-columns: 1fr;  /* 横並び → 縦並び */
  }
  .trust-card + .trust-card {
    margin-top: 10px; /* カード間の余白 */
  }
}
/* 信頼と体制：スマホでは縦1列に */
@media (max-width: 900px){
  .trust .trust-grid,
  .trust .cards,
  .trust .values-grid,
  .trust-badges-rows{
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px){
  .trust .trust-grid,
  .trust .cards,
  .trust .values-grid,
  .trust-badges-rows{
    grid-template-columns: 1fr !important;
  }
}

/* 余白が足りないときの保険（gap未指定のテーマ用） */
@media (max-width: 640px){
  .trust .trust-card,
  .trust .card,
  .trust-badge{
    margin-top: 10px;
  }
  .trust .trust-card:first-child,
  .trust .card:first-child,
  .trust-badge:first-child{
    margin-top: 0;
  }
}

/* === Hero right-edge unify (desktop) =================== */
:root{ --hero-text-w: 820px; }  /* ヒーローテキストの基準幅 */

.hero p,
.hero .subcopy,
.hero .micro-kicker,
.hero .cta-group,
.hero .trust-badges{
  max-width: var(--hero-text-w);
  margin-inline: auto;          /* 中央寄せ＆右端を統一 */
  box-sizing: border-box;
}

/* 図版もテキスト幅にぴったり合わせる（92% → 100%） */
.combo-figure img{
  display:block;
  margin-inline:auto;
  width:100%;
  max-width: var(--hero-text-w);
}

/* CTAは折り返し時も中央にきれいに並べる */
.hero .cta-group{
  flex-wrap: wrap;
  justify-content: center;
}

/* バッジ列もテキスト幅の中に収める */
.trust-badges{ justify-content:center; }

/* === pill バッジをカード風に戻す ================== */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.trust-badges .pill {
  display: inline-block;
  padding: 0.5em 1em;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  font-size: 0.9rem;
  color: #005c38;
  border: 1px solid #e5e5e5;
  white-space: nowrap;
}

/* 既存 anywhere の前に fallback を入れると旧Safariでも安心 */
.hero p,
.bancho-kyoso .value-item h3,
.bancho-kyoso .value-item p,
.svc-card h3,
.svc-card p{
  overflow-wrap: break-word;   /* 先に標準fallback */
  overflow-wrap: anywhere;     /* 新しめのブラウザではこちらが効く */
}

/* ===== ニュース → 最後のCTA の余白だけ圧縮 ===== */

/* ニュースの下を少しだけ詰める */
#news{ padding-bottom: 8px; }

/* ニュース直後の CTA の上余白を小さく、下も少しだけ短めに */
#news + .cta{
  padding-top: 28px;   /* 既定 64px → 28px に */
  padding-bottom: 56px;/* 既定 80px → 56px に */
}

/* 最後のCTAがフッター直前に来る時は、下余白をさらに少し詰める */
#news + .cta:last-of-type{
  padding-bottom: 48px;
}

/* モバイルではもう少しだけ詰める（見た目の一体感重視） */
@media (max-width:640px){
  #news + .cta{ padding-top: 22px; padding-bottom: 44px; }
  #news + .cta:last-of-type{ padding-bottom: 40px; }
}

/* 現状：左寄せ */
.bancho-kyoso .value-item{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:16px 18px; display:flex; flex-direction:column; gap:6px;
  /* text-align:left; ← ここを消す or 上書き */
  box-sizing:border-box; overflow:hidden; min-width:0;
}

/* 追加：このブロックのカードは中央寄せに */
.bancho-kyoso .value-item{ text-align:center; }

/* 見やすさ向上：本文の行幅を少し絞って中央配置 */
.bancho-kyoso .value-item p{
  text-align:center;                 /* 念のため明示 */
  margin:0 auto;                     /* 中央寄せ */
  max-width:38ch;                    /* 行幅を適度に制限（お好みで36?42ch） */
}

/* 見出しは既に center 指定済だが、保険で維持 */
.bancho-kyoso .value-item h3{ text-align:center; }


/* --- YouTube動画のレスポンシブ強化 --- */
.video-container{
  position:relative;
  width:100%;
  aspect-ratio:16/9; /* モダンブラウザ用 */
  background:#000;
}
.video-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
@supports not (aspect-ratio: 16/9){
  .video-container{ padding-bottom:56.25%; height:0; }
}

/* CTAとの余白を少し広めに */
.video-cta{ margin-top:24px; }

/* Hero内の本文を微調整（読みやすさ） */
.hero .subcopy{ font-size:15px; }
.hero p{ font-size:16px; line-height:1.9; }