:root{
  --green:#A8E472;         /* メイン：若葉のような黄緑 */
  --green-light:#E6F8D9;   /* 淡い黄緑：背景 */
  --green-dark:#7AC64A;    /* 濃いめのグリーン：ボタン・リンク */

  --yellow:#FFD85C;        /* アクセント：明るいイエロー */
  --yellow-light:#FFF3C4;  /* 淡いイエロー：背景にやさしく */
  --yellow-dark:#E17B6E;   /* 濃いイエロー：見出しや強調 */

  --pink:#F9C6D0;          /* 補助：やさしいピンク */
  --pink-light:#FDE7EC;    /* ペールピンク：背景装飾 */
  --pink-dark:#F39AAE;     /* 濃いピンク：リストマークや小見出し */

  --base:#FFFFFF;          /* 基本背景 */
  --tint:#FAFFF5;          /* 全体トーンをやさしくする淡い生成り＋黄緑 */
  --ink:#333333;           /* 文字色（基本） */
  --ink-2:#555555;         /* 文字色（サブ） */

  --radius-xl:20px;
  --shadow:0 8px 24px rgba(0,0,0,.06);

  /* エイリアス（旧blue対応） */
  --blue: var(--green-dark);
  --blue-light: var(--green-light);
}



*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"M PLUS Rounded 1c",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  line-height:1.8;
  background:var(--base)
}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.header-inner{
  max-width:1200px;margin:auto;
  display:flex;align-items:center;gap:24px;
  padding:12px 20px
}
.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink)
}
.brand-logo{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--green-light),var(--pink));
  display:grid;place-items:center;
  color:#fff;font-weight:800
}
.brand-name{font-weight:800;letter-spacing:.02em}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--green)}
.tel{color:var(--yellow-dark);text-decoration:none;font-weight:800;font-size: 1.5em;}

/* Button */
.btn{
  display:inline-block;padding:12px 22px;
  background:var(--green);color:#fff;
  text-decoration:none;border-radius:999px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(139,200,160,.25)
}
.btn:hover{background:var(--green-light)}
.btn-outline{
  background:#fff;color:var(--pink-dark);
  border:2px solid var(--pink-dark)
}

/* Section */
.section{padding:72px 20px}
.container{max-width:1100px;margin:auto}

/* Hero */
.hero{background:linear-gradient(180deg,var(--tint),#fff 70%)}
.hero-grid{text-align: center;}
.hero h1{font-size:clamp(22px,3.2vw,36px);line-height:1.4;margin:.3em 0}
.lead{color:var(--ink-2)}
.kicker{color:var(--pink-dark);font-weight:800;letter-spacing:.06em}

/* Heading */
.h2{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:800;margin:0 0 30px;
  display:flex;align-items:center;gap:12px
}
.h2::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--pink-dark)
}
.sub{color:var(--ink-2);margin-top:-8px}

/* Grid */
.grid-3{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}

/* Card */
.card{
  background:#fff;border-radius:var(--radius-xl);
  box-shadow:var(--shadow);padding:22px
}
.badge{
  display:inline-block;background:var(--pink);color:#7a3b2d;
  font-weight:700;border-radius:999px;
  padding:6px 12px;font-size:.9rem
}
.checklist{padding-left:1.2em}
.checklist li{margin:.25em 0}
.note{font-size:.95rem;color:var(--ink-2)}

/* Block */
.block{
  background:var(--tint);border-radius:var(--radius-xl);padding:24px
}

/* Flow */
.flow{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);counter-reset:step}
.flow .step{
  background:var(--tint);border-radius:var(--radius-xl);
  padding:20px;position:relative;border:2px solid #ffe3da
}
.flow .step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-14px;left:-14px;
  width:38px;height:38px;border-radius:50%;
  background:var(--green);color:#fff;
  display:grid;place-items:center;font-weight:800;
  box-shadow:0 6px 16px rgba(139,200,160,.25)
}

/* FAQ */
.faq summary{font-weight:700;cursor:pointer}

/* Avatar */
.avatars{display:flex;gap:16px;flex-wrap:wrap}
.avatar{
  width:84px;height:84px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--green-light))
}

