/* ================================================
   やさしさ社会保険労務士法人 style.css
   デザインカンプ完全再現
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Lato:wght@300;400;700&display=swap');

/* ─── Design Tokens ─── */
:root {
  --bg:          #F9F7F3;
  --bg-sec:      #F4F0EA;
  --bg-card:     #FFFFFF;
  --green:       #7A9E7E;
  --green-dark:  #5B8C5A;
  --green-pale:  #EDF3ED;
  --green-btn:   #6B9A6B;
  --sage:        #8FAE8B;
  --beige:       #E8D9C8;
  --beige-dark:  #C9A87A;
  --text:        #3A3630;
  --text-sub:    #6B6560;
  --text-light:  #9E9890;
  --border:      #E5DDD4;
  --border-card: #EDE6DE;
  --shadow-sm:   0 4px 16px rgba(100,90,70,.07);
  --shadow-md:   0 12px 36px rgba(100,90,70,.1);
  --shadow-lg:   0 20px 56px rgba(100,90,70,.13);
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 100px;
  --font-serif: 'Noto Serif JP', serif;
  --font-sans:  'Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ─── Reset ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);line-height:1.85;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* ─── Animation ─── */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.fade-up.is-visible{opacity:1;transform:translateY(0)}
.fade-in{opacity:0;transition:opacity .8s var(--ease)}
.fade-in.is-visible{opacity:1}
.slide-left{opacity:0;transform:translateX(-24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.slide-left.is-visible{opacity:1;transform:translateX(0)}
.slide-right{opacity:0;transform:translateX(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.slide-right.is-visible{opacity:1;transform:translateX(0)}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.18s}.delay-3{transition-delay:.26s}
.delay-4{transition-delay:.34s}.delay-5{transition-delay:.42s}.delay-6{transition-delay:.5s}

/* ─── Layout ─── */
.container{width:min(1160px,calc(100% - 64px));margin:0 auto}
.section{padding:96px 0}
.section--bg{background:var(--bg-sec)}
.section--white{background:#fff}
.section--green{background:linear-gradient(135deg,var(--green-dark),#4a7a4a)}

/* Section heading */
.sec-head{margin-bottom:52px}
.sec-head--c{text-align:center}
.sec-head--c .sec-lead{margin:0 auto}
.sec-en{
  font-family:'Lato',sans-serif;font-size:11px;letter-spacing:.45em;
  text-transform:uppercase;color:var(--green-dark);display:block;margin-bottom:8px
}
.sec-title{
  font-family:var(--font-serif);font-size:clamp(22px,2.8vw,34px);
  font-weight:500;color:var(--text);line-height:1.5;margin-bottom:14px;
  position:relative;display:inline-block
}
.sec-title--deco::before,.sec-title--deco::after{
  content:'✦';font-size:14px;color:var(--green);opacity:.6;vertical-align:middle;
}
.sec-title--deco::before{margin-right:14px}
.sec-title--deco::after{margin-left:14px}
.sec-lead{font-size:14px;color:var(--text-sub);line-height:2;max-width:640px}
.section--green .sec-title{color:#fff}
.section--green .sec-lead{color:rgba(255,255,255,.75)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;border-radius:var(--r-md);font-weight:700;font-size:14px;
  letter-spacing:.04em;transition:all .28s var(--ease);cursor:pointer;border:none;
  white-space:nowrap
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--green{background:var(--green-btn);color:#fff;box-shadow:0 4px 18px rgba(107,154,107,.3)}
.btn--green:hover{background:#5a8a5a}
.btn--outline{background:transparent;color:var(--text-sub);border:1.5px solid var(--border)}
.btn--outline:hover{background:var(--bg-sec);border-color:var(--green)}
.btn--white{background:#fff;color:var(--green-dark);box-shadow:var(--shadow-sm)}
.btn--lg{padding:17px 40px;font-size:15px}
.btn--sm{padding:10px 22px;font-size:13px}
.btn--full{width:100%;justify-content:center}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:600;
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 20px rgba(100,90,70,.08);
  backdrop-filter:blur(10px);
  transition:box-shadow .3s
}
/* 上段 */
.hdr-top{border-bottom:1px solid var(--border)}
.hdr-top-inner{
  width:min(1160px,calc(100% - 64px));margin:0 auto;
  padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:16px
}
.hdr-logo{display:flex;flex-direction:column;gap:2px}
.hdr-logo-catch{font-size:10px;color:var(--text-light);letter-spacing:.1em}
.hdr-logo-name{
  font-family:var(--font-serif);font-size:17px;font-weight:700;
  color:var(--text);letter-spacing:.04em;line-height:1.2
}
.hdr-logo-sub{font-size:9px;color:var(--text-light);letter-spacing:.12em}
.hdr-right{display:flex;align-items:center;gap:10px}
.hdr-tel-wrap{display:flex;flex-direction:column;align-items:flex-end;margin-right:6px}
.hdr-tel-label{font-size:9px;color:var(--text-light);letter-spacing:.08em}
.hdr-tel-num{
  font-size:20px;font-weight:700;color:var(--text);
  letter-spacing:.06em;display:flex;align-items:center;gap:6px;text-decoration:none
}
.hdr-tel-num svg{color:var(--green-dark)}
.hdr-cta-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--green-btn);color:#fff;
  padding:8px 16px;border-radius:var(--r-sm);
  font-size:11px;font-weight:700;gap:2px;
  transition:background .25s;text-align:center;min-width:100px;
  border:none;cursor:pointer;text-decoration:none
}
.hdr-cta-btn:hover{background:#5a8a5a;transform:none}
.hdr-cta-btn--sub{background:var(--bg-sec);color:var(--green-dark);border:1px solid var(--green);min-width:100px}
.hdr-cta-btn--sub:hover{background:var(--green-pale)}
.hdr-cta-btn-en{font-family:'Lato',sans-serif;font-size:8px;opacity:.75;font-weight:400}

/* 下段ナビ */
.hdr-nav{background:#fff}
.hdr-nav-inner{
  width:min(1160px,calc(100% - 64px));margin:0 auto;
  display:flex;align-items:center
}
.gnav{display:flex}
.gnav a{
  font-size:13px;color:var(--text-sub);padding:12px 18px;
  transition:color .25s;position:relative;white-space:nowrap
}
.gnav a::after{
  content:'';position:absolute;bottom:0;left:18px;right:18px;
  height:2px;background:var(--green);transform:scaleX(0);
  transition:transform .25s var(--ease);border-radius:2px
}
.gnav a:hover{color:var(--green-dark)}
.gnav a:hover::after{transform:scaleX(1)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO FV
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero{
  padding:120px 0 80px;
  background:linear-gradient(160deg,#FDFCF8 0%,#F6F1EA 55%,#F0E9DE 100%);
  overflow:hidden;position:relative;
  /* 上部はヘッダー分 */
  margin-top:0
}
/* 背景装飾 */
.hero::before{
  content:'';position:absolute;
  top:-80px;right:-80px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(143,174,139,.12),transparent 65%);
  pointer-events:none
}
.hero::after{
  content:'';position:absolute;
  bottom:-60px;left:-40px;width:320px;height:320px;
  background:radial-gradient(circle,rgba(217,195,169,.15),transparent 65%);
  pointer-events:none
}
.hero-grid{
  width:min(1160px,calc(100% - 64px));margin:0 auto;
  display:grid;grid-template-columns:5fr 7fr;
  gap:48px;align-items:center;position:relative;z-index:1
}
/* 左 */
.hero-since{
  display:inline-flex;flex-direction:column;align-items:center;
  width:64px;height:64px;border-radius:50%;
  border:1.5px solid var(--green);background:rgba(255,255,255,.8);
  justify-content:center;margin-bottom:24px;
  box-shadow:var(--shadow-sm)
}
.hero-since-en{font-family:'Lato',sans-serif;font-size:8px;letter-spacing:.2em;color:var(--green-dark)}
.hero-since-yr{font-family:'Lato',sans-serif;font-size:16px;font-weight:700;color:var(--text);line-height:1}

.hero-title{
  font-family:var(--font-serif);
  font-size:clamp(28px,3.8vw,48px);
  font-weight:400;color:var(--text);
  line-height:1.5;margin-bottom:18px;
  letter-spacing:.02em
}
.hero-sub{font-size:14px;color:var(--text-sub);line-height:2;margin-bottom:32px}

/* 特徴バッジ4つ */
.hero-features{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-bottom:32px
}
.hero-feat{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.8);border:1px solid var(--border-card);
  border-radius:var(--r-sm);padding:11px 14px;font-size:12px;
  color:var(--text);font-weight:500;box-shadow:var(--shadow-sm)
}
.hero-feat-icon{font-size:20px;flex-shrink:0}

/* CTAボタン2つ */
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-cta-main{
  display:flex;align-items:center;gap:10px;
  background:var(--green-btn);color:#fff;
  padding:14px 24px;border-radius:var(--r-md);font-weight:700;font-size:14px;
  box-shadow:0 6px 22px rgba(107,154,107,.3);transition:all .28s;text-decoration:none
}
.hero-cta-main:hover{background:#5a8a5a;transform:translateY(-2px)}
.hero-cta-main-sub{font-size:10px;opacity:.85;font-weight:400;display:block}
.hero-cta-sub-btn{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.9);color:var(--text-sub);
  padding:14px 24px;border-radius:var(--r-md);font-size:14px;
  border:1.5px solid var(--border);transition:all .28s;text-decoration:none;
  box-shadow:var(--shadow-sm)
}
.hero-cta-sub-btn:hover{background:#fff;border-color:var(--green);transform:translateY(-2px)}

/* 右側 */
.hero-right{position:relative}
.hero-photo{
  border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 80px;
  overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--shadow-lg)
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* 浮遊カード */
.hero-float{
  position:absolute;bottom:-20px;left:-40px;
  background:#fff;border-radius:var(--r-md);
  padding:20px 24px;box-shadow:var(--shadow-md);
  min-width:220px;z-index:2;border:1px solid var(--border-card)
}
.hero-float-title{
  font-family:var(--font-serif);font-size:15px;color:var(--text);
  font-weight:700;margin-bottom:12px;line-height:1.5
}
.hero-float-items{display:flex;flex-direction:column;gap:7px}
.hero-float-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-sub)}
.hero-float-check{
  width:18px;height:18px;border-radius:50%;background:var(--green-btn);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.hero-float-check::after{content:'✓';color:#fff;font-size:10px;font-weight:700}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEM（悩み・ブロークングリッド）
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.problem-grid{
  display:grid;
  grid-template-columns:1.1fr 0.85fr 0.85fr 1.2fr;
  gap:20px;align-items:stretch
}
/* 左：導入 */
.prob-intro{
  background:var(--bg-card);border-radius:var(--r-lg);
  border:1px solid var(--border-card);
  padding:36px 28px;display:flex;flex-direction:column;
  justify-content:center;box-shadow:var(--shadow-sm)
}
.prob-intro-illust{font-size:52px;margin-bottom:16px}
.prob-intro h3{
  font-family:var(--font-serif);font-size:clamp(16px,2vw,20px);
  color:var(--text);line-height:1.65;font-weight:500
}
/* 中：悩みカード2枚 */
.prob-card{
  background:var(--bg-card);border-radius:var(--r-lg);
  border:1px solid var(--border-card);padding:28px 22px;
  box-shadow:var(--shadow-sm)
}
.prob-card-icon-wrap{
  width:52px;height:52px;border-radius:50%;
  background:var(--bg-sec);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:14px
}
.prob-card h4{
  font-family:var(--font-serif);font-size:15px;color:var(--text);
  margin-bottom:8px;line-height:1.55
}
.prob-card p{font-size:12px;color:var(--text-sub);line-height:1.9}
/* 右：解決メッセージ */
.prob-solution{
  background:linear-gradient(145deg,var(--bg-sec) 0%,#ECE6DE 100%);
  border-radius:var(--r-lg);border:1px solid var(--border);
  padding:36px 28px;display:flex;flex-direction:column;
  justify-content:center;position:relative;overflow:hidden
}
.prob-solution::before{
  content:'';position:absolute;
  top:-40px;right:-30px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(143,174,139,.12),transparent);
}
.prob-solution-label{
  font-family:'Lato',sans-serif;font-size:10px;letter-spacing:.35em;
  text-transform:uppercase;color:var(--green-dark);margin-bottom:14px
}
.prob-solution h3{
  font-family:var(--font-serif);font-size:clamp(18px,2.2vw,24px);
  color:var(--text);line-height:1.65;margin-bottom:18px;font-weight:500
}
.prob-solution h3 em{font-style:normal;color:var(--green-dark)}
.prob-solution p{font-size:13px;color:var(--text-sub);line-height:1.95}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICES（サービス一覧）
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;align-items:start
}
.svc-c3{grid-column:span 3}
.svc-c2{grid-column:span 2}
.svc-c4{grid-column:span 4}
.svc-c6{grid-column:span 6}
.svc-card{
  display:flex;flex-direction:column;
  background:var(--bg-card);border-radius:var(--r-md);
  border:1px solid var(--border-card);
  padding:24px 20px;box-shadow:var(--shadow-sm);
  transition:all .28s var(--ease);color:var(--text)
}
.svc-card:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-md);
  border-color:var(--green);background:var(--green-pale)
}
.svc-card-icon{
  width:52px;height:52px;border-radius:var(--r-sm);
  background:var(--bg-sec);display:flex;align-items:center;
  justify-content:center;font-size:24px;margin-bottom:12px;
  border:1px solid var(--border);
  transition:background .28s
}
.svc-card:hover .svc-card-icon{background:rgba(255,255,255,.9)}
.svc-card h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:7px;line-height:1.45}
.svc-card p{font-size:12px;color:var(--text-sub);line-height:1.8;flex-grow:1}
.svc-card-link{
  display:inline-flex;align-self:flex-start;
  font-size:11px;color:var(--green-dark);
  border-bottom:1px solid var(--green);padding-bottom:1px;
  margin-top:auto;padding-top:10px;white-space:nowrap;
  transition:opacity .2s
}
.svc-all{text-align:center;margin-top:36px}
.btn-more{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:12px 32px;
  font-size:13px;color:var(--text-sub);font-weight:500;
  box-shadow:var(--shadow-sm);transition:all .25s
}
.btn-more:hover{border-color:var(--green);color:var(--green-dark);background:var(--green-pale)}
.btn-more-arrow{
  width:22px;height:22px;border-radius:50%;background:var(--green-btn);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FEE バナー
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fee-banner{
  background:var(--bg-card);border-radius:var(--r-lg);
  border:1px solid var(--border-card);
  padding:36px 48px;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:36px;box-shadow:var(--shadow-sm)
}
.fee-icon{
  width:68px;height:68px;border-radius:var(--r-md);
  background:var(--bg-sec);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:30px
}
.fee-title{
  font-family:var(--font-serif);font-size:clamp(16px,2vw,22px);
  color:var(--text);font-weight:500;margin-bottom:8px;line-height:1.5
}
.fee-sub{font-size:13px;color:var(--text-sub);line-height:1.9}
.fee-btn-link{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-sec);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px 24px;
  font-size:13px;color:var(--text-sub);white-space:nowrap;
  transition:all .25s;font-weight:500
}
.fee-btn-link:hover{border-color:var(--green);color:var(--green-dark);background:var(--green-pale)}
.fee-btn-arrow{font-size:16px;color:var(--green)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT（事務所紹介）
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.about-left{position:relative}
.about-photo{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3}
.about-photo img{width:100%;height:100%;object-fit:cover}
/* オーバーラップカード */
.about-card{
  position:relative;
  background:var(--bg-card);border-radius:var(--r-md);
  border:1px solid var(--border-card);padding:26px 24px;
  margin-top:-44px;margin-left:32px;margin-right:-8px;
  box-shadow:var(--shadow-md);z-index:2
}
.about-card-en{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--green-dark);margin-bottom:6px;display:block
}
.about-card h4{font-family:var(--font-serif);font-size:16px;color:var(--text);margin-bottom:8px}
.about-card p{font-size:12px;color:var(--text-sub);line-height:1.9}
.about-link-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-sec);border:1px solid var(--border);
  border-radius:var(--r-md);padding:10px 20px;
  font-size:12px;color:var(--text-sub);margin-top:14px;
  transition:all .25s
}
.about-link-btn:hover{border-color:var(--green);color:var(--green-dark)}
.about-link-btn span{font-size:14px;color:var(--green)}

.about-right{}
.about-en{font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--green-dark);margin-bottom:8px;display:block}
.about-title{font-family:var(--font-serif);font-size:clamp(18px,2.2vw,24px);color:var(--text);line-height:1.65;margin-bottom:18px;font-weight:500}
.about-body{font-size:14px;color:var(--text-sub);line-height:2;margin-bottom:10px}

/* 選ばれる6理由（右側に2×3グリッド） */
.reasons-box{
  background:var(--bg-card);border-radius:var(--r-lg);
  border:1px solid var(--border-card);padding:28px 24px;
  box-shadow:var(--shadow-sm);margin-top:36px
}
.reasons-box-title{
  font-family:var(--font-serif);font-size:16px;color:var(--text);
  margin-bottom:20px;text-align:center
}
.reasons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.reason-item{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:14px 8px;
  border-radius:var(--r-sm);background:var(--bg-sec);
  transition:all .25s
}
.reason-item:hover{background:var(--green-pale);transform:translateY(-2px)}
.reason-icon{font-size:26px;margin-bottom:7px}
.reason-text{font-size:11px;color:var(--text-sub);line-height:1.6;font-weight:500}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOW（ご相談の流れ）
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flow-deco{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:16px;color:var(--green);
  font-family:'Lato',sans-serif;font-size:11px;letter-spacing:.3em;
}
.flow-deco-line{flex:1;max-width:120px;height:1px;background:var(--green);opacity:.4}
.flow-list{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;position:relative
}
/* 矢印区切り */
.flow-list::before{
  content:'';position:absolute;
  top:44px;left:calc(12.5% + 0px);right:calc(12.5%);
  height:1px;background:var(--border);z-index:0
}
.flow-step{
  background:var(--bg-card);border-radius:var(--r-lg);
  border:1px solid var(--border-card);
  padding:32px 20px 28px;text-align:center;
  position:relative;z-index:1;margin:0 8px;
  box-shadow:var(--shadow-sm);display:flex;
  flex-direction:column;align-items:center
}
.flow-step-num{
  width:52px;height:52px;border-radius:50%;
  background:var(--green-btn);color:#fff;
  font-family:'Lato',sans-serif;font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;border:3px solid var(--bg);
  box-shadow:0 4px 14px rgba(107,154,107,.3);
  position:relative;z-index:2
}
.flow-free{
  display:inline-block;background:var(--green-pale);
  color:var(--green-dark);border:1px solid var(--green);
  font-size:9px;font-weight:700;padding:2px 10px;
  border-radius:var(--r-pill);margin-bottom:9px;letter-spacing:.06em
}
.flow-spacer{display:inline-block;height:22px;visibility:hidden;margin-bottom:9px}
.flow-step-icon{font-size:28px;margin-bottom:10px}
.flow-step h3{
  font-family:var(--font-serif);font-size:14px;color:var(--text);
  margin-bottom:8px;line-height:1.5
}
.flow-step p{font-size:11px;color:var(--text-sub);line-height:1.8}
.flow-arrow{
  position:absolute;top:44px;right:-18px;
  width:16px;height:16px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  color:var(--border);font-size:18px
}
.flow-step:last-child .flow-arrow{display:none}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEWS + BLOG（非対称）
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.news-outer-grid{display:grid;grid-template-columns:1.5fr 0.8fr;gap:36px;align-items:start}
.news-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:20px
}
.news-head h3{font-family:var(--font-serif);font-size:18px;color:var(--text)}
.news-head-link{font-size:12px;color:var(--green-dark);border-bottom:1px solid var(--green)}
.news-list{}
.news-item{
  display:flex;align-items:baseline;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--border)
}
.news-item:first-child{border-top:1px solid var(--border)}
.news-date{font-family:'Lato',sans-serif;font-size:12px;color:var(--text-light);white-space:nowrap;flex-shrink:0}
.news-tag{
  flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;
  padding:2px 10px;border-radius:var(--r-pill);white-space:nowrap
}
.tag--reform{background:#EBF4EB;color:#5B8C5A;border:1px solid #B8D4B8}
.tag--grant{background:#FFF6E8;color:#9A7B3A;border:1px solid #E8CE98}
.tag--col{background:#EEF2F8;color:#4A6898;border:1px solid #BCC8DC}
.tag--info{background:#F8EEF6;color:#885A88;border:1px solid #D8B8D8}
.news-title{font-size:13px;color:var(--text);line-height:1.6}
.news-item:hover .news-title{color:var(--green-dark)}

/* ブログ右パネル */
.blog-panel{
  background:var(--bg-card);border-radius:var(--r-xl);
  border:1px solid var(--border-card);overflow:hidden;
  box-shadow:var(--shadow-md);margin-top:36px
}
.blog-panel-img{height:160px;overflow:hidden}
.blog-panel-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-panel:hover .blog-panel-img img{transform:scale(1.05)}
.blog-panel-body{padding:22px 20px}
.blog-panel-label{
  font-size:12px;font-weight:700;color:var(--text-sub);
  margin-bottom:8px;display:flex;align-items:center;gap:6px
}
.blog-panel-label::before{content:'📝';font-size:14px}
.blog-panel h4{font-family:var(--font-serif);font-size:16px;color:var(--text);margin-bottom:10px;line-height:1.5}
.blog-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--bg-sec);border:1px solid var(--border);
  border-radius:var(--r-md);padding:9px 16px;
  font-size:12px;color:var(--text-sub);transition:all .25s;
  font-weight:500
}
.blog-btn:hover{border-color:var(--green);color:var(--green-dark)}
.blog-btn span{font-size:14px;color:var(--green)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-bar{
  background:linear-gradient(135deg,var(--green-dark) 0%,#4D7A4D 100%);
  padding:64px 0;position:relative;overflow:hidden
}
.cta-bar::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent);
  pointer-events:none
}
.cta-bar-inner{
  width:min(1160px,calc(100% - 64px));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:32px
}
.cta-bar-text h3{
  font-family:var(--font-serif);font-size:clamp(18px,2.4vw,26px);
  color:#fff;margin-bottom:8px;font-weight:500
}
.cta-bar-text p{font-size:13px;color:rgba(255,255,255,.75);line-height:1.85}
.cta-bar-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-btn-online{
  display:flex;align-items:center;gap:10px;
  background:#fff;color:var(--green-dark);
  padding:14px 24px;border-radius:var(--r-md);
  font-weight:700;font-size:14px;box-shadow:0 6px 22px rgba(0,0,0,.12);
  transition:all .25s;text-decoration:none
}
.cta-btn-online:hover{background:var(--green-pale);transform:translateY(-2px)}
.cta-btn-online-sub{font-size:10px;color:var(--green-dark);opacity:.75;font-weight:400;display:block}
.cta-btn-contact{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);
  color:#fff;padding:14px 24px;border-radius:var(--r-md);font-size:14px;
  font-weight:500;transition:all .25s;text-decoration:none
}
.cta-btn-contact:hover{background:rgba(255,255,255,.25);transform:translateY(-2px)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-footer{background:var(--text);color:rgba(255,255,255,.55);padding:56px 0 24px}
.footer-inner{width:min(1160px,calc(100% - 64px));margin:0 auto}
.footer-main{
  display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:48px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px
}
.footer-logo{font-family:var(--font-serif);font-size:16px;color:#fff;display:block;margin-bottom:12px}
.footer-addr{font-size:13px;line-height:2.2}
.footer-tel-link{font-size:19px;font-weight:700;color:#fff;display:block;margin:8px 0;text-decoration:none}
.footer-hrs{font-size:11px;color:var(--sage)}
.footer-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-bottom:14px}
.footer-col li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-col a{font-size:13px;color:rgba(255,255,255,.5);transition:color .25s}
.footer-col a:hover{color:#fff}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;font-size:11px;color:rgba(255,255,255,.3)
}
.footer-links{display:flex;gap:18px}
.footer-links a{color:rgba(255,255,255,.3);transition:color .25s}
.footer-links a:hover{color:rgba(255,255,255,.7)}

/* SP Fixed */
.sp-float{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:rgba(255,255,255,.98);box-shadow:0 -2px 16px rgba(100,90,70,.15);
  padding:10px 14px
}
.sp-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-btn-a{
  display:flex;align-items:center;justify-content:center;
  padding:13px;border-radius:var(--r-md);font-weight:700;font-size:13px;gap:6px
}
.sp-btn-a--tel{background:var(--green-btn);color:#fff}
.sp-btn-a--form{background:var(--bg-sec);color:var(--text-sub);border:1px solid var(--border)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;padding:120px 0 60px}
  .hero-right{display:none}
  .prob-grid{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:repeat(6,1fr)}
  .svc-c3{grid-column:span 3}.svc-c2{grid-column:span 2}
  .svc-c4{grid-column:span 4}.svc-c6{grid-column:span 6}
  .about-grid{grid-template-columns:1fr;gap:0}
  .about-card{margin-right:0}
  .flow-list{grid-template-columns:1fr 1fr;gap:12px;margin:0}
  .flow-list::before{display:none}
  .flow-step{margin:0}
  .news-outer-grid{grid-template-columns:1fr}
  .blog-panel{margin-top:0}
  .footer-main{grid-template-columns:1fr 1fr;gap:32px}
  .cta-bar-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:767px){
  .section{padding:64px 0}
  .container{width:calc(100% - 48px)}
  .hdr-tel-wrap{display:none}
  .hdr-cta-btn{min-width:80px;font-size:10px;padding:7px 12px}
  .hero-features{grid-template-columns:1fr 1fr}
  .problem-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-c3,.svc-c2,.svc-c4,.svc-c6{grid-column:span 1}
  .fee-banner{grid-template-columns:1fr;padding:28px 24px;gap:20px}
  .reasons-grid{grid-template-columns:repeat(2,1fr)}
  .flow-list{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr}
  .sp-float{display:block}
  body{padding-bottom:68px}
}

/* ─── No.2 ロゴ画像 ─── */
.hdr-logo-img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ─── No.3 Since1998 画像バッジ ─── */
.hero-since-img { margin-bottom: 24px; }
.hero-since-img img {
  width: 100px; height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(100,90,70,.12));
}

/* ─── No.4 悩みイラスト ─── */
.prob-intro-illust img {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: 16px;
  display: block;
}

/* ─── No.5〜10 サービスカードアイコン img ─── */
.svc-card-icon img {
  width: 36px; height: 36px;
  object-fit: contain;
}

/* ─── No.13〜16 フローアイコン img ─── */
.flow-step-icon { display: flex; justify-content: center; }
.flow-step-icon img {
  width: 40px; height: 40px;
  object-fit: contain;
}

/* ─── No.18〜20 FV特徴バッジアイコン img ─── */
.hero-feat-icon img {
  width: 28px; height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━
   ABOUT SPLIT LAYOUT（カンプ準拠）
━━━━━━━━━━━━━━━━━━━━ */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.about-photo-col { position: relative; }
.about-photo-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-md);
}
.about-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }

.about-info-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-text-box {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-card);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.about-en {
  font-size: 10px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--green-dark); display: block; margin-bottom: 8px;
}
.about-title {
  font-family: var(--font-serif);
  font-size: clamp(16px,2vw,20px);
  color: var(--text); margin-bottom: 12px; line-height: 1.55;
}
.about-body { font-size: 14px; color: var(--text-sub); line-height: 2; margin-bottom: 14px; }
.about-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-sec); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 9px 18px;
  font-size: 12px; color: var(--text-sub); font-weight: 500;
  transition: all .25s;
}
.about-link-btn:hover { border-color: var(--green); color: var(--green-dark); }
.about-link-btn span { font-size: 14px; color: var(--green); }

