/* =========================================================
   処遇改善加算等 実績報告書届出代行 LP 用CSS
   貼り付け先：外観 → カスタマイズ → 追加CSS
   すべて .skl の中だけに効くので、他ページへの影響はありません
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");

.skl{
  --g:#3E7B27; --g-dk:#2A5A19; --g-lt:#F2F7EC; --g-line:#CFE2C0;
  --or:#E8650F; --or-lt:#FFF6EE; --or-line:#F6CFAE;
  --red:#D23A1C; --ink:#2B2F2A; --sub:#575E53;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  color:var(--ink); font-size:16px; line-height:1.85; font-weight:500;
  max-width:1040px; margin:0 auto; padding:0 16px;
}
.skl *,.skl *::before,.skl *::after{box-sizing:border-box}

/* ---- テーマの見出し・リスト装飾を打ち消す ---- */
.skl h1,.skl h2,.skl h3,.skl p,.skl ul,.skl li,.skl figure{
  margin:0; padding:0; border:0; background:none; box-shadow:none;
  font-family:inherit; color:inherit; line-height:inherit; letter-spacing:normal;
}
.skl h1::before,.skl h1::after,.skl h2::before,.skl h2::after,
.skl h3::before,.skl h3::after,.skl li::before,.skl li::after{content:none;display:none}
.skl ul{list-style:none}
.skl p:empty{display:none}
.skl img{max-width:100%;height:auto;display:block}
.skl svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- ヒーロー ---- */
.skl .skl-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:40px 0 64px}
.skl .skl-hero__ribbon{
  display:inline-block;background:var(--g-dk);color:#fff;font-weight:700;font-size:16px;
  padding:6px 34px;margin-bottom:20px;letter-spacing:.06em;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);
}
.skl .skl-hero__title{font-weight:900;line-height:1.2;margin-bottom:24px}
.skl .skl-hero__title span{display:block}
.skl .skl-hero__l1{font-size:clamp(26px,4.2vw,42px);color:var(--g-dk)}
.skl .skl-hero__l2{font-size:clamp(46px,8.4vw,86px);color:var(--or);letter-spacing:.04em;line-height:1.15;margin:4px 0}
.skl .skl-hero__l3{font-size:clamp(26px,4.2vw,42px);color:var(--ink)}
.skl .skl-hero__l3 small{font-size:.72em;font-weight:700}
.skl .skl-hero__lead{color:var(--sub);max-width:36em}
.skl .skl-hero__lead + .skl-hero__lead{margin-top:.8em}
.skl .skl-hero__visual{position:relative}
.skl .skl-hero__photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:28px 28px 28px 120px;background:var(--g-lt)}
.skl .skl-badge{
  position:absolute;left:-36px;bottom:-36px;width:190px;height:190px;border-radius:50%;
  background:#fff;border:3px solid var(--g);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:15px;line-height:1.5;
  box-shadow:0 0 0 8px rgba(255,255,255,.85);
}
.skl .skl-badge__big{color:var(--or);font-size:28px;font-weight:900;line-height:1.3}

/* ---- セクション共通 ---- */
.skl .skl-sec{margin:64px 0}
.skl .skl-pill{
  display:table;margin:0 auto 24px;background:var(--g);color:#fff;font-size:19px;font-weight:700;
  padding:8px 36px;border-radius:999px;line-height:1.5;text-align:center;
}

/* ---- お悩み / サービス 2カラム ---- */
.skl .skl-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.skl .skl-panel{border:2px solid var(--g-line);border-radius:16px;padding:0 26px 26px;background:#fff}
.skl .skl-panel .skl-pill{margin-top:-20px}
.skl .skl-panel--worry{position:relative;}
.skl .skl-panel--worry::after{content:'';display:block;position:absolute;bottom:0;width:100%;height:260px;background:url(kaigo_shogu.svg) no-repeat 100% 0;}
.skl .skl-panel--svc{border-color:var(--or-line);background:var(--or-lt)}
.skl .skl-panel--svc .skl-pill{background:var(--or)}

.skl .skl-worry li{display:flex;gap:14px;align-items:flex-start;padding:20px 0;border-bottom:1.5px dashed var(--g-line);font-size:17px;font-weight:700;line-height:1.7}
.skl .skl-worry li:last-child{border-bottom:0}
.skl .skl-worry svg{flex:0 0 28px;width:28px;height:28px;color:var(--g);stroke-width:2.2;margin-top:1px}
.skl .skl-worry strong{color:var(--g);font-weight:900}

.skl .skl-svc__lead{color:var(--or);font-size:clamp(18px,2.2vw,21px);font-weight:900;text-align:center;line-height:1.6;margin-bottom:20px}
.skl .skl-svc{display:grid;gap:10px}
.skl .skl-svc li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;background:#fff;border-radius:12px;padding:14px 16px}
.skl .skl-svc__icon{width:52px;height:52px;border-radius:12px;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center}
.skl .skl-svc__icon svg{width:28px;height:28px}
.skl .skl-svc h3{font-size:17px;font-weight:900;color:var(--g-dk);line-height:1.5}
.skl .skl-svc p{font-size:14.5px;color:var(--sub);line-height:1.65}

/* ---- サービス開始のお知らせ ---- */
.skl .skl-announce{text-align:center;font-weight:700;font-size:17px;line-height:2}
.skl .skl-announce__name{display:inline-block;color:var(--red);font-size:1.18em;font-weight:900}

/* ---- メリット ---- */
.skl .skl-merit{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--g-line);border-radius:16px;padding:28px 8px}
.skl .skl-merit li{text-align:center;padding:4px 14px;font-weight:700;font-size:15.5px;line-height:1.65}
.skl .skl-merit li + li{border-left:1.5px dashed var(--g-line)}
.skl .skl-merit__icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--g-lt);color:var(--g);display:flex;align-items:center;justify-content:center}
.skl .skl-merit__icon svg{width:38px;height:38px}