/* Form */
.form{
  background: var(--tint);border-radius:24px;
  box-shadow:var(--shadow);padding:24px
}
.input{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1.5px solid #ddd;font:inherit
}
.input:focus{
  outline:3px solid rgba(139,200,160,.25);
  border-color:var(--green)
}
textarea.input{min-height:140px;resize:vertical}

/* CTA Bar */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:none;gap:10px;padding:10px 12px;
  background:rgba(255,255,255,.96);
  box-shadow:0 -6px 18px rgba(0,0,0,.08)
}

/* Footer */
.footer{background:var(--yellow-dark);padding:20px 20px;color:#fff;text-align: center;}
/* フッターのリンク集をボタン風に中央配置 */
.footer .links {
  display: flex;
  justify-content: center;  /* 中央寄せ */
  gap: 16px;                /* ボタン間の余白 */
  margin-top: 20px;
  flex-wrap: wrap;          /* スマホで折り返し */
}

.footer .links a {
  display: inline-block;
  padding: 10px 20px;
  background: var(--green);     /* ボタン色（テーマカラー） */
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;         /* 丸み */
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  transition: background .2s ease, transform .1s ease;
}

.footer .links a:hover {
  background: var(--green-dark); /* ホバー時濃い色 */
  transform: translateY(-2px);   /* 少し浮く */
}

.footer .links a:active {
  transform: translateY(1px);    /* クリック時沈む */
}
.footer .copy{ font-size:0.8em;margin-top:1em;}
/* Responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .cta-bar{display:flex}
  body{padding-bottom:76px}
}

.grid-2, .grid-3 {
  grid-template-columns: 1fr !important;
}
.flow { grid-template-columns: 1fr !important; }

/* ========== Fancy blocks ========== */

/* セクション見出しを少しリッチに */
.h2{position:relative;padding-left:36px}
.h2::before{content:"";position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 35%, transparent 36%) , var(--pink-dark);
  box-shadow:0 4px 10px rgba(0,0,0,.06)}

/* メディアカード（アイコンやイラスト＋本文の横並び/縦並び） */
.media{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:flex-start}
.media .icon{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,var(--green-light),var(--pink));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;
  box-shadow:0 8px 20px rgba(0,0,0,.08)
}
.media p{margin:0}

/* タグ(チップ)の集合 */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;background:#fff;border:1.5px dashed #f0c9be;
  box-shadow:0 6px 14px rgba(0,0,0,.04);font-weight:600
}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--green)}

