/* =============================================================
   shigyo-story.jp  リッチ＆シニア配慮デザインシステム
   ============================================================= */

/* ---------- 1. デザイントークン ---------- */
:root{
  --ss-bg:        #FBF9F4;
  --ss-surface:   #FFFFFF;
  --ss-tint:      #EAF1F0;
  --ss-ink:       #232323;
  --ss-sub:       #555555;
  --ss-primary:   #2B5D6B;
  --ss-primary-d: #1E454F;
  --ss-accent:    #C8A45B;
  --ss-line:      #E5E0D5;
  --ss-danger:    #B5482E;
  --ss-font-base: "Noto Sans JP", system-ui, sans-serif;
  --ss-font-head: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --ss-font-num:  "Inter", sans-serif;
  --ss-fs-body:   1.125rem;
  --ss-fs-small:  1rem;
  --ss-lh:        2.0;
  --ss-maxw:      1120px;
  --ss-gap:       24px;
  --ss-radius:    16px;
  --ss-radius-lg: 24px;
  --ss-shadow:    0 10px 30px rgba(43,93,107,.08);
  --ss-shadow-h:  0 16px 40px rgba(43,93,107,.14);
  --ss-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ss-dur:       0.8s;
}
.ss-root{
  background:var(--ss-bg); color:var(--ss-ink);
  font-family:var(--ss-font-base); font-size:var(--ss-fs-body);
  line-height:var(--ss-lh); letter-spacing:.01em; -webkit-font-smoothing:antialiased;
}
.ss-root p{ margin:0 0 1.4em; }
.ss-root a{ color:var(--ss-primary); text-underline-offset:3px; }
.ss-root a:hover{ color:var(--ss-primary-d); }
.ss-root :focus-visible{ outline:3px solid var(--ss-accent); outline-offset:3px; border-radius:6px; }
.ss-h1,.ss-h2,.ss-h3{ font-family:var(--ss-font-head); color:var(--ss-ink); line-height:1.45; letter-spacing:.02em; margin:0 0 .6em; }
.ss-h1{ font-size:clamp(1.9rem, 5vw, 3rem); }
.ss-h2{ font-size:clamp(1.5rem, 3.4vw, 2.2rem); }
.ss-h3{ font-size:clamp(1.2rem, 2.4vw, 1.5rem); }
.ss-lead{ font-size:clamp(1.15rem, 2.2vw, 1.35rem); color:var(--ss-sub); line-height:1.9; }
.ss-container{ max-width:var(--ss-maxw); margin-inline:auto; padding-inline:20px; }
.ss-section{ padding-block:clamp(56px, 9vw, 120px); }
.ss-section--tint{ background:var(--ss-tint); }
.ss-section--dark{ background:var(--ss-primary-d); color:#fff; }
.ss-section--dark .ss-h2,.ss-section--dark .ss-h3{ color:#fff; }
.ss-grid{ display:grid; gap:var(--ss-gap); grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.ss-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:60px; padding:0 32px;
  font-family:var(--ss-font-head); font-size:1.15rem; font-weight:500;
  border-radius:999px; border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .25s var(--ss-ease), transform .25s var(--ss-ease), box-shadow .25s var(--ss-ease);
}
.ss-btn--primary{ background:var(--ss-primary); color:#fff; box-shadow:var(--ss-shadow); }
.ss-btn--primary:hover{ background:var(--ss-primary-d); color:#fff; transform:translateY(-2px); box-shadow:var(--ss-shadow-h); }
.ss-btn--ghost{ background:#fff; color:var(--ss-primary); border-color:var(--ss-primary); }
.ss-btn--ghost:hover{ background:var(--ss-tint); transform:translateY(-2px); }
.ss-btn--tel{ background:var(--ss-accent); color:#2a2310; }
.ss-btn .ss-arrow{ transition:transform .25s var(--ss-ease); }
.ss-btn:hover .ss-arrow{ transform:translateX(4px); }
.ss-hero{ position:relative; padding-block:clamp(64px,10vw,128px); background:linear-gradient(180deg,var(--ss-tint),var(--ss-bg)); overflow:hidden; }
.ss-hero__inner{ max-width:760px; }
.ss-hero__title{ font-family:var(--ss-font-head); font-size:clamp(2rem,5.5vw,3.4rem); line-height:1.4; color:var(--ss-ink); margin:0 0 .4em; }
.ss-hero__sub{ font-size:clamp(1.1rem,2.4vw,1.4rem); color:var(--ss-sub); margin:0 0 1.6em; }
.ss-hero__cta{ display:flex; flex-wrap:wrap; gap:16px; }
.ss-card{ background:var(--ss-surface); border:1px solid var(--ss-line); border-radius:var(--ss-radius-lg); overflow:hidden; box-shadow:var(--ss-shadow); transition:transform .3s var(--ss-ease), box-shadow .3s var(--ss-ease); }
.ss-card:hover{ transform:translateY(-4px); box-shadow:var(--ss-shadow-h); }
.ss-card__media{ aspect-ratio:16/10; overflow:hidden; }
.ss-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ss-ease); }
.ss-card:hover .ss-card__media img{ transform:scale(1.05); }
.ss-card__body{ padding:24px; }
.ss-card__title{ font-family:var(--ss-font-head); font-size:1.3rem; margin:0 0 .4em; color:var(--ss-ink); }
.ss-tag{ display:inline-block; font-size:.95rem; padding:4px 14px; border-radius:999px; background:var(--ss-tint); color:var(--ss-primary-d); margin:0 6px 6px 0; }
.ss-stats{ display:grid; gap:var(--ss-gap); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); text-align:center; }
.ss-stat__num{ font-family:var(--ss-font-num); font-size:clamp(2.4rem,6vw,3.6rem); font-weight:700; color:var(--ss-primary); line-height:1; }
.ss-stat__label{ font-size:1.05rem; color:var(--ss-sub); margin-top:.5em; }
.ss-faq{ border-bottom:1px solid var(--ss-line); }
.ss-faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 48px 24px 0; position:relative; font-family:var(--ss-font-head); font-size:1.2rem; color:var(--ss-ink); }
.ss-faq__q::after{ content:"\FF0B"; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--ss-primary); font-size:1.4rem; transition:transform .3s var(--ss-ease); }
.ss-faq[open] .ss-faq__q::after{ content:"\FF0D"; }
.ss-faq__a{ padding:0 0 24px; color:var(--ss-sub); }
.ss-reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease); }
.ss-reveal.is-in{ opacity:1; transform:none; }
.ss-reveal[data-delay="1"]{ transition-delay:.12s; }
.ss-reveal[data-delay="2"]{ transition-delay:.24s; }
.ss-reveal[data-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ss-reveal{ opacity:1 !important; transform:none !important; }
}
@media (max-width:600px){
  :root{ --ss-fs-body:1.0625rem; }
  .ss-btn{ width:100%; }
  .ss-hero__cta{ flex-direction:column; }
}