@charset "utf-8";
/* 羽山台サポート 共通スタイル */

/* ---------- 変数 ---------- */
:root{
  --primary:#2E7D32;
  --primary-700:#1B5E20;
  --primary-050:#F1F8F4;

  --ink:#0F172A;
  --muted:#475569;
  --line:#E6EAE7;

  --bg:#FAFCFB;
  --surface:#FFFFFF;


  --shadow-s:0 2px 10px rgba(0,0,0,.05);
  --shadow-m:0 20px 48px rgba(0,0,0,.12);

  --s-3:22px; --s-4:34px; --s-5:56px; 

  --fs-hero:clamp(2.6rem,4.4vw,3.6rem);
  --fs-h:clamp(1.6rem,2.6vw,2.1rem);
  --fs-p:clamp(1.06rem,1.5vw,1.14rem);
  --fs-s:.96rem;
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0 }
img{ max-width:100%; height:auto; vertical-align:middle }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
button{ font:inherit; border:none; background:none; cursor:pointer }
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden }

/* 右側の無駄な余白の抑止 */
html,body{ overflow-x:hidden }

/* ---------- 基本設定 ---------- */
body{
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.9; letter-spacing:.01em;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{ width:min(1120px,92%); margin-inline:auto }
.section{ padding:var(--s-5) 0; position:relative; overflow:hidden }
.section--plain{ background:var(--surface) }
.section--tint{ background:linear-gradient(180deg, var(--primary-050), #fff) }
.section--image{
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.52)),
    var(--bg,#777) center/cover no-repeat fixed;
}
@media (max-width:1024px){
  .section--image{ background-attachment:scroll }
}

/* ---------- ヘッダー ---------- */
.site-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(150%) blur(10px);
    background: #ffffffbd;
}
.header-inner{ display:flex; align-items:center; gap:20px; padding:14px 0; position:relative }
.brand{ font-family:"Shippori Mincho"; font-weight:700; font-size:1.22rem; letter-spacing:.04em }

/* ナビゲーション */
.site-nav{ margin-left:auto }
.nav-list{ display:flex; gap:20px }
.nav-list a{ padding:8px 10px; border-radius:10px; font-size:.98rem; transition:background .15s ease }
.nav-list a:hover,.nav-list a:focus-visible{ background:var(--primary-050); outline:none }
.nav-cta-desktop{ border:1px solid var(--primary-700); color:var(--primary-700); border-radius:999px; padding:8px 14px }

/* ===== ハンバーガーメニュー・スマホ用ナビゲーション ===== */

/* メニューボタンと開閉時の形状 */
.burger{
  display:none; width:28px; height:22px; position:relative; z-index:1101;
}
.burger span, .burger::before, .burger::after{
  content:""; position:absolute; left:0; width:100%; height:3px;
  background:var(--primary-700); transition:.3s;
}
.burger span{ top:50%; transform:translateY(-50%); }
.burger::before{ top:0; }
.burger::after{ bottom:0; }
.burger.active span{ opacity:0; }
.burger.active::before{ top:50%; transform:translateY(-50%) rotate(45deg); }
.burger.active::after{ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }

/* PCではドロワー用CTAを非表示 */
.nav-cta{ display:none; }

@media (max-width:768px){
  /* スマホではメニューボタンを表示し、開いた状態では右上に固定 */
  .burger{ display:block; margin-left:auto; }
  body.no-scroll .burger{
    position:fixed;
    top:calc(16px + env(safe-area-inset-top));
    right:clamp(12px,4vw,24px);
    z-index:1101;
  }

  /* 全画面ナビゲーション */
  .site-nav{
    position:fixed; inset:0; z-index:1000;
    width:100vw; height:100dvh; min-height:-webkit-fill-available;
    background:#fff;
    padding:calc(16px + env(safe-area-inset-top)) 20px
            calc(20px + env(safe-area-inset-bottom));
    display:none;
    grid-template-rows:auto 1fr auto;
    overscroll-behavior:contain;
  }
  .site-nav.open{ display:grid; padding: 80px 42px 30px 42px; }

  .nav-list{ display:grid; gap:12px; }
  .nav-list a{
    display:block; padding:14px 12px;
    border:1px solid var(--line); border-radius:12px;
    background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05);
    font-size:1rem;
  }

  /* ドロワー内CTA（SPのみ） */
  .nav-cta{ display:grid; gap:10px; margin-top:14px; }
  .nav-cta-desktop{ display:none; }
}