/* ナンバリングタイムライン（ご利用の流れ） */
.timeline{position:relative;margin-left:20px}
.timeline::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:4px;background:linear-gradient(var(--green),transparent);border-radius:4px}
.stepline{position:relative;background:#fff;border-radius:16px;padding:18px 18px 18px 56px;margin:16px 0;border:1.5px solid #ffe3da;box-shadow:var(--shadow)}
.stepline::before{
  content:attr(data-step);position:absolute;left:-4px;top:14px;width:40px;height:40px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 20px rgba(139,200,160,.25)
}

/* FAQを吹き出し風に */
.faq summary{list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary{position:relative;padding-left:28px}
.faq summary::before{content:"？";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:12px}

/* コラムカード（おすすめ/困りごと を“長い箇条書き”から脱却） */
.col-card{background:#fff;border-radius:20px;border:1.5px solid #f3d5cf;box-shadow:var(--shadow);padding:24px}
.col-card h3{margin:0 0 12px;font-size:1.1rem}
.pictos{display:grid;gap:12px}
.pictos li{display:flex;align-items:flex-start;gap:10px}
.pictos li .leaf{flex:0 0 14px;height:14px;border-radius:4px;background:conic-gradient(from 45deg, var(--green) 0 50%, var(--pink) 0 100%)}

/* サービスの“3要素”を縦積みでも飽きさせない */
.service-block{display:grid;gap:16px}
.service-block .card{padding:18px}
.service-block .card .title{display:flex;align-items:center;gap:10px;font-weight:800}
.service-block .card .title .s{width:14px;height:14px;border-radius:4px;background:var(--pink-dark)}
.service-block ul{margin:10px 0 0}

/* 求人のヒーロー帯をほんのり立体に */
.recruit-band{background:var(--tint);border:1.5px solid #ffd9cf;border-radius:18px;padding:18px;box-shadow:inset 0 10px 30px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.05)}

/* 困りごとセクション */
.trouble-card{text-align:center}
.trouble-illust{
  max-width:420px;
  width:100%;
  margin:0 auto 24px;
  display:block;
  border-radius:20px;
}
.trouble-list{
  max-width:600px;
  margin:0 auto;
  text-align:left;
}
.trouble-note{text-align:center;margin-top:16px}

.trouble-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:center;
}
.trouble-list{margin:0}
@media(max-width:768px){
  .trouble-wrap{grid-template-columns:1fr}
  .trouble-illust{max-width:100%;margin-bottom:20px}
}
.target-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:center;
}
.target-illust{
  width:100%;
  max-width:500px; /* ← イラスト大きめ */
  margin:0 auto;
  border-radius:20px;
}
.target-list{margin:0}
@media(max-width:768px){
  .target-wrap{grid-template-columns:1fr}
  .target-illust{max-width:100%;margin-bottom:20px}
}
/* ===========================
   背景パターン基盤（全幅リピート）
   =========================== */

/* セクション背景のベース（画面いっぱいにパターンを敷く） */
.section-bg{
  /* カスタムプロパティでパターンを切替・調整できる */
  --pat-img: none;              /* 背景画像のURLを入れる */
  --pat-size: auto;             /* パターンのサイズ（px / % / auto） */
  --pat-opacity: 1;             /* パターンの不透明度 0〜1 */
  position: relative;
  isolation: isolate;           /* 内部のオーバーレイを独立させる */
  background-image: var(--pat-img);
  background-repeat: repeat;
  background-position: top left;
  background-size: var(--pat-size);
}

/* 透過をコントロールしたい場合のオーバーレイ（任意） */
.section-bg::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255, calc(1 - var(--pat-opacity)));
  z-index:-1;
}

/* セクション内のコンテンツ面（背景・余白・角丸） */
.section-surface{
  --surface-bg: rgba(255,255,255,.86);
  --surface-radius: 20px;
  --surface-shadow: 0 8px 24px rgba(0,0,0,.06);
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 60px;
  background: var(--surface-bg);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}

/* “素のまま”見せたい場合は背景なしに */
.surface-none{ background: transparent; box-shadow: none; padding: 0 }

/* ===== パターン別（URLをセットするだけ） ===== */
.pat-wood{
  --pat-img: url('../img/pat/wood.png');
}
.pat-wood2{
  --pat-img: url('../img/pat/wood2.png');
}
.pat-fabric{
  --pat-img: url('../img/pat/fabric.png');
}
.pat-plaster{
  --pat-img: url('../img/pat/plaster.png');
}
.pat-plaster-beige{
  --pat-img: url('../img/pat/plaster-beige.png');
}
.pat-wall-khaki{
  --pat-img: url('../img/pat/wall-khaki.png');
}

/* ===== パターンの“密度”を変えるユーティリティ ===== */
.pat-xs{ --pat-size: 128px }
.pat-sm{ --pat-size: 192px }
.pat-md{ --pat-size: 256px }   /* 既定に近い */
.pat-lg{ --pat-size: 384px }
.pat-xl{ --pat-size: 512px }

/* ===== パターンの“薄さ”を調整（0=真っ白, 1=そのまま） ===== */
.pat-faint{   --pat-opacity: .75 }
.pat-softer{  --pat-opacity: .6 }
.pat-softest{ --pat-opacity: .5 }

/* ===== セクション上下の余白を気持ち広めに ===== */
 .section.section-bg{ padding: 72px 20px }   /* 既存.sectionと同値なら不要 */

  #service .card{
 display:grid;gap:20px;grid-template-columns:1fr 300px;align-items:center;
 }