/* ---- ご利用条件 / 料金 ---- */
.skl .skl-info{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.skl .skl-info__box{border:2px solid var(--g-line);border-radius:16px;padding:22px 24px;display:grid;grid-template-columns:34px 1fr;gap:14px}
.skl .skl-info__mark{width:34px;height:34px;border-radius:50%;background:var(--g);color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;line-height:1}
.skl .skl-info h3{font-size:19px;font-weight:900;color:var(--g-dk);line-height:1.5;margin-bottom:6px}
.skl .skl-info p{font-size:15.5px}
.skl .skl-info strong{color:var(--red);font-weight:900}

/* ---- お問い合わせ ---- */
.skl .skl-cta{background:var(--g-dk);color:#fff;border-radius:20px;padding:44px 28px;text-align:center}
.skl .skl-cta__main{font-size:clamp(18px,2.4vw,23px);font-weight:900;line-height:1.6}
.skl .skl-cta__sub{margin-top:6px;opacity:.92}
.skl .skl-cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.skl .skl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;min-width:260px;
  padding:12px 32px;border-radius:999px;font-weight:900;font-size:17px;text-decoration:none;line-height:1.4;
  transition:transform .15s ease,background-color .15s ease;
}
.skl .skl-btn svg{width:22px;height:22px}
.skl .skl-btn--main{background:var(--or);color:#fff}
.skl .skl-btn--main:hover{background:#D2560A;color:#fff}
.skl .skl-btn--tel{background:#fff;color:var(--g-dk)}
.skl .skl-btn:active{transform:translateY(1px)}
.skl .skl-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- タブレット ---- */
@media (max-width:860px){
  .skl .skl-hero{grid-template-columns:1fr;gap:28px;padding-top:24px}
  .skl .skl-hero__visual{max-width:520px;width:100%;margin:0 auto}
  .skl .skl-hero__photo{aspect-ratio:4/3;border-radius:24px 24px 24px 90px}
  .skl .skl-badge{left:auto;right:-8px;bottom:-40px;width:160px;height:160px;font-size:13.5px}
  .skl .skl-badge__big{font-size:24px}
  .skl .skl-cols,.skl .skl-info{grid-template-columns:1fr}
  .skl .skl-cols{gap:44px}
  .skl .skl-merit{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .skl .skl-merit li:nth-child(3){border-left:0}
}
/* ---- スマホ ---- */
@media (max-width:520px){
  .skl br.skl-pc{display:none}
  .skl{font-size:15px}
  .skl .skl-sec{margin:48px 0}
  .skl .skl-panel{padding:0 16px 18px}
  .skl .skl-panel--worry::after{position:static; background-position-x:center;}
  .skl .skl-pill{font-size:16.5px;padding:8px 24px}
  .skl .skl-worry li{font-size:15.5px}
  .skl .skl-merit{padding:22px 4px}
  .skl .skl-merit li{padding:4px 8px;font-size:14px}
  .skl .skl-merit__icon{width:60px;height:60px}
  .skl .skl-merit__icon svg{width:32px;height:32px}
  .skl .skl-info__box{padding:18px}
  .skl .skl-cta{padding:34px 18px}
  .skl .skl-btn{width:100%;min-width:0}
  .skl .skl-btn--tel {padding:0;}
  .skl .skl-btn--tel a{text-decoration:none;color:var(--g-dk);display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
  .skl .skl-btn--tel:hover{background:var(--g-lt);color:var(--g-dk)}
}
@media (prefers-reduced-motion:reduce){.skl .skl-btn{transition:none}}