/* 背景スクロールロック */
body.no-scroll{ overflow:hidden; }


/* ---------- メインビジュアル ---------- */
.hero{ position:relative; padding: clamp(72px,11vh,110px) 0 }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1400px 600px at 80% -10%, rgba(46,125,50,.10), transparent 60%),
    radial-gradient(1200px 600px at -10% 110%, rgba(46,125,50,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.45)),
    var(--hero,#777) center/cover no-repeat;
  filter:saturate(.95)
}
.hero-inner{ position:relative; z-index:1; text-align:center; color:#fff }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45); margin-bottom:10px; font-weight:700
}
.hero-title{
  font-family:"Shippori Mincho","Zen Kaku Gothic New"; font-weight:700; letter-spacing:.02em;
  font-size:var(--fs-hero); line-height:1.25; text-shadow:0 2px 18px rgba(0,0,0,.35);
  max-width:18ch; margin:.1em auto .5em; text-wrap:balance;
}
.hero-lead{ font-size:var(--fs-p); color:#eef7ee; max-width:820px; margin:0 auto var(--s-3); text-wrap:pretty }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ---------- ボタン・アイコン ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 22px; border-radius:999px; font-weight:700; letter-spacing:.02em; transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease }
.btn-primary{ height: 55px;background:linear-gradient(135deg,var(--primary),var(--primary-700)); color:#fff; box-shadow:0 6px 18px rgba(46,125,50,.22) }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-m) }
.btn-outline{ height: 55px;background:#fff; color:var(--primary-700); border:1px solid var(--primary-700) }
.btn-outline:hover{ background:var(--primary-050) }

/* アイコン共通設定 */
.icon,.icon-lg,.icon-xs,.leaf{ display:inline-block; fill:currentColor; vertical-align:-0.18em; line-height:1 }
.icon{ width:20px; height:20px } .icon-lg{ width:40px; height:40px } .icon-xs{ width:14px; height:14px }
.leaf{ width:22px; height:22px; color:var(--primary-700) }
.btn svg{ flex:0 0 auto }

/* ---------- 見出し ---------- */
.section-title{ display:inline-flex; align-items:center; gap:8px; padding:0; margin:8px 0 22px; font-size:var(--fs-h); color:var(--primary-700); font-family:"Shippori Mincho","Zen Kaku Gothic New"; letter-spacing:.02em }
.section-title--w{ color:#fff }
.title-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:6px }
.title-sub{ color:var(--muted); margin:0; font-size:var(--fs-s) }

/* ---------- 下層ページ ---------- */
.page-header{ padding:44px 0; background:linear-gradient(135deg,var(--primary-050),#fff) }
.page-title{ margin:0; color:var(--primary-700); font-family:"Shippori Mincho","Zen Kaku Gothic New"; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:.03em }
.page-content{ max-width:840px }
.policy-intro{ margin:0 0 32px; color:var(--muted) }
.policy-list{ display:grid; gap:28px }
.policy-item{ padding-bottom:28px; border-bottom:1px solid var(--line) }
.policy-item:last-child{ padding-bottom:0; border-bottom:0 }
.policy-item h2{ margin:0 0 8px; color:var(--primary-700); font-size:1.2rem }
.policy-item p{ margin:0; color:var(--muted) }
.policy-contact{ font-style:normal }
.page-back{ margin-top:36px }
.archive-content,.article-content{ max-width:840px }
.article-header{ display:grid; gap:10px }
.article-title{ font-size:clamp(1.8rem,3.5vw,2.5rem) }
.article-meta{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.95rem }
.article-content{ color:var(--muted) }
.article-content > :first-child{ margin-top:0 }
.article-content > :last-child{ margin-bottom:0 }
.article-content h2,.article-content h3{ color:var(--primary-700); line-height:1.5 }
.article-content a:not(.btn){ color:var(--primary-700); text-decoration:underline; text-underline-offset:.2em }
.news-list--archive{ margin-bottom:32px }
.nav-links{ display:flex; justify-content:center; gap:8px; margin-top:32px }
.nav-links .page-numbers{ min-width:40px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; text-align:center }
.nav-links .current{ background:var(--primary-700); color:#fff; border-color:var(--primary-700) }

/* ---------- メッセージ ---------- */
.message{ display:grid; gap:var(--s-3); grid-template-columns:1.2fr .8fr; align-items:center }
.eyecatch{ display:flex; align-items:center; gap:10px; font-family:"Shippori Mincho","Zen Kaku Gothic New"; font-size:clamp(1.4rem,2.2vw,1.8rem); line-height:1.4; margin:0 0 10px; text-wrap:balance }
.message__copy p{ color:var(--muted) }
.message__thumbs{ position:relative; min-height:260px }
.message__thumbs .blob{ position:absolute; width:48%; box-shadow:var(--shadow-s); object-fit:cover }
.br-1{ border-radius:32px 32px 120px 32px } .br-2{ border-radius:120px 32px 32px 32px } .br-3{ border-radius:32px 120px 32px 32px }
.message__thumbs .br-1{ top:0; left:0 } .message__thumbs .br-2{ bottom:0; left:8% } .message__thumbs .br-3{ top:18%; right:0; width:44% }
@media (max-width:840px){ .message{ grid-template-columns:1fr } .message__thumbs{ height:280px } }

/* ---------- サービス ---------- */
#services .svc-list{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
#services .svc-card{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px;
  border:1px solid var(--line, #E6EAE7);
  border-radius:18px;
  background:var(--surface, #fff);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
#services .svc-icon{
  flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--primary-700, #1B5E20);
  background:rgba(46,125,50,.12);
}
#services .svc-icon .ico{ width:22px; height:22px; fill:currentColor }

#services .svc-meta{ min-width:0 }
#services .svc-tag{
  display:inline-block; margin-bottom:6px;
  font-size:.75rem; line-height:1; color:#fff;
  background:var(--primary, #2E7D32);
  padding:4px 8px; border-radius:999px;
}
#services .svc-title{
  margin:.1em 0 .2em; font-weight:800;
  color:var(--ink, #0F172A); font-size:1.06rem;
}
#services .svc-desc{
  margin:0; color:var(--muted, #475569);
  font-size:var(--fs-s, .96rem);
}

#services .svc-note{
  margin-top:12px; text-align:center;
  color:var(--muted, #475569); font-size:.9rem;
}

/* 小さな端末での余白最適化 */
@media (max-width:480px){
  #services .svc-card{ padding:16px }
}

/* ---------- 新着情報 ---------- */
.news-list{ display:grid; gap:12px }
.news-item{ display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:14px; padding:12px 2px; border-bottom:1px solid var(--line); transition:transform .12s ease, opacity .12s ease }
.news-item:hover{ transform:translateX(2px); opacity:.92 }
.news-date{ font-variant-numeric:tabular-nums; color:#334155 }
.news-title{ font-weight:700 }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--primary-050); color:var(--primary-700); font-size:.88rem }
.news-more{ text-align:right; margin-top:12px }

/* ---------- ご利用の流れ ---------- */
.flow{ display:grid; gap:16px }
.flow__step{ position:relative; padding:18px 16px 14px; border:1px solid color-mix(in srgb, white 70%, var(--line)); border-radius:12px; background:rgba(255,255,255,.95) }
.flow__num{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.02em; margin-bottom:8px }
.flow__title{ color:#fff; font-weight:700; margin-bottom:6px }
.flow__text{ font-size:var(--fs-s); color:#0f1b12 }
/* 背景画像セクション用コントラスト */
.section--image .flow__step{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28) }
.section--image .flow__text{ color:#f3fff6 }
@media (min-width:900px){
  .flow{ grid-template-columns:repeat(4,1fr) }
  .flow__step{ text-align:center; background:transparent; border:1px solid rgba(255,255,255,.28) }
  .flow__num{ margin:0 auto 10px }
}

/* ---------- お問い合わせ導線 ---------- */
.cta-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:stretch }
.cta-card{ background:linear-gradient(180deg,#fff,color-mix(in srgb,#fff 70%,var(--primary-050) 30%)); border:1px solid var(--line); border-radius:20px; padding:22px; text-align:center; display:flex; flex-direction:column; gap:12px }
.cta-top h3{ margin:.2em 0 0; color:var(--primary-700); font-family:"Shippori Mincho" }
.cta-top p{ color:var(--muted); margin:.2em 0 0 }
.cta-actions{ margin-top:auto; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* ---------- 対応エリア ---------- */
.area-grid{ display:grid; gap:24px; align-items:center; grid-template-columns:1.1fr .9fr }
@media (max-width:900px){ .area-grid{ grid-template-columns:1fr } }
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip{ padding:8px 12px; border:1px solid var(--primary-700); border-radius:999px; background:#fff; color:#0f1b12; box-shadow:0 2px 0 0 color-mix(in srgb, var(--primary) 16%, transparent); font-size:.95rem }
.mapbox{ border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#f2f7f3; aspect-ratio:4/3 }
.mapbox iframe{ width:100%; height:100%; border:0; display:block }

/* ---------- よくあるご質問 ---------- */
.faq{ display:grid; gap:12px }
.faq-item{ border-radius:12px; overflow:hidden; background:#fff }
.faq-q{ font-size:1rem; padding:12px 14px; background:var(--primary); color:#fff }
.faq-a{ padding:14px; color:#16301a; border-top:1px solid var(--line) }

/* ---------- お問い合わせフォーム ---------- */
.contact-form{ max-width:720px; margin:0 auto; display:grid; gap:12px }
label{ font-weight:700; font-size:.98rem }
.input,.textarea{ width:100%; padding:12px; font-size:var(--fs-p); border:1px solid var(--line); border-radius:12px; background:#fff; outline:none; transition:border-color .2s, box-shadow .2s }
.input:focus,.textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(46,125,50,.18) }
.textarea{ min-height:160px; resize:vertical }
.form-actions{ margin-top:6px }
.contact-form__notice{ margin:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--primary-050); color:var(--muted) }
.contact-form .wpcf7-form{ display:grid; gap:12px }
.contact-form .wpcf7-form > p{ margin:0 }
.contact-form .wpcf7-form-control-wrap{ display:block; margin-top:6px }
.contact-form .wpcf7-not-valid-tip{ margin-top:4px; font-size:.9rem }
.contact-form .wpcf7-response-output{ margin:8px 0 0; padding:12px 14px; border-radius:12px }
.contact-form .wpcf7-spinner{ align-self:center }

/* ---------- フッター ---------- */
.site-footer{ background:#0f1b12; color:#cfe7d2; padding:var(--s-4) 0; font-size:.95rem }
.footer-grid{ display:grid; gap:20px; grid-template-columns:1.2fr .8fr .8fr }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr } }
.footer-nav ul{ display:grid; gap:10px }
.site-footer address{ font-style:normal; opacity:.95 }
.site-footer small{ display:block; margin-top:16px; opacity:.7 }

/* ---------- スクロール表示 ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:.6s ease }
.reveal.is-visible{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none } }

/* ---------- 装飾線 ---------- */
.squiggle{ position:absolute; pointer-events:none; opacity:.26; filter:blur(.2px); background-repeat:no-repeat; background-size:contain; left:50%; transform:translateX(-50%) }
.squiggle--hero{
  top:-40px; width:520px; height:320px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='360' viewBox='0 0 600 360'><path d='M10,180 C90,60 210,300 300,180 C390,60 510,300 590,180' fill='none' stroke='%232E7D32' stroke-width='3' stroke-opacity='.35'/></svg>");
}
.squiggle--flow{
  bottom:-40px; width:420px; height:260px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='280' viewBox='0 0 480 280'><path d='M0,140 C60,20 140,260 220,140 C300,20 380,260 460,140' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-opacity='.35'/></svg>");
}
.squiggle--faq{
  bottom:-60px; width:360px; height:220px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'><path d='M0,120 C50,0 120,220 200,120 C280,0 350,220 420,120' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-opacity='.35'/></svg>");
}