.reasons-box {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-card);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.reasons-box-title {
  font-family: var(--font-serif);
  font-size: 16px; color: var(--text);
  margin-bottom: 18px; text-align: center;
}
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.reason-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 12px 8px;
  border-radius: var(--r-sm); background: var(--bg-sec);
  transition: all .25s; cursor: default;
}
.reason-item:hover { background: var(--green-pale); transform: translateY(-2px); }
.reason-icon {
  font-size: 24px; margin-bottom: 7px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
}
.reason-icon img { width: 32px; height: 32px; object-fit: contain; }
.reason-text { font-size: 11px; color: var(--text-sub); line-height: 1.6; font-weight: 500; }

/* ━━━━━━━━━━━━━━━━━━━━
   FLOW STEPS WRAP（矢印挟み）
━━━━━━━━━━━━━━━━━━━━ */
.flow-steps-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.flow-steps-wrap .flow-step {
  flex: 1;
  margin: 0;
  border-radius: var(--r-lg);
}
.flow-arrow-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--border);
  padding: 0 8px;
  flex-shrink: 0;
  margin-top: 36px; /* numの高さ分下げる */
}

/* ━━━━━━━━━━━━━━━━━━━━
   BLOB SHAPE（悩みイラスト背景）
━━━━━━━━━━━━━━━━━━━━ */
.blob-bg img {
  position: relative;
  z-index: 1;
  max-width: 130px;
  margin: 0 auto 14px;
}
.prob-intro-illust.blob-bg {
  position: relative;
}
.prob-intro-illust.blob-bg::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 130px; height: 130px;
  background: var(--beige-pale);
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  z-index: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE fixes
━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .about-split { grid-template-columns: 1fr; }
  .about-photo-wrap { aspect-ratio: 16/7; }
  .flow-steps-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .flow-arrow-sep { display: none; }
}
@media (max-width: 767px) {
  .about-split { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-steps-wrap { grid-template-columns: 1fr; }
}


/* ━━━━━━━━━━━━━━━━━━━━
   ICON STYLES（背景除去済み透過PNG）
━━━━━━━━━━━━━━━━━━━━ */

/* ヘッダーロゴ */
.hdr-logo-img {
  height: 44px; width: auto; max-width: 260px;
  display: block; object-fit: contain;
}
.hdr-icon { display: block; object-fit: contain; flex-shrink: 0; }

/* Since1998 バッジ */
.hero-since-img { margin-bottom: 22px; }
.hero-since-img img {
  width: 90px; height: 90px; object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(100,90,70,.1));
}

