/* =========================
   フォント＆タイポグラフィ調整
   ========================= */
:root{
  --font-jp: -apple-system, system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Yu Gothic UI", "YuGothic", "Meiryo", "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-heading: "MontserratLocal", var(--font-jp);
  --font-body: var(--font-jp);
}

html, body { font-family: var(--font-body) !important; }
.mbr-text,
.display-4, .display-5, .display-7,
.navbar-caption { font-family: var(--font-body) !important; }

h1, h2, h3, h4, h5, h6,
.mbr-section-title, .card-title, .display-1, .display-2 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

body, .mbr-text { line-height: 1.85; letter-spacing: 0.01em; }

/* 過大化しがちな display を控えめに */
.display-1 { font-size: clamp(2.0rem, 4.0vw, 3.2rem) !important; }
.display-2 { font-size: clamp(1.4rem, 2.8vw, 2.0rem) !important; }
.display-5 { font-size: clamp(1.0rem, 1.8vw, 1.20rem) !important; }

/* 本文サイズ */
.mbr-text.display-4 { font-size: clamp(0.95rem, 1.30vw, 1.05rem) !important; line-height: 1.95; }
.mbr-text.display-7 { font-size: clamp(0.92rem, 1.20vw, 1.00rem) !important; line-height: 1.95; }

/* 折返し/省略の抑止（テキストを隠さない） */
.mbr-section-title, .card-title, .mbr-text,
.display-1, .display-2, .display-4, .display-5, .display-7 {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
  text-overflow: clip !important;
}

/* 高さ制限・行数制限の解除（省略されないように） */
.text-wrapper, .card-box, .card-wrapper, .content-wrapper {
  overflow: visible !important;
  max-height: none !important;
}
[style*="-webkit-line-clamp"] {
  -webkit-line-clamp: unset !important;
  display: block !important;
}

/* セクション個別の微調整（あなたのHTMLのIDに合わせて） */
#features17-g .display-5,
#features17-i .display-5 {
  font-size: clamp(1.0rem, 1.7vw, 1.20rem) !important;
  font-weight: 700;
}
#features16-f .display-2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* 画像・iframeのはみ出し防止／全体余白 */
.image-wrapper img, iframe { max-width: 100%; height: auto; display: block; }
.container { max-width: 1140px; }
section { padding-top: 3rem; padding-bottom: 3rem; }

/* =========================
   背景（ヒーロー写真＆薄グレーパネル）
   ========================= */

/* ヒーロー（#header1-0）の背景写真：tomo01-3.png */
#header1-0 {
  background-image: url('assets/images/tomo01-3.png'); /* ←実ファイル名 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #e9ecef; /* 画像404時のフォールバック */
}
/* ヒーロー上の白オーバーレイ（薄く白を被せる） */
#header1-0 .mbr-overlay{
  background-color: #fff !important;
  opacity: .65 !important; /* 0.5〜0.75で調整 */
}

/* 薄いグレーパネル（スクショ2枚目の雰囲気） */
#features17-g .content-wrapper,
#features17-i .content-wrapper,
#features8-l   .container{
  background-color: #f4f5f7;
  border-radius: 12px;
  padding: 2.5rem 2.2rem;
}

/* パネル内の画像を角丸に（任意。不要なら削除可） */
#features17-g .image-wrapper img,
#features17-i .image-wrapper img{
  border-radius: 8px;
  display: block;
  max-width: 100%;
  height: auto;
}

/* パネル周りの余白を少し広げる */
#features17-g, #features17-i, #features8-l{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
/* ---- Hero 背景ファイル名の更新 ---- */
#header1-0 {
  background-image: url('assets/images/hero-gb.jpg'); /* ここを hero-gb.jpg に */
}

/* ---- #form5-d（お問い合わせ）の文字を1段階だけ小さく ---- */
#form5-d .mbr-section-title.display-2 {
  /* 既存より約1段階小さいスケール */
  font-size: clamp(1.3rem, 2.4vw, 1.8rem) !important;
}

#form5-d .mbr-section-subtitle.display-7 {
  /* 既存よりわずかに小さく */
  font-size: clamp(0.86rem, 1.1vw, 0.95rem) !important;
  line-height: 1.95; /* 読みやすさ維持 */
}

/* 余白が間延びする場合は少し詰める（任意） */
#form5-d .mbr-section-title { margin-bottom: 0.6rem !important; }
#form5-d .mbr-section-subtitle { margin-top: 0.6rem !important; }
/* ---- Hero画像の拡大率を可変にする ---- */
#header1-0{
  /* 倍率（%）。大きいほど拡大。100%が画像の原寸幅 */
  --hero-zoom: 110;
  background-size: calc(var(--hero-zoom) * 1%) auto; /* ← cover の代わり */
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* 画面幅ごとに微調整したい場合（例） */
@media (min-width: 992px){       /* PC */
  #header1-0{ --hero-zoom: 50; }  /* ← 少し縮小（“元に近い”見た目） */
}
@media (max-width: 991.98px){    /* タブレット */
  #header1-0{ --hero-zoom: 115; }  /* ← 多少拡大して隙間防止 */
}
@media (max-width: 575.98px){    /* スマホ */
  #header1-0{ --hero-zoom: 120; }  /* ← 縦長で余白が出やすいので多め */
}