/* FAQ：常時オープン表示 */
.faq-open .faq-item{
  background:#fff;
  border-radius:14px;
  padding:16px 18px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.faq-q{margin:0 0 6px;font-weight:700}
.faq-a{margin:0;color:var(--ink-2)}
/* 旧アコーディオンのdetails装飾があれば無効化しておく */
.faq details{display:none}
/* FAQ 質問のスタイル強化 */
.faq-q{
  margin:0 0 8px;
  font-weight:700;
  font-size:1.2rem;             /* 標準より少し大きめ */
  color:var(--pink-dark);       /* 強調色：濃いめピンクオレンジ */
  line-height:1.6;
}
.faq-a{
  margin:0;
  color:var(--ink-2);
  font-size:1rem;               /* 標準サイズ */
}
.service-illust{
width:100%;
border-radius:16px;
max-width:480px;
}
#target .pictos li .leaf{
  background:conic-gradient(from 45deg, var(--green) 0 50%, var(--yellow) 0 100%);
}
#trouble .pictos li .leaf{
  background:conic-gradient(from 45deg, var(--pink-dark) 0 50%, var(--pink) 0 100%);
}
#service .pictos li .leaf{
  background:conic-gradient(from 45deg, var(--yellow-dark) 0 50%, var(--green) 0 100%);
}
/* 以下同様に続ける */
  /* 上段（木目） */
  .site-header .head-top{
    background-image:url('../img/pat/wood.png');background-repeat:repeat-x;
    border-bottom: 12px solid var(--yellow-dark);
  }