/* FV 特徴バッジ アイコン */
.hero-feat-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-feat-icon img { width: 26px; height: 26px; object-fit: contain; }

/* サービスカード アイコン */
.svc-card-icon {
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--bg-sec); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; transition: background .28s; flex-shrink: 0;
}
.svc-card-icon img { width: 38px; height: 38px; object-fit: contain; }
.svc-card:hover .svc-card-icon { background: rgba(255,255,255,.9); }

/* 料金バナー アイコン */
.fee-icon {
  width: 68px; height: 68px; border-radius: var(--r-md);
  background: var(--bg-sec); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fee-icon img { width: 42px; height: 42px; object-fit: contain; }

/* 悩み：人物イラスト */
.prob-intro-illust { margin-bottom: 18px; }
.prob-intro-illust img {
  width: 130px; height: 130px; object-fit: contain; display: block; margin: 0 auto;
}

/* 悩みカード アイコン */
.prob-card-icon-wrap {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--bg-sec); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.prob-card-icon-wrap img { width: 30px; height: 30px; object-fit: contain; }

/* フロー アイコン */
.flow-step-icon {
  display: flex; justify-content: center; align-items: center;
  height: 48px; margin-bottom: 4px;
}
.flow-step-icon img { width: 42px; height: 42px; object-fit: contain; }

/* 選ばれる理由 アイコン */
.reason-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 7px;
}
.reason-icon img { width: 32px; height: 32px; object-fit: contain; }

/* CTA メールアイコン */
.cta-mail-icon {
  width: 20px; height: 20px; object-fit: contain;
  filter: brightness(10); /* グリーン→白に */
  margin-right: 6px; flex-shrink: 0;
}

/* フッター ロゴ */
.footer-logo-img {
  height: 36px; width: auto; max-width: 220px;
  margin-bottom: 14px; display: block;
  filter: brightness(0) invert(1); /* 白ロゴに */
}