/* ===== PCヘッダー（1024px以上で適用） ===== */
@media (min-width:1024px){

  .site-header{position:relative;z-index:100}

  .site-header .head-top .wrap{
    max-width:1200px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .site-header .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
  .site-header .brand-mark{height:75px;width:auto;display:block}
  .site-header .brand-text{font-weight:800;letter-spacing:.02em;white-space:nowrap}

  .site-header .head-tel{display:flex;flex-direction:column;align-items:flex-end;gap:0}
  .site-header .tel-link{text-decoration:none}
  .site-header .tel-number{
    font-weight:800;font-size:40px;color:var(--yellow-dark);line-height: 1;
  }
  .site-header .tel-hours{color:var(--ink-2)}

  /* 仕切り線 */
  .site-header .gnav-list > li + li::before{
    content:"";position:absolute;left:0;top:50%;translate:0 -50%;
    width:1px;height:18px;background:rgba(255,255,255,.55);
  }
  .site-header .gnav-list > li > a:hover,
  .site-header .gnav-list > li.current-menu-item > a{opacity:.9}

  /* CTAボタン（右端） */
  .site-header .btn-cta{
    background:var(--green-dark);color:#fff;border-radius:999px;padding:10px 18px;
    font-weight:800;white-space:nowrap;box-shadow:0 8px 18px rgba(122,198,74,.25);
  }
  .site-header .btn-cta:hover{background:var(--green)}

  /* 下段（ヘッダーイメージ） */
  .site-header .head-hero{
    width:100%;background:#EAF6FF; /* 画像が小さい時の余白色 */
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .site-header .head-hero img{
    display:block;width:100%;height:auto;object-fit:cover;
  }

  /* 既存のstickyヘッダー等はPCでは無効化したい場合（任意） */
  .header{display:none;}
}

/* スマホ/タブレットは今のヘッダーを継続でOK */

.tel-link {
  display: flex;
  align-items: center;
  gap: 0; /* アイコンと番号の余白 */
  font-weight: 700;
  color:var(--yellow-dark); /* あなたのテーマカラー */
  text-decoration: none;
}

.tel-icon {
  width: 40px;
  height: 40px;
  color:var(--yellow-dark); /* 電話アイコンの色 */
}
#about .card{
 background: #eef0ff;
}

/* ========== CF7 お問い合わせフォーム ========== */
.wpcf7 form {
  --field-bg: #fff;
  --field-bd: #e6e6e6;
  --field-bd-focus: var(--green);
  --field-shadow: 0 6px 18px rgba(0,0,0,.04);
  --error: var(--pink-dark);
  --ok: var(--green-dark);
}

.wpcf7 form p { margin: 0 0 16px; }
.wpcf7 form label { font-weight: 700; color: var(--ink); display: block; }

/* テキスト/メール/電話/テキストエリア */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1.5px solid var(--field-bd);
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.7;
  color: var(--ink);
  box-shadow: var(--field-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, outline-color .2s ease;
}

/* プレースホルダー色 */
.wpcf7-form-control::placeholder { color: #999; }

/* フォーカス */
.wpcf7-form-control:focus {
  outline: 3px solid color-mix(in srgb, var(--green) 25%, transparent);
  border-color: var(--field-bd-focus);
}

/* テキストエリアの高さ */
.wpcf7-textarea { min-height: 160px; resize: vertical; }

/* 送信ボタン */
/* お問い合わせフォームの送信ボタン調整 */
.wpcf7-submit {
  display: block;             /* ブロック化で中央寄せに使う */
  margin: 24px auto 0;        /* 上余白と中央配置 */
  min-width: 240px;           /* 横幅の最小サイズ */
  padding: 14px 36px;         /* 縦横に余裕を持たせる */
  font-size: 1.1rem;          /* 少し大きめの文字 */
  font-weight: 800;
  text-align: center;
  border-radius: 999px;
  background: var(--yellow-dark);
  color: #fff;
  border: none;
  box-shadow: 0 8px 18px rgba(122,198,74,.25);
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease, background .2s ease;
}

.wpcf7-submit:hover {
  background: var(--green);
  filter: brightness(1.05);
}

.wpcf7-submit:active {
  transform: translateY(1px);
}

/* スピナー */
.wpcf7 .wpcf7-spinner {
  margin-left: 10px;
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid #ddd; border-top-color: var(--green-dark);
  border-radius: 50%;
  animation: wpcf7spin .8s linear infinite;
}
@keyframes wpcf7spin { to { transform: rotate(360deg); } }

/* バリデーション：未入力やエラー */
.wpcf7-not-valid { border-color: var(--error) !important; outline-color: color-mix(in srgb, var(--error) 25%, transparent) !important; }
.wpcf7-not-valid:focus { outline: 3px solid color-mix(in srgb, var(--error) 25%, transparent); }
.wpcf7-not-valid-tip {
  color: var(--error);
  font-size: .9rem;
  margin-top: 6px;
}

/* 返信メッセージ（送信結果） */
.wpcf7 form .wpcf7-response-output {
  margin: 12px 0 0;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1.5px solid #eee;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--field-shadow);
}

/* 送信成功 / 失敗 / 入力不備 の色分け（CF7 v5.8+ の stateクラス） */
.wpcf7 form.sent    .wpcf7-response-output { border-color: color-mix(in srgb, var(--ok) 45%, white); background: color-mix(in srgb, var(--green-light) 55%, white); }
.wpcf7 form.failed  .wpcf7-response-output { border-color: #e0a7a7; background:#fff1f1; }
.wpcf7 form.invalid .wpcf7-response-output { border-color: color-mix(in srgb, var(--error) 45%, white); background: color-mix(in srgb, var(--pink-light) 65%, white); }

/* アクセシビリティ：必須の印（任意） */
.wpcf7-form [aria-required="true"] + br::after { content:""; } /* 既存のラベル構成維持用 */
.wpcf7 form label[for]::after{
  /* ラベル末尾に必須マークを付けたい場合は以下をON
  content:" *";
  color: var(--error);
  font-weight: 800;
  */
}

/* フォーム全体の余白とまとまり（既存 .form ボックスと併用OK） */
.wpcf7 form { margin-top: 8px; }

.container h3{
  font-size: 1.4em;
  color: #724C35;
}

/* 電話リンクにアイコンを付けて整列 */
.tel-iconed{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color: var(--yellow-dark);
  text-decoration:none;
}
.tel-iconed:hover{ color: var(--green); }

.tel-svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
  /* currentColorで塗るので、親のcolorに追従します */
}

/* ===========================
   モバイル最適化（～768px）
   =========================== */
@media (max-width: 768px){

  /* 1) ヘッダー：縦積み＆中央寄せ、電話を大きくタップしやすく */
  .site-header .head-top .wrap{
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
  }
  .site-header .brand-mark{ height: 56px; }
  .site-header .brand-text{ display:none; } /* ロゴのみ表示（任意） */

  .head-tel{ align-items: center !important; }
  .tel-link{ display: inline-flex; align-items: center; gap: 8px; }
  .tel-number{ font-size: 20px; font-weight: 800; }

  /* 2) ヘッダー画像：高さを抑えてチラ見せ＋トリミング */
  .head-hero{
    width:100%;
  }
  .head-tel{
    display: none;
  }
  .brand{
    display: block;
    text-align: center;
    width:100%;
  }
  .brand img{
    display: block;
    margin: auto;
  }
  /* 3) ヒーローセクション：1カラム＆余白調整、ボタンは幅広に */
  .hero-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .hero h1{ font-size: 22px; }
  .lead{ font-size: 15px; }
  .hero-cta, .hero .btn{ width: 100%; }
  .hero .btn{ text-align: center; }

  /* 4) セクション面：パディング軽く、読みやすく */
  .section{ padding: 56px 16px; }
  .section-surface{ padding: 22px 16px; border-radius: 16px; }

  /* 5) “おすすめ／困りごと”：縦積み・イラスト→文の順で自然に */
  .target-wrap, .trouble-wrap{ grid-template-columns: 1fr !important; gap: 16px; }
  .target-illust, .trouble-illust{max-width: 70%; margin: 0 auto 8px; }
  .target-list, .trouble-list{ font-size: 15px; }
  .target-illust-box{text-align:center;}
  .target-illust-box img{text-align:center;max-width: 80%;}

  /* 6) サービス案内：2カラム→1カラム、チェックリストの行間ゆったり */
  #services .service-card, #services .target-wrap{ grid-template-columns: 1fr !important; }
  .checklist li{ margin: .5em 0; line-height: 1.7; }

  /* 7) タイムライン：縦棒を簡素化して行間重視 */
  .timeline{ margin-left: 0; }
  .timeline::before{ left: 10px; }
  .stepline{
    padding: 14px 14px 14px 52px;
    margin: 12px 0;
  }
  .stepline::before{ left: -6px; top: 10px; width: 34px; height: 34px; }

  /* 8) FAQ：カード間隔と文字を少し大きめに */
  .faq-open .faq-item{ padding: 14px 14px; }
  .faq-q{ font-size: 1.1rem; }
  .faq-a{ font-size: 0.98rem; }

  /* 9) フォーム：入力面を大きく、送信ボタンは幅広 */
  .wpcf7-form-control.wpcf7-text,
  .wpcf7-form-control.wpcf7-email,
  .wpcf7-form-control.wpcf7-tel,
  .wpcf7-form-control.wpcf7-textarea{
    font-size: 16px;             /* モバイルでの入力最適値 */
    padding: 12px 14px;
  }
  .wpcf7-textarea{ min-height: 140px; }
  .wpcf7-submit{
    display: block; width: 100%;
    min-width: unset; padding: 14px 18px;
    font-size: 1.05rem;
    margin-top: 18px;
  }

  /* 10) フッターボタンリンク：段組みOKで大きく */
  .footer .links{
    justify-content: center;
    gap: 10px;
  }
  .footer .links a{
    padding: 10px 16px;
    font-size: 15px;
  }

  /* 11) 背景パターン：濃さをやや弱めて可読性UP（必要に応じて） */
  .section-bg.pat-faint{ --pat-opacity: .7; }
  .section-bg.pat-softer{ --pat-opacity: .55; }
  .section-bg.pat-softest{ --pat-opacity: .45; }

  /* 12) 細かい余白調整 */
  .h2{ margin-bottom: 18px; padding-left: 28px; }
  .h2::before{ width: 16px; height: 16px; top: 4px; }
  .note, .sub{ font-size: 14px; }

  /* 13) 既存の.grid-2/.grid-3 強制1カラムは維持 */
  .grid-2, .grid-3{ grid-template-columns: 1fr !important; }

}

/* ===========================
   ヘッダー画像：はみ出し防止＋比率維持（統一版）
   =========================== */
.site-header .head-hero{
  width: 100%;
  overflow: hidden;          /* 念のため横スクロール防止 */
}

.site-header .head-hero img{
  display: block;            /* ベースライン余白を除去 */
  width: 100%;               /* 画面幅にフィット */
  height: auto;              /* 比率維持で自動高さ */
  max-width: 100%;           /* intrinsic幅に引っ張られない保険 */
  box-sizing: border-box;    /* 親にpaddingがあっても計算内に */
  margin: 0 auto;
}

/* （任意）全画像の保険：サイト全体で画像がはみ出さないように */
img { max-width: 100%; height: auto; }